chore: styles

src/assets/styles/base/index.css

@@ -36,7 +36,7 @@ body {
 
 a:focus,
 a:focus-within {
-  outline: 2px dashed var(--accent-color);
+  outline: var(--outline-default);
   text-decoration: none;
 }
 
@@ -91,7 +91,6 @@ code {
   &.brand-mastodon > svg { stroke: var(--brand-mastodon); }
   &.article > svg { stroke: var(--posts); }
   &.books > svg { stroke: var(--books); }
-  &.brain > svg { stroke: var(--brand-listenbrainz); }
   &.clock-hour-3 > svg { stroke: var(--now); }
   &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); }
   &.device-tv > svg { stroke: var(--tv); }
@@ -106,13 +105,12 @@ code {
   &.search > svg { stroke: var(--search); }
 }
 
-:is(body, html, nav .search) svg {
-  stroke: var(--text-color);
+:is(h1, h2, h3, h4, h5, h6) svg {
+  stroke-width: var(--stroke-width-bold);
 }
 
-:is(h1, h2, h3, h4, h5, h6) svg {
-  margin-right: var(--sizing-xs);
-  stroke-width: var(--stroke-width-bold);
+:is(h1, h2, h3, h4, h5, h6):has(svg) {
+  gap: var(--sizing-xs)
 }
 
 strong,
@@ -301,7 +299,7 @@ td {
   }
 }
 
-td::first-of-type,
+td:first-of-type,
 :where(thead, tfoot) th:nth-child(2) {
 	border-inline-start: none;
 }
@@ -325,10 +323,6 @@ th {
     font-weight: var(--font-weight-extrabold);
     margin: 0;
     padding: 0;
-
-    & a {
-      text-decoration: none;
-    }
   }
 }
 
@@ -356,7 +350,7 @@ a svg:focus {
   stroke: var(--accent-color-hover);
 }
 
