From 5a8ebde0d5bd57f5c84d014b2754008aa8703ba8 Mon Sep 17 00:00:00 2001
From: Ben Eggers <ben@beneggers.com>
Date: Thu, 13 Jun 2024 18:21:21 -0700
Subject: [PATCH] mobile styling. fixes #23

---
 styles/content.css    |  10 +++-
 styles/footer.css     |   6 +++
 styles/navigation.css |  27 +++++++++++
 styles/page-title.css |   2 +-
 styles/typography.css | 105 +++++-------------------------------------
 5 files changed, 54 insertions(+), 96 deletions(-)

diff --git a/styles/content.css b/styles/content.css
index eb2a7da..db55bcd 100644
--- a/styles/content.css
+++ b/styles/content.css
@@ -1,4 +1,12 @@
 .content {
     grid-row: 2;
     grid-column: 2;
-}
\ No newline at end of file
+}
+
+/* 
+@media (max-width: 868px) {
+    .content {
+        grid-column: 1;
+        grid-row: 2;
+    }
+} */
\ No newline at end of file
diff --git a/styles/footer.css b/styles/footer.css
index ccdfd82..8c61230 100644
--- a/styles/footer.css
+++ b/styles/footer.css
@@ -4,6 +4,12 @@ footer {
     grid-row: 3;
 }
 
+@media (max-width: 868px) {
+    footer {
+        margin: 0 auto 0 auto;
+    }
+}
+
 footer p {
     margin: 0;
     text-align: center;
diff --git a/styles/navigation.css b/styles/navigation.css
index 792dec8..3805cca 100644
--- a/styles/navigation.css
+++ b/styles/navigation.css
@@ -9,6 +9,33 @@
     margin-right: 3vw;
 }
 
+.nav-sidebar ul {
+    margin: 0 0 1.25rem 0;
+    padding-left: 1.25rem;
+    padding-right: 0;
+}
+
+
+@media (max-width: 868px) {
+    .nav-sidebar {
+        grid-column: 2;
+        grid-row: 1;
+        align-items: center;
+        margin-right: 0;
+        width: 100%;
+    }
+
+    .nav-sidebar ul {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+        padding: 0;
+        list-style: none;
+        gap: 1rem;
+    }
+}
+
 .nav-sidebar li::marker {
     content: "./";
 }
\ No newline at end of file
diff --git a/styles/page-title.css b/styles/page-title.css
index 392ddb0..a6bfe9a 100644
--- a/styles/page-title.css
+++ b/styles/page-title.css
@@ -13,7 +13,7 @@
 .post-date {
     font-size: 1.0rem;
     margin-top: 0rem;
-    margin-bottom: 1.25rem;
+    margin-bottom: 0.5rem;
     font-weight: 600;
     color: var(--muted-text);
     text-align: center;
diff --git a/styles/typography.css b/styles/typography.css
index 19a58c3..460a708 100644
--- a/styles/typography.css
+++ b/styles/typography.css
@@ -85,6 +85,12 @@ p {
     max-width: 60ch;
 }
 
+@media (max-width: 868px) {
+    p {
+        margin: 0 auto 1.25rem auto;
+    }
+}
+
 a:link,
 a:visited {
     color: var(--highlight);
@@ -97,8 +103,10 @@ a.active {
 }
 
 ul {
-    margin: 0 0 1.25rem 0;
-    padding-left: 1.25rem;
+    margin: 0 auto 1.25rem auto;
+    padding-left: 3rem;
+    padding-right: 3rem;
+    max-width: 55ch;
 }
 
 ol {
@@ -110,101 +118,10 @@ ul ul,
 ul ol,
 ol ul,
 ol ol {
-    margin: 0;
+    max-width: 60ch;
 }
 
 ul li::marker {
     content: '\2192\00A0';
     color: var(--muted-text);
-}
-
-dt {
-    margin: 0;
-    font-weight: bold;
-}
-
-dd {
-    margin: 0 0 0 1.5rem;
-    font-style: italic;
-}
-
-dd+dt {
-    margin-top: 1.5rem;
-}
-
-dl {
-    margin: 0 0 1.5rem 0;
-}
-
-blockquote {
-    position: relative;
-    margin: 0 0 1.5rem 1.5rem;
-}
-
-blockquote::before {
-    position: absolute;
-    left: -1.5rem;
-    content: ">";
-    color: var(--muted-text);
-}
-
-pre,
-code,
-kbd,
-samp {
-    background: var(--bg) !important;
-    font-family: var(--font-monospace);
-}
-
-code:before {
-    content: "`";
-    color: var(--muted-text);
-}
-
-code:after {
-    content: "`";
-    color: var(--muted-text);
-}
-
-pre {
-    overflow-x: auto;
-    padding: 1.5rem;
-    margin: 0 0 1.5rem 0;
-}
-
-b,
-strong {
-    font-weight: 600;
-}
-
-::selection,
-mark {
-    background-color: var(--highlight);
-    color: var(--bg);
-}
-
-table {
-    border-spacing: 0;
-    margin: 0 0 1.5rem 0;
-    overflow-wrap: anywhere;
-}
-
-th,
-td {
-    padding: 0 .75rem;
-    vertical-align: top;
-}
-
-th:first-child,
-td:first-child {
-    padding-left: 0;
-}
-
-th {
-    text-align: inherit;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
 }
\ No newline at end of file