From 0c9216ac1b2573117c756a6c7d6a3f468f44b10f Mon Sep 17 00:00:00 2001
From: Ava Gaiety W <ava@wroten.me>
Date: Fri, 18 Apr 2025 21:38:14 -0600
Subject: [PATCH] cleaner pinned style

---
 _includes/pinned.njk | 16 ++++++----------
 tailwind.config.js   |  6 ++++++
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/_includes/pinned.njk b/_includes/pinned.njk
index 03b858e..e7fe717 100644
--- a/_includes/pinned.njk
+++ b/_includes/pinned.njk
@@ -19,18 +19,14 @@
               {{ content.data.tags[0] | capitalize }}
             </a>
           </div>
-          <a href="{{ content.url }}" class="motion-safe:transition-colors 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">
-            <h3 class="relative bg-overlay2 h-20 overflow-hidden rounded-tl rounded-tr text-xl text-base">
-              <span class="absolute z-10 inset-3">{{ content.data.title }}</span>
-              <img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />
+          <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">
+            <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="bg-mauve h-20 pt-3 px-3 text-xl text-base">
+              {{ content.data.title }}
             </h3>
-            <div class="relative overflow-hidden h-24 rounded-bl rounded-br pt-3 text-text">
-              <div class="absolute scale-110 bottom-1/2 left-0 right-0 translate-y-1/2 bg-crust">
-                <img class="mb-40 contrast-50 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
-              </div>
-              <div class="px-3 relative z-10">
+            <div class="py-2 px-3 h-24 rounded-bl rounded-br text-text bg-crust">
               {{ content.data.description | markdown | safe }}
-              </div>
             </div>
           </a>
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index bf685bb..994c88b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,12 @@ module.exports = {
       'md': '768px',
       'lg': '1024px',
     },
+    backgroundSize: {
+      'auto': 'auto',
+      'cover': 'cover',
+      'contain': 'contain',
+      '105%': '105%',
+    }
   },
   plugins: [
     require("@catppuccin/tailwindcss"),