feat: improve category cards spacing, overflow, and add fade effect to edges

2026-03-13 10:18:04 -05:00
parent 629403fdde
commit d0f10986cd
2 changed files with 17 additions and 5 deletions
--- 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;
+}