From 866dcf28d366bcbb5e5cdfe23432e786a8b11e2b Mon Sep 17 00:00:00 2001
From: Ava Gaiety W <ava@wroten.me>
Date: Tue, 6 May 2025 11:17:21 -0600
Subject: [PATCH] gradients woo

---
 _includes/blog-list.njk | 12 +++---------
 _includes/pinned.njk    |  4 ++--
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/_includes/blog-list.njk b/_includes/blog-list.njk
index e601976..4ffb4d8 100644
--- a/_includes/blog-list.njk
+++ b/_includes/blog-list.njk
@@ -18,15 +18,9 @@
         <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 font-serif">{{ 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 class="order-first rounded bg-gradient-to-br from-mauve via-yellow to-sky">
+              <div class="lg:h-60 h-24 w-full bg-center bg-105% opacity-50 saturate-50 contrast-50 overflow-hidden" style="background-image: url('{{ post.data.coverImage }}')">
+              </div>
             </div>
           </a>
           <p class="text-text">
diff --git a/_includes/pinned.njk b/_includes/pinned.njk
index 0d07182..600bf09 100644
--- a/_includes/pinned.njk
+++ b/_includes/pinned.njk
@@ -19,10 +19,10 @@
               {{ content.data.tags[0] | capitalize }}
             </a>
           </div>
-          <a href="{{ content.url }}" class="motion-safe:transition-colors bg-mauve block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
+          <a href="{{ content.url }}" class="motion-safe:transition-colors bg-gradient-to-br from-10% to-80% from-mauve via-yellow to-sky block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
             <div class="rounded-tl rounded-tr h-16 w-full bg-center bg-105% opacity-50 saturate-0 contrast-50 overflow-hidden" style="background-image: url('{{ content.data.image }}')">
             </div>
-            <h3 class="font-serif bg-mauve h-20 p-3 text-xl text-base">
+            <h3 class="font-serif bg-mauve h-20 p-3 text-lg text-base">
             <span class="line-clamp-2" title="{{ content.data.title }}">
                 {{ content.data.title }}
               </span>