From 8546fe3ad5cd5b37345e8af62853a8f0be035499 Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Sat, 3 Oct 2026 18:52:18 -0400
Subject: [PATCH] fix: consistent right column width, mobile journal style

---
 src/styles/components/nav.scss | 20 +++++++++++++++
 src/styles/journal.scss        | 46 +++++++++++++++++++++++++---------
 src/styles/post.scss           | 30 +++++-----------------
 3 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/src/styles/components/nav.scss b/src/styles/components/nav.scss
index 48e1554..b9e5025 100644
--- a/src/styles/components/nav.scss
+++ b/src/styles/components/nav.scss
@@ -21,4 +21,24 @@ header {
             grid-area: name;
         }
     }
+}
+
+@media (max-width: 450px) {
+    header {
+        nav {
+            grid-template-columns: 1fr;
+            grid-template-rows: auto;
+            row-gap: 0.25rem;
+            grid-template-areas: 
+                "back" 
+                "name";
+
+            span.back {
+                font-family: var(--font-code);
+                text-transform: uppercase;
+                font-size: 1rem;
+                opacity: 65%;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/styles/journal.scss b/src/styles/journal.scss
index 32fdcb5..9b7e77b 100644
--- a/src/styles/journal.scss
+++ b/src/styles/journal.scss
@@ -8,12 +8,12 @@ body {
 
 header {
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: 1fr 15rem;
     grid-template-rows: repeat(3, 1fr);
     grid-template-areas: 
-        "nav nav nav nav nav"
-        "title title title title title"
-        "title title title title title";
+        "nav nav"
+        "title title"
+        "title title";
     row-gap: 40px;
     margin-bottom: 5vh;
 
@@ -36,7 +36,6 @@ header {
 }
 
 h2 {
-
     font-family: var(--font-heading);
     font-size: 3rem;
     font-weight: 350;
@@ -56,9 +55,8 @@ ul.post-list {
         display: contents;
 
         div.post-meta {
-
             span {
-                white-space: nowrap;
+                text-wrap-mode: nowrap;
                 text-transform: uppercase;
                 display: block
             }
@@ -75,7 +73,7 @@ ul.post-list {
         }
 
         a {
-            display: table-cell;
+            display: block;
             font-family: var(--font-heading);
             color: var(--text-color);
             font-size: 1.5rem;
@@ -83,10 +81,34 @@ ul.post-list {
     }
 }
 
-@counter-style dash {
-  system: cyclic;
-  symbols: "\2043";
-  suffix: " ";
+@media (max-width: 775px) {
+    header {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+
+    ul.post-list {
+        li {
+            display: block;
+
+            div.post-meta {
+                opacity: 65%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                span {
+                    display: inline;
+                }
+
+                span.published-date::after {
+                    content: ' · '
+                }
+            }
+        }
+        
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
 }
 
 main {
diff --git a/src/styles/post.scss b/src/styles/post.scss
index 98ebfa2..023fff4 100644
--- a/src/styles/post.scss
+++ b/src/styles/post.scss
@@ -12,12 +12,12 @@ main {
 
 header {
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: 1fr 15rem;
     grid-template-rows: repeat(3, 1fr);
     grid-template-areas: 
-        "nav nav nav nav nav"
-        "title title title title title"
-        "title title title title title";
+        "nav nav"
+        "title title"
+        "title title";
     row-gap: 40px;
     margin-bottom: 10vh;
 
@@ -27,8 +27,8 @@ header {
         grid-template-columns: subgrid;
         grid-template-rows: subgrid;
         grid-template-areas:
-            "heading heading heading heading published-date-meta"
-            "heading heading heading heading updated-date-meta";
+            "heading published-date-meta"
+            "heading updated-date-meta";
 
         align-items: end;
         
@@ -168,25 +168,7 @@ article {
     }
 }
 
-@media (max-width: 450px) {
-    header {
-        nav {
-            grid-template-columns: 1fr;
-            grid-template-rows: auto;
-            row-gap: 0.25rem;
-            grid-template-areas: 
-                "back" 
-                "name";
 
-            span.back {
-                font-family: var(--font-code);
-                text-transform: uppercase;
-                font-size: 1rem;
-                opacity: 65%;
-            }
-        }
-    }
-}
 
 @counter-style numbered {
     system: extends decimal;
-- 
2.51.2