feat: consolidate css into tailwind

2026-03-15 22:38:23 -05:00
parent 641c7cb33f
commit dfeb181a1d
6 changed files with 250 additions and 258 deletions
--- a/src/styles/utilities-misc.css
+++ b/src/styles/utilities-misc.css
@@ -0,0 +1,44 @@
+/* Nav */
+@utility nav-base {
+  @apply border border-neutral-100 dark:border-stone-500/20
+         bg-neutral-100 dark:bg-neutral-800
+         shadow-xs dark:shadow-md
+}
+
+/* Fade edges of a div */
+@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;
+}
+
+/* Animations */
+@utility smooth-reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+@utility smooth-reveal-2 {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+@utility smooth-reveal-cards {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+@utility smooth-reveal-fade {
+  opacity: 0;
+  transform: translateY(0px);
+  transition: opacity 1.8s ease, transform 0.8s ease;
+}