From 24b1aa0100b329d4437f1f29d23ad27f3c7c6699 Mon Sep 17 00:00:00 2001
From: Ava Gaiety W <ava@wroten.me>
Date: Mon, 5 May 2025 20:39:47 -0600
Subject: [PATCH] add thumbnails to blog posts

---
 _includes/blog-list.njk | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/_includes/blog-list.njk b/_includes/blog-list.njk
index bccecd5..49518b1 100644
--- a/_includes/blog-list.njk
+++ b/_includes/blog-list.njk
@@ -13,10 +13,22 @@
 
 
   <div class="mx-2 bg-base dark:bg-base/85 rounded contrast-more:bg-crust shadow border-l-2 border-yellow">
-    <div class="flex flex-col gap-4 p-4 sm:p-6 contrast-more:contrast-150">
+    <div class="flex flex-col gap-12 p-4 sm:p-6 contrast-more:contrast-150">
       {%- for post in collections.posts | reverse -%}
-        <div>
-          <a href="{{ post.url }}" class="link text-2xl">{{ post.data.title }}</a>
+        <div class="flex flex-col gap-1">
+          <a href="{{ post.url }}" class="link text-2xl flex flex-col gap-2">
+            <h2 class="text-2xl order-last">{{ post.data.title }}</h2>
+            <div class="order-first bg-mauve rounded">
+              <img
+                class="
+                  contrast-50 saturate-0 opacity-50
+                  motion-safe:transition-all
+                "
+                src="{{ post.data.coverImage }}"
+                alt="{{ post.data.imageDescription }}"
+              />
+            </div>
+          </a>
           <p class="text-sm text-mauve">
             <time datetime="{{ post.data.date | date('YYYY-MM-DD') }}">{{ post.data.date | date }}</time>
           </p>