From b32d02967528f342d55dfd59fcf2d11039380e3d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Sun, 27 Jul 2025 16:26:11 +0200
Subject: [PATCH] feat: :lipstick: update post list preview styling

---
 src/css/style.css |  2 +-
 src/posts.njk     | 28 ++++++++++++++--------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index af03e9e..86b1d1d 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -52,7 +52,7 @@ code {
   font-family: var(--font-monospace);
 }
 
-a:not(nav a, .button) {
+a:not(nav a, .button, :has(h1)) {
   @apply font-normal text-inherit underline decoration-sky-600 decoration-2 underline-offset-4 transition-colors duration-300 hover:text-sky-600;
 }
 
diff --git a/src/posts.njk b/src/posts.njk
index af200f2..3dcfd88 100644
--- a/src/posts.njk
+++ b/src/posts.njk
@@ -12,28 +12,28 @@ pagination:
 ---
 
 {% for post in blogposts %}
-  <article class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:rounded-3xl md:px-safe-offset-6">
-    <h1>{{ post.data.title }}</h1>
+  <article class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:my-4 prose-headings:font-normal prose-headings:duration-300 prose-headings:hover:text-inherit lg:prose-headings:my-6 prose-a:no-underline prose-a:hover:text-sky-600 prose-figure:my-4 lg:prose-figure:my-6 prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:rounded-3xl">
+    <a href="{{ post.url }}">
+      <h1>{{ post.data.title }}</h1>
+    </a>
     <div class="not-prose">
       {%- from 'postmeta.macro.njk' import postmeta %}
       {{ postmeta({ date: post.date, author: post.data.author, content: post.content, center: false }) }}
     </div>
 
     {% if post.data.image and post.data.image.src != '' %}
-      <figure class="relative">
-        <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
-        {% if post.data.image and post.data.image.credit != '' %}
-          <figcaption class="absolute bottom-0 right-0 rounded-tl-md rounded-br-3xl bg-black px-2 py-1 pe-4 text-xs text-white md:text-sm">
-            {{ post.data.image.credit }}
-          </figcaption>
-        {% endif %}
-      </figure>
+      <a href="{{ post.url }}">
+        <figure class="relative">
+          <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
+          {% if post.data.image and post.data.image.credit != '' %}
+            <figcaption class="absolute bottom-0 right-0 rounded-tl-md rounded-br-3xl bg-black px-2 py-1 pe-4 text-xs text-white md:text-sm">
+              {{ post.data.image.credit }}
+            </figcaption>
+          {% endif %}
+        </figure>
+      </a>
     {% endif %}
 
     {{ post.data.page.excerpt | safe }}
-
-    <a href="{{ post.url }}" class="button inline-flex items-center gap-2 rounded-xl bg-sky-600 px-5 py-2 font-bold text-white no-underline transition-colors duration-300 *:stroke-[2.5] hover:bg-sky-700 2xl:rounded-2xl 2xl:px-6 2xl:py-3">
-      Read on {% lucide "chevron-right", { "class": "size-6 md:size-7 xl:size-8" } %}
-    </a>
   </article>
 {% endfor %}