-a.link-icon {
+a:has(svg) {
   display: inline-flex;
   align-items: center;
   gap: var(--sizing-xs);
@@ -441,8 +435,9 @@ article {
 }
 
 footer {
-  & .explainer {
+  & p:first-of-type {
     margin: var(--sizing-3xl) 0 var(--sizing-lg);
+    font-size: var(--font-size-sm);
   }
 
   & nav {
@@ -554,10 +549,6 @@ li {
   text-align: center !important;
 }
 
-.text-small {
-  font-size: var(--font-size-sm) !important;
-}
-
 .flex-centered {
   display: flex;
   flex-direction: row;

src/assets/styles/components/badge-grid.css

@@ -14,7 +14,7 @@
 
     &:focus img,
     &:focus-within img {
-      outline: var(--outline)
+      outline: var(--outline-default)
     }
   }
 

src/assets/styles/components/banners.css

@@ -1,9 +1,12 @@
-.footnotes + .banner {
-  margin-top: 0;
+* + .banner {
+  margin-top: var(--sizing-base);
+}
+
+.banner:has(+ *) {
+  margin-bottom: var(--sizing-base);
 }
 
 .banner {
-  margin: var(--sizing-base) 0;
   padding: var(--sizing-md);
   border: 1px solid;
 

src/assets/styles/components/buttons.css

@@ -8,7 +8,7 @@ button,
 
   &:not(.theme-toggle) {
     border: 2px solid var(--accent-color);
-    padding: var(--sizing-sm) var(--sizing-lg);
+    padding: var(--sizing-xs) var(--sizing-md);
     cursor: pointer;
     display: inline-flex;
     flex-direction: row;
@@ -36,25 +36,14 @@ button,
   &:not(.theme-toggle, .active):focus,
   &:not(.theme-toggle, .active):focus-within {
     transition-property: none;
-    outline: 2px dashed var(--accent-color);
-    padding: calc(var(--sizing-sm) + 2px) calc(var(--sizing-lg) + 2px);
+    outline: var(--outline-default);
+    padding: calc(var(--sizing-xs) + 2px) calc(var(--sizing-md) + 2px);
     border: 0;
   }
 
   &.theme-toggle:focus,
   &.theme-toggle:focus-within {
-    outline: 2px dashed var(--accent-color);
-  }
-
-  &.small {
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-sm);
-    padding: var(--sizing-xs) var(--sizing-sm);
-
-    &:not(.active):focus,
-    &:not(.active):focus-within {
-      padding: var(--sizing-xs) calc(var(--sizing-sm) + 2px);
-    }
+    outline: var(--outline-default);
   }
 
   &.secondary {

src/assets/styles/components/forms.css

@@ -32,7 +32,7 @@ input:focus-within,
 textarea:focus,
 textarea:focus-within {
   border: 0;
-  outline: 2px dashed var(--accent-color);
+  outline: var(--outline-default);
   padding: calc(var(--sizing-sm) + 1px);
 }
 
@@ -46,7 +46,7 @@ select {
   &:focus,
   &:focus-within {
     border: 0;
-    outline: var(--outline)
+    outline: var(--outline-default)
   }
 }
 

src/assets/styles/components/menu.css

@@ -29,7 +29,7 @@
 
   &:focus,
   &:focus-within {
-    outline: 2px dashed var(--accent-color);
+    outline: var(--outline-default);
   }
 
   & svg {
@@ -132,8 +132,8 @@
 
     &:focus,
     &:focus-within {
-      border-top: 2px dashed var(--accent-color);
-      border-bottom: 2px dashed var(--accent-color);
+      border-top: var(--outline-default);
+      border-bottom: var(--outline-default);
     }
   }
 

src/assets/styles/components/modal.css

@@ -25,7 +25,7 @@
 
       &:focus svg,
       &:focus-within svg {
-        outline: var(--outline);
+        outline: var(--outline-default);
       }
 
       & svg {
@@ -34,7 +34,7 @@
         transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
 
         &:focus {
-          outline: var(--outline);
+          outline: var(--outline-default);
         }
 
         &:hover,
@@ -76,7 +76,7 @@
 
   &:focus svg,
   &:focus-within svg {
-    outline: var(--outline);
+    outline: var(--outline-default);
   }
 
   & svg {
@@ -86,7 +86,7 @@
     transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
 
     &:focus {
-      outline: var(--outline);
+      outline: var(--outline-default);
     }
 
     &:hover,

src/assets/styles/components/music-chart.css

@@ -65,7 +65,7 @@
 
       &:focus,
       &:focus-within {
-        outline: var(--outline);
+        outline: var(--outline-default);
       }
     }
 

src/assets/styles/components/tab-buttons.css

@@ -30,7 +30,7 @@ input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {
 #tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
 #tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
   transition-property: none;
-  outline: 2px dashed var(--accent-color);
+  outline: var(--outline-default);
   border: 0;
 }
 

src/assets/styles/defaults/vars.css

@@ -70,7 +70,7 @@
   --webrings: #da70d6;
 
   /* outline */
-  --outline: 2px dashed var(--accent-color);
+  --outline-default: 2px dashed var(--accent-color);
 
   /* borders */
   --border-default: 1px solid var(--accent-color);

src/assets/styles/feed.xsl

@@ -76,6 +76,9 @@
             --font-weight-bold: 600;
             --font-weight-extrabold: 800;
 
+            /* outline */
+            --outline-default: var(--outline-default);
+
             /* borders */
             --border-default: 1px solid var(--accent-color);
           }
@@ -184,7 +187,7 @@
 
           a:focus,
           a:focus-within {
-            outline: 2px dashed var(--accent-color);
+            outline: var(--outline-default);
             text-decoration: none;
           }
 

src/assets/styles/pages/blogroll.css

@@ -9,7 +9,7 @@
 
     &:focus svg,
     &:focus-within svg {
-      outline: var(--outline)
+      outline: var(--outline-default)
     }
   }
 }

src/assets/styles/pages/contact.css

@@ -18,10 +18,6 @@
   justify-content: center;
   align-items: center;
   min-height: 60vh;
-
-  & h2 {
-    margin: 0 0 var(--sizing-base);
-  }
 }
 
 @media screen and (min-width: 768px) {

src/assets/styles/pages/music.css

@@ -3,6 +3,10 @@
   border-bottom: 0;
 }
 
+.genre-focus [data-toggle-content] p:last-of-type {
+  font-size: var(--font-size-sm);
+}
+
 .artist-focus {
   margin-top: var(--sizing-base);
 
@@ -72,14 +76,22 @@
         & .brain {
           outline: 0;
 
+          & > svg {
+            stroke: var(--brand-listenbrainz);
+          }
+
           &:focus svg,
           &:focus-within svg {
-            outline: var(--outline)
+            outline: var(--outline-default)
           }
         }
       }
     }
   }
+
+  & table + p {
+    font-size: var(--font-size-sm);
+  }
 }
 
 .concert-list {

src/assets/styles/pages/post.css

@@ -1,6 +1,4 @@
 .footnotes {
-  padding-bottom: var(--sizing-base);
-
   & .footnotes-list {
     margin-bottom: 0;
     padding-left: 0;