From d0f10986cddafffa7893a8751bd1a893dd672983 Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Fri, 13 Mar 2026 10:18:04 -0500
Subject: [PATCH] feat: improve category cards spacing, overflow, and add fade
 effect to edges

---
 src/components/cards/CategoryCard.astro | 10 +++++-----
 src/styles/utilities.css                | 12 ++++++++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/cards/CategoryCard.astro b/src/components/cards/CategoryCard.astro
index 53c8017..ef1983f 100644
--- a/src/components/cards/CategoryCard.astro
+++ b/src/components/cards/CategoryCard.astro
@@ -22,8 +22,8 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
     data-astro-prefetch
   >
     <div class="relative grow overflow-hidden">
-      <div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
-        <div class="flex flex-row items-center mb-4">
+      <div class="mask-fade-edges absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
+        <div class="flex flex-row items-center mb-4 shrink-0">
           <div class="card-hover-icon-scale shrink-0 mr-3">
             <Logo
               srcLight={getDirectusImageURL(logoLight)}
@@ -35,12 +35,12 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
             {title}
           </h3>
         </div>
-        <div>
-          <p class="card-text-description mb-4">
+        <div class="overflow-hidden">
+          <p class="card-text-description line-clamp-3">
             {description}
           </p>
         </div>
-        <div class="card-text-description flex items-center justify-between text-xs mt-auto pt-1 md:pt-2">
+        <div class="card-text-description flex shrink-0 items-center justify-between text-xs mt-auto pt-1 md:pt-2">
           <span class="inline-flex items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index 3ca3923..10c792c 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -138,3 +138,15 @@
          bg-neutral-100 dark:bg-neutral-800
          shadow-xs dark:shadow-md
 }
+
+@utility mask-fade-edges {
+  -webkit-mask-image: 
+    linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
+    linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
+  mask-image: 
+    linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
+    linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
+
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+}