Use sass to fix style bug

@apply wasn't working for glass-tube in ::after

next.config.mjs

@@ -12,7 +12,7 @@ const nextConfig = {
    *
    * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
    */
-  basePath: "/nextjs-github-pages",
+  basePath: "/mazejs",
 
   /**
    * Disable server-based image optimization. Next.js does not support

package.json

@@ -36,10 +36,11 @@
     "eslint-plugin-react": "^7.34.3",
     "globals": "^15.8.0",
     "jsdom": "^24.1.0",
-    "postcss": "^8",
+    "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
+    "sass": "^1.77.7",
     "tailwindcss": "^3.4.1",
     "tailwindcss-react-aria-components": "^1.1.3",
     "typescript": "^5.4.5",

src/app/globals.css → src/app/globals.scss

@@ -23,22 +23,26 @@
   }
 }
 
+@mixin glass-tube {
+  @apply shadow shadow-slate-400;
+  border: 1px solid hsl(215deg 25% 26.7% / 0.5);
+  border-radius: 9999px;
+  background-image: linear-gradient(
+    to bottom,
+    hsl(var(--color-slate-50) / 0.5),
+    hsl(var(--color-slate-900) / 0.2) 10%,
+    hsl(var(--color-slate-900) / 0.1) 30%,
+    hsl(var(--color-slate-50) / 0.05) 50%,
+    hsl(var(--color-slate-50) / 0.05) 80%,
+    hsl(var(--color-slate-50) / 0.4)
+  );
+  pointer-events: none;
+}
+
 @layer components {
   /* Standalone glass tubes */
   .glass-tube {
-    @apply shadow shadow-slate-400;
-    border: 1px solid hsl(215deg 25% 26.7% / 0.5);
-    border-radius: 9999px;
-    background-image: linear-gradient(
-      to bottom,
-      hsl(var(--color-slate-50) / 0.5),
-      hsl(var(--color-slate-900) / 0.2) 10%,
-      hsl(var(--color-slate-900) / 0.1) 30%,
-      hsl(var(--color-slate-50) / 0.05) 50%,
-      hsl(var(--color-slate-50) / 0.05) 80%,
-      hsl(var(--color-slate-50) / 0.4)
-    );
-    pointer-events: none;
+    @include glass-tube;
   }
 
   /* Glass-tube container (overlayed on top using pseudo-elements) */
@@ -47,7 +51,7 @@
     border-radius: 9999px;
 
     &::after {
-      @apply glass-tube;
+      @include glass-tube;
       position: absolute;
       inset: 0;
       content: "";

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Lato } from "next/font/google";
 import { type ReactElement, type ReactNode } from "react";
-import "./globals.css";
+import "./globals.scss";
 import { twMerge } from "tailwind-merge";
 
 const latoFont = Lato({