install/setup sass

src/components/Avatar.astro

@@ -18,7 +18,7 @@ const { size } = Astro.props;
   height={`${size}`}
 />
 
-<style>
+<style lang="scss">
   .portrait {
     display: block;
     margin: auto;

src/components/Blog/BlogHeader.astro

@@ -1,7 +1,7 @@
 ---
 import { add, format } from "date-fns";
 
-import CalendarIcon from "../assets/svg/calendar.svg";
+import CalendarIcon from "@assets/svg/calendar.svg";
 
 interface Props {
   title: string;
@@ -20,7 +20,7 @@ const { title, date, slug } = Astro.props;
   </div>
 </div>
 
-<style>
+<style lang="scss">
   a {
     font-size: 1.3rem;
   }

src/components/Blog/BlogSidebar.astro

@@ -0,0 +1,25 @@
+---
+
+---
+
+<div class="sidebar">
+  <section>
+    <h2>Tags</h2>
+    <ul>
+      <li>Hello</li>
+      <li>Hello</li>
+      <li>Hello</li>
+      <li>Hello</li>
+    </ul>
+  </section>
+</div>
+
+<style lang="scss">
+  .sidebar {
+    padding: 16px;
+    border: var(--border);
+    min-width: 140px;
+    margin-left: 14px;
+    height: fit-content;
+  }
+</style>

src/components/Blog/PostPreview.astro

@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
-import BlogHeader from "@components/BlogHeader.astro";
-import Tags from "@components/Tags.astro";
+import BlogHeader from "./BlogHeader.astro";
+import Tags from "./Tags.astro";
 
 interface Props {
   post: CollectionEntry<"blog">;
@@ -15,7 +15,7 @@ const { post } = Astro.props;
   <Tags tags={post.data.tags} />
 </article>
 
-<style>
+<style lang="scss">
   article {
     padding-bottom: 20px;
   }

src/components/Card.astro

@@ -32,10 +32,12 @@ const { title, image, links } = Astro.props;
   </div>
 </div>
 
-<style>
+<style lang="scss">
+  @use "../styles/variables.scss" as *;
+
   .card {
     border: var(--border);
-    border-radius: var(--radius);
+    border-radius: $radius;
     overflow: hidden;
   }
 

src/components/Footer.astro

@@ -29,7 +29,7 @@ const year = new Date().getFullYear();
   </p>
 </footer>
 
-<style>
+<style lang="scss">
   footer {
     margin: 2rem 0;
     text-align: center;

src/components/Header/Drawer.astro

@@ -38,7 +38,9 @@ import { navLinks } from "../../data/nav-links";
   </div>
 </div>
 
-<style>
+<style lang="scss">
+  @use "../../styles/variables.scss" as *;
+
   .drawer-container {
     display: none;
   }
@@ -51,7 +53,7 @@ import { navLinks } from "../../data/nav-links";
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.6);
     z-index: 2;
-    transition: var(--transition);
+    transition: $transition;
   }
 
   .hidden-overlay {
@@ -66,7 +68,7 @@ import { navLinks } from "../../data/nav-links";
     width: 75vw;
     height: 100vh;
     z-index: 3;
-    transition: var(--transition);
+    transition: $transition;
   }
 
   .drawer > div {
@@ -87,7 +89,7 @@ import { navLinks } from "../../data/nav-links";
     transform: translateX(75vw);
   }
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: $max-mobile-width) {
     .drawer-container {
       display: block;
     }

src/components/Header/Header.astro

@@ -14,7 +14,9 @@ import Nav from "./Nav.astro";
   </div>
 </header>
 
-<style>
+<style lang="scss">
+  @use "../../styles/variables.scss" as *;
+
   header {
     margin-bottom: 20px;
     height: 70px;
@@ -31,7 +33,7 @@ import Nav from "./Nav.astro";
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    max-width: var(--max-page-width);
+    max-width: $max-page-width;
     margin: auto;
     padding: 0 16px;
     height: 100%;

src/components/Header/Nav.astro

@@ -14,7 +14,9 @@ import { navLinks } from "../../data/nav-links";
   </ul>
 </nav>
 
-<style>
+<style lang="scss">
+  @use "../../styles/variables.scss" as *;
+
   nav > ul {
     display: flex;
     flex-direction: row;
@@ -30,7 +32,7 @@ import { navLinks } from "../../data/nav-links";
     padding: 5px 10px;
   }
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: $max-mobile-width) {
     nav {
       display: none;
     }

src/components/LatestPost.astro

@@ -37,12 +37,14 @@
   </template>
 </div>
 
-<style>
+<style lang="scss">
+  @use "../styles/variables.scss" as *;
+
   .mastodon-post {
     margin: 2rem auto;
     padding: 1rem;
     max-width: 600px;
-    border-radius: var(--radius);
+    border-radius: $radius;
     border: var(--border);
   }
 

src/components/ThemeToggle.astro

@@ -13,7 +13,7 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
   </div>
 </div>
 
-<style>
+<style lang="scss">
   .toggles {
     padding: 1rem;
     display: flex;