feat: update posts layout

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 ]">
+        <li class="[ posts-list-item ]">
-            <div>
+                <div>
-                <a href="{{ post.url }}">{{ post.data.title }}</a>
+                    <a class="[ flex line-height-l ]" href="{{ post.url }}">{{ post.data.title }}</a>
-            </div>
+                    <div class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</div>
-            <div class="[ text-fadeText font-size-s ]">{{ post.data.excerpt }}</div>
+                </div>
-            <div class="[ bg-surface radius-0.5 px-0.5 text-primary font-size-s ]">{{ post.data.date | formatDate("MM/DD/YYYY") }}</div>
+                <div class="[ text-fadeText line-height-m flex items-center ]">{{ post.data.date | formatDate("MM/DD") }}</div>
         </li>
     {% endfor %}
 </ul>

src/css/blocks/archive.css

@@ -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%;
-}

src/css/blocks/posts.css

@@ -0,0 +1,4 @@
+.posts-list-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}

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;
+}