From c91588b5a3f8292e0b45efcdc9ee948c934bcc13 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Fri, 23 Feb 2024 15:06:27 -0800
Subject: [PATCH] feat: update posts layout

---
 src/_includes/macros/posts.njk | 14 +++++++-------
 src/css/blocks/archive.css     | 27 ---------------------------
 src/css/blocks/posts.css       |  4 ++++
 src/css/utilities/fonts.css    | 18 +++++++++++++++++-
 4 files changed, 28 insertions(+), 35 deletions(-)
 delete mode 100644 src/css/blocks/archive.css
 create mode 100644 src/css/blocks/posts.css

diff --git a/src/_includes/macros/posts.njk b/src/_includes/macros/posts.njk
index 8cf8019..4900422 100644
--- a/src/_includes/macros/posts.njk
+++ b/src/_includes/macros/posts.njk
@@ -1,12 +1,12 @@
 {% macro list(posts) %}
-<ul class="[ flow list-none m-0 p-0 flow-space-0.5 ]">
+<ul class="[ posts-list ] [ flow list-none m-0 p-0 flow-space-0.5 ]">
     {% for post in posts %}
-        <li class="[ flex flex-wrap column-gap-1 row-gap-0 ]">
-            <div>
-                <a href="{{ post.url }}">{{ post.data.title }}</a>
-            </div>
-            <div class="[ text-fadeText font-size-s ]">{{ post.data.excerpt }}</div>
-            <div class="[ bg-surface radius-0.5 px-0.5 text-primary font-size-s ]">{{ post.data.date | formatDate("MM/DD/YYYY") }}</div>
+        <li class="[ posts-list-item ]">
+                <div>
+                    <a class="[ flex line-height-l ]" href="{{ post.url }}">{{ post.data.title }}</a>
+                    <div class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</div>
+                </div>
+                <div class="[ text-fadeText line-height-m flex items-center ]">{{ post.data.date | formatDate("MM/DD") }}</div>
         </li>
     {% endfor %}
 </ul>
diff --git a/src/css/blocks/archive.css b/src/css/blocks/archive.css
deleted file mode 100644
index 0c29d89..0000000
--- a/src/css/blocks/archive.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.archive-divider {
-  border-color: var(--color-surface);
-  border-width: 1px;
-  border-style: dashed;
-  flex: 1;
-}
-
-.archive-date {
-  color: var(--color-fadeText);
-  letter-spacing: 0.05em;
-}
-
-.archive-item {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--s1);
-}
-
-.archive-item > * {
-  flex-grow: 1;
-  flex-basis: calc((30rem - 100%) * 999);
-}
-
-.archive-item > :nth-last-child(n + 4),
-.archive-item > :nth-last-child(n + 4) ~ * {
-  flex-basis: 100%;
-}
diff --git a/src/css/blocks/posts.css b/src/css/blocks/posts.css
new file mode 100644
index 0000000..c415f23
--- /dev/null
+++ b/src/css/blocks/posts.css
@@ -0,0 +1,4 @@
+.posts-list-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
diff --git a/src/css/utilities/fonts.css b/src/css/utilities/fonts.css
index 58507e3..15e7406 100644
--- a/src/css/utilities/fonts.css
+++ b/src/css/utilities/fonts.css
@@ -7,9 +7,25 @@
 }
 
 .font-size-l {
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 .font-size-xl {
+  font-size: 2rem;
+}
+
+.font-size-2xl {
   font-size: 3rem;
 }
+
+.line-height-s {
+  line-height: 0.8rem;
+}
+
+.line-height-m {
+  line-height: 1.125rem;
+}
+
+.line-height-l {
+  line-height: 1.5rem;
+}