chore: css cleanup

src/assets/styles/components/addon-links.css

@@ -3,12 +3,14 @@
   gap: var(--sizing-sm);
   grid-template-columns: repeat(1, 1fr);
 
-  & div > h2 {
-    margin-top: 0;
-  }
+  & div {
+    & > h2 {
+      margin-top: 0;
+    }
 
-  &  div:last-of-type h2 {
-    margin-top: var(--sizing-base);
+    &:last-of-type h2 {
+      margin-top: var(--sizing-base);
+    }
   }
 
   & .link-list {

src/assets/styles/components/banners.css

@@ -1,3 +1,7 @@
+.footnotes + .banner {
+  margin-top: 0;
+}
+
 .banner {
   margin: var(--sizing-base) 0;
   padding: var(--sizing-md);
@@ -22,35 +26,36 @@
     }
   }
 
-  &.old-post {
-    border-color: var(--gray-light);
-  }
-
-  &.warning,
   &.error,
-  &.npm,
   &.github,
-  &.rss {
-    &.warning {
-      --border-color: var(--warning);
-    }
-
+  &.npm,
+  &.old-post,
+  &.rss,
+  &.warning {
     &.error {
       --border-color: var(--error);
     }
 
-    &.npm {
-      --border-color: var(--brand-npm);
-    }
-
     &.github {
       --border-color: var(--brand-github);
     }
 
+    &.npm {
+      --border-color: var(--brand-npm);
+    }
+
+    &.old-post {
+      --border-color: var(--gray-light);
+    }
+
     &.rss {
       --border-color: var(--brand-rss);
     }
 
+    &.warning {
+      --border-color: var(--warning);
+    }
+
     border-color: var(--border-color);
 
     & p a:hover,

src/assets/styles/components/buttons.css

@@ -1,8 +1,23 @@
+.section-header-buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--sizing-sm);
+
+  & > button {
+    margin-bottom: 0;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}
+
 button {
   appearance: none;
   border: none;
 
   &:not(.theme-toggle) {
+    border: 2px solid var(--accent-color);
     border-radius: var(--rounded-full);
     padding: var(--sizing-sm) var(--sizing-lg);
     margin: 0 var(--sizing-xs) var(--sizing-md) 0;
@@ -17,7 +32,6 @@ button {
     color: var(--color-lightest);
     background-color: var(--accent-color);
     appearance: none;
-    border: 2px solid var(--accent-color);
     transition-property: border;
   }
 

src/assets/styles/components/text-toggle.css

@@ -7,19 +7,19 @@
   & p:first-of-type {
     margin-top: 0;
   }
+
+  &::after {
+    position: absolute;
+    z-index: 1;
+    content: '';
+    top: 0;
+    left: 0;
+    box-shadow: inset 0 -120px 50px -60px var(--background-color);
+    width: 100%;
+    height: 100%;
+  }
 }
 
-[data-toggle-content].text-toggle-hidden::after {
-  position: absolute;
-  z-index: 1;
-  content: '';
-  top: 0;
-  left: 0;
-  box-shadow: inset 0 -120px 50px -60px var(--background-color);
-  width: 100%;
-  height: 100%;
-}
-
-[data-toggle-button] {
-  margin-bottom: var(--sizing-base) !important;
+button[data-toggle-button] {
+  margin-bottom: var(--sizing-base);
 }

src/assets/styles/components/theme-toggle.css

@@ -25,8 +25,8 @@ theme-toggle {
     transform: rotate(8deg);
   }
 
-  & > .light svg { stroke: var(--sun) !important; }
-  & > .dark svg { stroke: var(--moon) !important; }
+  & > .light svg { stroke: var(--sun); }
+  & > .dark svg { stroke: var(--moon); }
 
   & > .light ,
   & > .dark {

src/assets/styles/components/youtube-video.css

@@ -1,3 +0,0 @@
-youtube-video {
-  margin-bottom: var(--sizing-base);
-}