Move globals.scss into Base.astro, fix inter vs sans tailwind font definitions

frontend/src/globals.scss

@@ -1,81 +0,0 @@
-@tailwind base;
-
-@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-
-.noise::after {
-    background-image: url("/noise.png");
-    position: fixed;
-    z-index: 10;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    opacity: 50%;
-    content: " ";
-    pointer-events: none;
-}
-
-.noise-card {
-    @apply bg-zinc-800;
-    &::before {
-        position: absolute;
-        z-index: 30;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        content: " ";
-        pointer-events: none;
-        background-image: url("/noise.png");
-        background-position-x: 66px;
-        // background-color: rgba(255, 255, 255, 6%);
-        opacity: 80%;
-        // filter: brightness(100%);
-        // background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/noise.png");
-        // #202020;
-    }
-}
-
-html,
-body {
-    @apply overflow-x-hidden;
-    background-color: #151413;
-    color: #bab1a8;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-}
-
-@layer base {
-    * {
-        /* @apply border-border; */
-    }
-    body {
-        /* @apply bg-background text-foreground; */
-    }
-
-    ul,
-    ol {
-        list-style: revert;
-    }
-    /* NEW CODE */
-    /* width */
-    ::-webkit-scrollbar {
-        @apply w-2 rounded-lg;
-    }
-
-    /* Track */
-    ::-webkit-scrollbar-track {
-        @apply bg-zinc-700 rounded-lg;
-    }
-
-    /* Handle */
-    ::-webkit-scrollbar-thumb {
-        @apply bg-zinc-500 rounded-xl;
-    }
-
-    /* Handle on hover */
-    ::-webkit-scrollbar-thumb:hover {
-        @apply bg-zinc-400 rounded-lg;
-    }
-}

frontend/src/layouts/Base.astro

@@ -6,6 +6,91 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="preload" href="/notify.wav" as="audio" />
     <title>Dynamic Preauth</title>
+    <style is:global lang="scss">
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+      .noise::after {
+        background-image: url("/noise.png");
+        position: fixed;
+        z-index: 10;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        opacity: 50%;
+        content: " ";
+        pointer-events: none;
+      }
+
+      .noise-card {
+        @apply bg-zinc-800;
+        &::before {
+          position: absolute;
+          z-index: 30;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          content: " ";
+          pointer-events: none;
+          background-image: url("/noise.png");
+          background-position-x: 66px;
+          // background-color: rgba(255, 255, 255, 6%);
+          opacity: 80%;
+          // filter: brightness(100%);
+          // background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/noise.png");
+          // #202020;
+        }
+      }
+
+      html,
+      body {
+        @apply overflow-x-hidden;
+        background-color: #151413;
+        color: #bab1a8;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      @layer base {
+        * {
+          /* @apply border-border; */
+        }
+        body {
+          /* @apply bg-background text-foreground; */
+        }
+
+        ul,
+        ol {
+          list-style: revert;
+        }
+        /* NEW CODE */
+        /* width */
+        ::-webkit-scrollbar {
+          @apply w-2 rounded-lg;
+        }
+
+        /* Track */
+        ::-webkit-scrollbar-track {
+          @apply bg-zinc-700 rounded-lg;
+        }
+
+        /* Handle */
+        ::-webkit-scrollbar-thumb {
+          @apply bg-zinc-500 rounded-xl;
+        }
+
+        /* Handle on hover */
+        ::-webkit-scrollbar-thumb:hover {
+          @apply bg-zinc-400 rounded-lg;
+        }
+      }
+    </style>
   </head>
   <body class="md:noise after:opacity-70">
     <slot />

frontend/src/pages/index.astro

@@ -1,7 +1,6 @@
 ---
 import Base from "@/layouts/Base.astro";
 import StatefulDemo from "@/components/StatefulDemo.tsx";
-import "@/globals.scss";
 ---
 
 <Base>
@@ -13,7 +12,7 @@ import "@/globals.scss";
           Math.random() * 100 + "px " + Math.random() * 100 + "px",
       }}
     >
-      <div class="px-3 pt-4 pb-5 font-sans prose prose-zinc prose-invert">
+      <div class="px-3 pt-4 pb-5 font-inter prose prose-zinc prose-invert">
         <h1
           class="text-5xl font-bebas bold text-center mb-3 text-zinc-300"
           style={{ textShadow: "0 0 10px rgba(0,0,0,0.7)" }}