💄 v1.4: New appearance and more features

astro.config.mjs

@@ -1,4 +1,14 @@
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern"
+                }
+            }
+        }
+    }
+});

package.json

@@ -13,5 +13,8 @@
     "@astrojs/check": "^0.9.1",
     "astro": "^4.13.1",
     "typescript": "^5.4.5"
+  },
+  "devDependencies": {
+    "sass": "^1.79.2"
   }
 }

src/components/Footer.astro

@@ -1,33 +1,44 @@
 ---
 import { useTranslations } from "../i18n/utils";
-import "../styles/_colors.css";
 
-const tr = useTranslations(Astro.params.lang as never);
+const lang = (Astro.params.lang || "en") as never;
+const tr = useTranslations(lang);
 ---
 
 <footer class="footer">
-    { tr("footer.txt1") } &hearts; { tr("footer.txt2") }
+    { tr("footer.txt1") } <i class="nf nf-fa-heart"></i> { tr("footer.txt2") }
      · <a href="https://github.com/retrozinndev/retrozinn.dev">{ tr("footer.txt3") }</a>
 </footer>
 
-<style>
+<style lang="scss">
+
+    @import "../styles/_colors.scss";
+
     .footer {
-        color: lightgray;
         overflow: hidden;
         display: block;
         width: 100%;
         font-family: Free Sans, Open Sans, Segoe UI Alternative, Segoe UI, sans-serif;
         font-size: 13px;
         text-align: center;
         padding-block: 10px;
-    }
+    } 
 
-    a {
+    body.dark a,
+    body.dark .footer {
         color: lightgray;
-        transition: 250ms;
     }
 
-    a:hover {
-        color: var(--new-accent-color);
+    body.light a,
+    body.light .footer {
+        color: gray;
+    }
+
+    body.dark a:hover {
+        color: $accent-color;
+    }
+
+    body.light a:hover {
+        color: $accent-color-dark;
     }
 </style>

src/components/LinkButton.astro

@@ -1,6 +1,4 @@
 ---
-import "../styles/_colors.css";
-
 interface Props {
     href: string;
 }
@@ -12,7 +10,9 @@ const { href } = Astro.props;
     <slot />
 </a>
 
-<style>
+<style lang="scss">
+
+    @import "../styles/_colors.scss";
 
     a {
         display: inline-flex;
@@ -21,19 +21,24 @@ const { href } = Astro.props;
         font-weight: 600;
         width: fit-content;
         box-sizing: content-box;
-        color: white;
+        color: inherit;
 
-        border: solid 0.032em var(--new-accent-color);
-        padding: 2px 8px;
+        border: solid 0.032em $accent-color;
+        padding: 5px 8px;
         border-radius: 12px;
         text-decoration: none;
         -webkit-tap-highlight-color: transparent;
         transition: 150ms linear;
     }
 
-    a:hover {
-        color: var(--new-accent-color);
-        background-color: var(--new-darker-background-color);
+    body.dark a:hover {
+        color: white;
+        background-color: $accent-color-dark;
+    }
+
+    body.light a:hover {
+        color: black;
+        background-color: $accent-color;
     }
 </style>