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,11 +31,11 @@ const { title, date, slug } = Astro.props;
 
   .blog-header {
     margin: 1rem 0;
-  }
 
-  .blog-header > h2 {
+    & h2 {
       margin: 0;
     }
+  }
 
   .calendar-icon {
     transform: translateY(0.3rem);

src/components/Blog/PostPreview.astro

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

src/components/Card.astro

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

src/components/Footer.astro

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

src/components/Header/Drawer.astro

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

src/components/Header/Header.astro

@@ -26,9 +26,8 @@ import Nav from "./Nav.astro";
     position: fixed;
     z-index: 1;
     border-bottom: var(--border);
-  }
 
-  .container {
+    & .container {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -37,13 +36,14 @@ import Nav from "./Nav.astro";
       margin: auto;
       padding: 0 16px;
       height: 100%;
-  }
 
-  .container > div {
+      & div {
         display: flex;
         gap: 20px;
         align-items: center;
       }
+    }
+  }
 
   a {
     font-size: 1.6rem;

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,12 +25,12 @@ import { navLinks } from "../../data/nav-links";
     font-size: 1.15rem;
     font-weight: 600;
     align-items: center;
-  }
 
-  a {
+    & a {
       color: var(--text);
       padding: 5px 10px;
     }
+  }
 
   @media screen and (max-width: $max-mobile-width) {
     nav {

src/components/ThemeToggle.astro

@@ -14,19 +14,21 @@ 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 {
+    div {
       display: flex;
       align-items: center;
       gap: 4px;
     }
+  }
 
   input {
     position: relative;
@@ -36,13 +38,12 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
     padding: 10px;
     background-color: var(--orange);
     border-radius: 120px;
-  }
 
-  input:checked {
+    &:checked {
       background-color: var(--sky);
     }
 
-  input::after {
+    &:after {
       content: "";
       position: absolute;
       height: 22px;
@@ -51,12 +52,13 @@ import BrushIcon from "../../assets/svg/paintbrush.svg";
       background-color: var(--background);
       left: 1px;
       top: 1px;
-    transition: all 0.1s ease-in-out;
+      transition: $quick-transition;
     }
 
-  input:checked:after {
+    &:checked:after {
       left: 15px;
     }
+  }
 
   @media (max-width: 516px) {
     .toggles {

src/styles/global.scss

@@ -46,11 +46,11 @@ main {
 a {
   color: var(--blue);
   text-decoration: none;
-}
 
-a:hover {
+  &:hover {
     opacity: 0.75;
   }
+}
 
 main p {
   line-height: 1.5;
@@ -112,15 +112,15 @@ kbd {
   aspect-ratio: square;
   height: 24px;
   width: 24px;
-}
 
-.icon-button:active {
+  &:active {
     opacity: 0.3;
   }
 
-.icon-button > svg {
+  & svg {
     color: var(--text);
   }
+}
 
 /* shiki */
 

src/styles/variables.scss

@@ -2,4 +2,10 @@ $max-mobile-width: 768px;
 $max-page-width: 800px;
 $radius: 5px;
 $border-style: 1px solid;
-$transition: all 0.3s ease-in-out;
+
+/* transitions */
+$transition-duration: 0.3s;
+$quick-transition-duration: 0.1s;
+
+$transition: all $transition-duration ease-in-out;
+$quick-transition: all $quick-transition-duration ease-in-out;