clean up styles

src/components/Avatar.astro

@@ -24,7 +24,4 @@ const { size } = Astro.props;
     margin: auto;
     border-radius: 200px;
   }
-  a > svg {
-    transform: translateY(0.18rem);
-  }
 </style>

src/components/Blog/BlogHeader.astro

@@ -31,10 +31,10 @@ const { title, date, slug } = Astro.props;
 
   .blog-header {
     margin: 1rem 0;
-  }
 
-  .blog-header > h2 {
-    margin: 0;
+    & h2 {
+      margin: 0;
+    }
   }
 
   .calendar-icon {

src/components/Blog/PostPreview.astro

@@ -18,9 +18,9 @@ const { post } = Astro.props;
 <style lang="scss">
   article {
     padding-bottom: 20px;
-  }
 
-  article:not(:first-child) {
-    border-top: var(--border);
+    &:not(:first-child) {
+      border-top: var(--border);
+    }
   }
 </style>

src/components/Card.astro

@@ -39,14 +39,14 @@ const { title, image, links } = Astro.props;
     border: var(--border);
     border-radius: $radius;
     overflow: hidden;
-  }
 
-  .card > div {
-    padding: 1rem;
-  }
+    & div {
+      padding: 1rem;
+    }
 
-  h2 {
-    margin: 0;
+    & h2 {
+      margin: 0;
+    }
   }
 
   img {

src/components/Footer.astro

@@ -45,19 +45,19 @@ const year = new Date().getFullYear();
     display: flex;
     gap: 24px;
     justify-content: center;
-  }
 
-  .socials a {
-    color: var(--text);
-  }
+    & a {
+      color: var(--text);
 
-  .rss-icon {
-    color: var(--orange);
-  }
+      & .rss-icon {
+        color: var(--orange);
+      }
 
-  .mastodon-icon {
-    color: var(--blue);
-    transform: translateY(4px);
+      & .mastodon-icon {
+        color: var(--blue);
+        transform: translateY(4px);
+      }
+    }
   }
 
   @media (max-width: 516px) {

src/components/Header/Drawer.astro

@@ -69,11 +69,11 @@ import { navLinks } from "../../data/nav-links";
     height: 100vh;
     z-index: 3;
     transition: $transition;
-  }
 
-  .drawer > div {
-    padding: 8px 6px 4px;
-    border-bottom: var(--border);
+    & div {
+      padding: 8px 6px 4px;
+      border-bottom: var(--border);
+    }
   }
 
   nav {

src/components/Header/Header.astro

@@ -26,23 +26,23 @@ import Nav from "./Nav.astro";
     position: fixed;
     z-index: 1;
     border-bottom: var(--border);
-  }
 
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    max-width: $max-page-width;
-    margin: auto;
-    padding: 0 16px;
-    height: 100%;
-  }
+    & .container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      max-width: $max-page-width;
+      margin: auto;
+      padding: 0 16px;
+      height: 100%;
 
-  .container > div {
-    display: flex;
-    gap: 20px;
-    align-items: center;
+      & div {
+        display: flex;
+        gap: 20px;
+        align-items: center;
+      }
+    }
   }
 
   a {

src/components/Header/Nav.astro

@@ -17,7 +17,7 @@ import { navLinks } from "../../data/nav-links";
 <style lang="scss">
   @use "../../styles/variables.scss" as *;
 
-  nav > ul {
+  ul {
     display: flex;
     flex-direction: row;
     list-style: none;
@@ -25,11 +25,11 @@ import { navLinks } from "../../data/nav-links";
     font-size: 1.15rem;
     font-weight: 600;
     align-items: center;
-  }
 
-  a {
-    color: var(--text);
-    padding: 5px 10px;
+    & a {
+      color: var(--text);
+      padding: 5px 10px;
+    }
   }
 
   @media screen and (max-width: $max-mobile-width) {

src/components/ThemeToggle.astro

@@ -14,18 +14,20 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
 </div>
 
 <style lang="scss">
+  @use "../styles/variables.scss" as *;
+
   .toggles {
     padding: 1rem;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 12px;
-  }
 
-  .toggles > div {
-    display: flex;
-    align-items: center;
-    gap: 4px;
+    div {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
   }
 
   input {
@@ -36,26 +38,26 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
     padding: 10px;
     background-color: var(--orange);
     border-radius: 120px;
-  }
 
-  input:checked {
-    background-color: var(--sky);
-  }
+    &:checked {
+      background-color: var(--sky);
+    }
 
-  input::after {
-    content: "";
-    position: absolute;
-    height: 22px;
-    width: 22px;
-    border-radius: 100%;
-    background-color: var(--background);
-    left: 1px;
-    top: 1px;
-    transition: all 0.1s ease-in-out;
-  }
+    &:after {
+      content: "";
+      position: absolute;
+      height: 22px;
+      width: 22px;
+      border-radius: 100%;
+      background-color: var(--background);
+      left: 1px;
+      top: 1px;
+      transition: $quick-transition;
+    }
 
-  input:checked:after {
-    left: 15px;
+    &:checked:after {
+      left: 15px;
+    }
   }
 
   @media (max-width: 516px) {