SASS fix and refactor

- Fix `@import` deprecation warning.
- Moved `styles/main.css` to `styles.css`.

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"

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;
         }

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";

src/styles/main.scss

@@ -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";