yes

birdflop · Dec 27, 2023 · 7f240c5 · 7f240c5
1 parent cffe055
commit 7f240c5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 18 deletions.
diff --git a/src/components/elements/Card.tsx b/src/components/elements/Card.tsx
@@ -68,7 +68,7 @@ export default component$(({ color, darker, link, onClick$, extraClass, row }: a
             }}></div>
             <div class={{
               'absolute left-0 right-0 mx-auto bottom-0 w-32 h-32 rounded-full opacity-20 ease-in-out filter blur-xl': true,
-              'animation-delay-5': true,
+              '-animation-delay-5': true,
               'animate-blob': blob === 0,
               'animate-blob1': blob === 1,
               'animate-blob2': blob === 2,
@@ -87,7 +87,7 @@ export default component$(({ color, darker, link, onClick$, extraClass, row }: a
             }}></div>
             <div class={{
               'absolute left-0 right-0 mx-auto bottom-0 w-32 h-32 rounded-full opacity-20 ease-in-out filter blur-xl': true,
-              'animation-delay-10': true,
+              '-animation-delay-10': true,
               'animate-blob': blob === 0,
               'animate-blob1': blob === 1,
               'animate-blob2': blob === 2,

diff --git a/src/global.css b/src/global.css
@@ -32,20 +32,23 @@
   font-display: swap;
 }
 
-@layer utilities {
-  .animation-delay-5 { animation-delay: -5s; }
-  .animation-delay-10 { animation-delay: -10s; }
-}
+.-animation-delay-5 { animation-delay: -5s; }
+.-animation-delay-10 { animation-delay: -10s; }
+
+.animation-delay-100 { animation-delay: 100ms; }
+.animation-delay-200 { animation-delay: 200ms; }
+.animation-delay-300 { animation-delay: 300ms; }
+.animation-delay-400 { animation-delay: 400ms; }
+.animation-delay-500 { animation-delay: 500ms; }
 
 html {
   background-color: hsl(270deg, 22%, 5%);
-  font-family: MinecraftRegular, MinecraftRus;
 }
 
 main {
   overflow: auto;
-  height: calc(100lvh - 68px);
-  margin-top: 68px;
+  height: calc(100lvh - 56px);
+  margin-top: 56px;
 }
 
 .font-bold {
@@ -137,7 +140,6 @@ main {
   }
 }
 
-
 .fade-in {
   opacity: 0;
   transform: translateY(-100px);
@@ -153,12 +155,6 @@ main {
   }
 }
 
-.animation-delay-100 { animation-delay: 100ms; }
-.animation-delay-200 { animation-delay: 200ms; }
-.animation-delay-300 { animation-delay: 300ms; }
-.animation-delay-400 { animation-delay: 400ms; }
-.animation-delay-500 { animation-delay: 500ms; }
-
 .Scp {
   display: flex;
   height: 170px !important;

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -22,8 +22,8 @@ export default component$(() => {
       <div class="text-center justify-center">
         <div id="noise" class="flex relative justify-center align-center mb-10">
           <div class="absolute w-32 h-32 sm:w-48 sm:h-48 bottom-0 bg-pink-500 rounded-full opacity-10 animate-blob ease-in-out filter blur-xl"></div>
-          <div class="absolute w-32 h-32 sm:w-48 sm:h-48 bottom-0 bg-luminescent-600 rounded-full opacity-10 animate-blob ease-in-out filter blur-xl animation-delay-5"></div>
-          <div class="absolute w-32 h-32 sm:w-48 sm:h-48 bottom-0 bg-violet-500 rounded-full opacity-10 animate-blob ease-in-out filter blur-xl animation-delay-10"></div>
+          <div class="absolute w-32 h-32 sm:w-48 sm:h-48 bottom-0 bg-luminescent-600 rounded-full opacity-10 animate-blob ease-in-out filter blur-xl -animation-delay-5"></div>
+          <div class="absolute w-32 h-32 sm:w-48 sm:h-48 bottom-0 bg-violet-500 rounded-full opacity-10 animate-blob ease-in-out filter blur-xl -animation-delay-10"></div>
           <div class="z-10 fade-in">
             <Icon class="w-[300px]" />
           </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -85,6 +85,9 @@ module.exports = {
   theme: {
     extend: {
       colors: { gray, luminescent },
+      fontFamily: {
+        'sans': ['MinecraftRegular', 'MinecraftRus'],
+      },
       animation: {
         blob: 'blob 15s infinite',
         blob1: 'blob1 15s infinite',