From e0f959e6bf58e3606854776f6ee7d2697c4615ba Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Wed, 6 Nov 2024 19:06:56 -0500
Subject: [PATCH] SASS fix and refactor

- Fix `@import` deprecation warning.
- Moved `styles/main.css` to `styles.css`.
---
 src/_includes/layouts/base.tsx              |  2 +-
 src/_includes/styles/components/navbar.scss |  4 +++-
 src/styles.scss                             | 15 +++++++++++++++
 src/styles/main.scss                        | 16 ----------------
 4 files changed, 19 insertions(+), 18 deletions(-)
 create mode 100644 src/styles.scss
 delete mode 100644 src/styles/main.scss

diff --git a/src/_includes/layouts/base.tsx b/src/_includes/layouts/base.tsx
index a2dca1b..1a25e37 100644
--- a/src/_includes/layouts/base.tsx
+++ b/src/_includes/layouts/base.tsx
@@ -24,7 +24,7 @@ export default function (
           metas.map((m, index) => (
             <meta key={index} name={m.name} content={m.content} />
           ))}
-        <link rel="stylesheet" href="/styles/main.css" />
+        <link rel="stylesheet" href="/styles.css" />
         <link
           rel="icon"
           type="image/png"
diff --git a/src/_includes/styles/components/navbar.scss b/src/_includes/styles/components/navbar.scss
index a889400..efcbd25 100644
--- a/src/_includes/styles/components/navbar.scss
+++ b/src/_includes/styles/components/navbar.scss
@@ -1,3 +1,5 @@
+@use "../variables";
+
 .navbar {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -19,7 +21,7 @@ .navbar {
       a {
         text-decoration: none;
       }
-      @media (min-width: $bp-sm) {
+      @media (min-width: variables.$bp-sm) {
         &:first-child {
           margin-right: auto;
         }
diff --git a/src/styles.scss b/src/styles.scss
new file mode 100644
index 0000000..38d7a34
--- /dev/null
+++ b/src/styles.scss
@@ -0,0 +1,15 @@
+// The foundation
+@use "styles/fonts";
+@use "styles/normalize";
+@use "styles/color-palette";
+@use "styles/base";
+
+// Pages
+@use "styles/pages/resume";
+@use "styles/pages/blog";
+
+// Components
+@use "styles/components/navbar";
+@use "styles/components/header";
+@use "styles/components/separator";
+@use "styles/components/footer";
diff --git a/src/styles/main.scss b/src/styles/main.scss
deleted file mode 100644
index 2b19171..0000000
--- a/src/styles/main.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// The foundation
-@import "styles/fonts";
-@import "styles/normalize";
-@import "styles/variables";
-@import "styles/color-palette";
-@import "styles/base";
-
-// Pages
-@import "styles/pages/resume";
-@import "styles/pages/blog";
-
-// Components
-@import "styles/components/navbar";
-@import "styles/components/header";
-@import "styles/components/separator";
-@import "styles/components/footer";