Added status card

src/assets/animations/_fade.scss

@@ -0,0 +1,14 @@
+.fade {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+  }
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.2s ease;
+  }
+}

src/assets/base/body.scss

@@ -0,0 +1,8 @@
+body {
+  @apply relative min-h-screen min-w-full text-y-beige-700 bg-y-beige-400 tracking-[-0.03em];
+  word-spacing: 0.5em;
+
+  &::before {
+    @apply absolute content-[''] h-full w-full bg-[url('/backgrounds/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
+  }
+}

src/assets/main.css

@@ -1,34 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  @apply relative min-h-screen min-w-full text-y-beige-700 bg-y-beige-400;
-  letter-spacing: -0.03em;
-  word-spacing: 0.5em;
-}
-
-body::before {
-  @apply absolute content-[''] h-full w-full bg-[url('/backgrounds/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
-}
-
-.fade-enter-from {
-  opacity: 0;
-}
-.fade-enter-to {
-  opacity: 1;
-}
-.fade-enter-active {
-  transition: all 0.2s ease;
-}
-.fade-leave-from {
-  opacity: 1;
-}
-.fade-leave-to {
-  opacity: 0;
-}
-.fade-leave-active {
-  transition: all 0.2s ease;
-}

src/assets/main.scss

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @import 'base/body';
+}
+
+@layer utilities {
+  @import 'utilities/scrollbar';
+}
+
+/**
+* ANIMATIONS FOR TRANSITIONS
+*/
+@import 'animations/fade'

src/assets/utilities/_scrollbar.scss

@@ -0,0 +1,5 @@
+.y-scrollbar {
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+}