feat(posts): Update various post related layouts

src/includes/css/blocks/posts.css

@@ -1,4 +1,19 @@
-.posts-list-item {
+.posts-grid {
   display: grid;
-  grid-template-columns: auto auto;
+  gap: var(--spacing-4);
+}
+
+.post {
+  &:not(:last-of-type) {
+    border-bottom: 1px solid var(--color-border);
+    padding-block-end: var(--spacing-4);
+  }
+
+  time {
+    font-size: var(--font-size-sm);
+  }
+
+  .post--title {
+    display: inline-block;
+  }
 }

src/includes/css/global/variables.css

@@ -10,5 +10,8 @@
   --font-weight-bold: 700;
   --font-weight-black: 900;
 
+  --font-size-xs: 0.8rem;
+  --font-size-sm: 1rem;
+
   --triangles: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path stroke-width="0" d="M0,0 40,40 80,0z" /></svg>');
 }

src/includes/css/utilities/fonts.css

@@ -13,3 +13,7 @@
 .line-height-l {
   line-height: 1.5rem;
 }
+
+.font-semibold {
+  font-weight: 500;
+}

src/includes/layouts/post.html

@@ -7,8 +7,10 @@ layout: "layouts/base"
 {% from "macros/utils.njk" import pageHeader %}
 <article class="flow">
     {{ pageHeader(title, excerpt, page.date) }}
+    <section>
+        {{ tagList(tags | filter("post") , "/posts") }}
+    </section>
     <section class="flow flow-space-default">
         {{ content | safe }}
     </section>
-    {{ tagList(tags | filter("post") , "/posts") }}
 </article>

src/includes/macros/date.njk

@@ -1,6 +1,6 @@
 {% macro format(dateString) %}
     <time class="date flex items-center gap-2 text-fadeText"
           datetime="{{ dateString }}">
-        <span class="text-primary line-height-s">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
+        {{ dateString | formatDate("MMMM Do YYYY") }}
     </time>
 {% endmacro %}

src/includes/macros/posts.njk

@@ -1,15 +1,21 @@
+{% from "macros/tags.njk" import tagList %}
+{% from "macros/date.njk" import format %}
+
 {% macro one(post, fmt = "MM/DD") %}
-    <article class="posts-list-item column-gap-0.5 justify-between line-height-l">
+    {% set tags = post.data.tags | filter("post") %}
-        <a href="{{ post.url }}">{{ post.data.title }}</a>
+    <article class="post flow flow-space-0">
-        <time datetime="{{ post.date }}" class="text-fadeText">{{ post.date | formatDate(fmt) }}</time>
+        {{ format(post.date) }}
-        <p class="text-fadeText font-size-s line-height-m">{{ post.data.excerpt }}</p>
+        <a href="{{ post.url }}" class="post--title font-semibold">{{ post.data.title }}</a>
+        <p class="text-fadeText font-size-s">{{ post.data.excerpt }}</p>
     </article>
 {% endmacro %}
+
 {% macro list(posts, format = "MM/DD") %}
-    <ol class="flow p-0" role="list">
+    <section class="posts-grid flow-space-6">
-        {% for post in posts %}<li class="flow-space-2">{{ one(post, format) }}</li>{% endfor %}
+        {% for post in posts %}{{ one(post, format) }}{% endfor %}
-    </ol>
+    </section>
 {% endmacro %}
+
 {% macro yearList(posts, year, format = "MM/DD") %}
     <section class="flow">
         <header class="cluster gap-0.5">

src/includes/macros/utils.njk

@@ -25,9 +25,9 @@
 {% macro pageHeader(title, subtitle, date) %}
     <header class="flow">
         <div class="flow flow-space-3">
+        {% if date %}{{ format(date) }}{% endif %}
             <h1>{{ title }}</h1>
             {% if subtitle %}<h3 class="text-fadeText">{{ subtitle }}</h3>{% endif %}
         </div>
-        {% if date %}{{ format(date) }}{% endif %}
     </header>
 {% endmacro %}

src/index.html

@@ -12,7 +12,7 @@ permalink: /
 <p>
     I like to <a href="/posts">write</a> about <a href="/games">games</a>, <a href="/books">books</a>, and <a href="/watching/movies/recent">movies</a> to name a few things. There's a lot to explore, and I hope you have fun!
 </p>
-<section class="flow-space-8">
+<section class="flow flow-space-8">
     <header class="flow">
         <h2>Favourite posts</h2>
         <p class="flow-space-1">Hand-picked, curated selection of my favourite posts!</p>
@@ -20,7 +20,7 @@ permalink: /
     {% set favouritePosts = collections.post | filterFavourites | reverse %}
     {{ list(favouritePosts, "MM/DD/YYYY") }}
 </section>
-<section class="flow-space-8">
+<section class="flow flow-space-8">
     <header>
         <h2>Recent posts</h2>
     </header>

src/pages/posts.html

@@ -3,15 +3,10 @@ title: All posts
 description: Read all of my posts.
 ---
 
-{% from "macros/posts.njk" import yearList %}
+{% from "macros/posts.njk" import list %}
 <p>
     Browse all of my posts, or narrow things down <a href="/tags">via tags</a>.
 </p>
-{% set itemsByYear = collections.post | reverse | organizeByYear %}
-{% set years = itemsByYear | keys | sort("desc") %}
 <section class="flow">
-    {% for year in years %}
+    {{ list(collections.post | reverse) }}
-        {% set itemsInYear = itemsByYear[year] %}
-        {{ yearList(itemsInYear, year) }}
-    {% endfor %}
 </section>

src/pages/tag.html

@@ -11,15 +11,10 @@ eleventyComputed:
     description: Browse all posts tagged with "{{ tag }}".
 ---
 
-{% from "macros/posts.njk" import yearList %}
+{% from "macros/posts.njk" import list %}
 <p>
     All posts tagged with "{{ tag }}", or go back to <a href="/tags">all tags</a>.
 </p>
-{% set itemsByYear = collections.postsByTag[tag] | reverse | organizeByYear %}
-{% set years = itemsByYear | keys | sort("desc") %}
 <section class="flow">
-    {% for year in years %}
+    {{ list(collections.postsByTag[tag] | reverse) }}
-        {% set itemsInYear = itemsByYear[year] %}
-        {{ yearList(itemsInYear, year) }}
-    {% endfor %}
 </section>