major refactoring of preact components 🧩 (#689)

assets/sass/components/_content.scss

@@ -32,7 +32,7 @@ div#content {
     letter-spacing: 0.001em;
     line-height: 1.5;
 
-    &:hover > a.anchorjs-link {
+    &:hover > .anchorjs-link {
       opacity: 1; // '#' link appears on hover over entire sub-heading line
     }
   }
@@ -50,13 +50,14 @@ div#content {
   }
 
   // AnchorJS styles
-  a.anchorjs-link {
-    margin-left: 0.25em;
-    padding: 0 0.5em 0 0.25em;
+  .anchorjs-link {
+    margin: 0 0.25em;
+    padding: 0 0.25em;
     background: none;
-    opacity: 0;
     font-weight: 300;
     line-height: 1;
+    opacity: 0; // overridden by JS on mobile devices
+    user-select: none;
 
     &::before {
       content: "\0023"; // pound sign

assets/sass/components/_global.scss

@@ -24,15 +24,6 @@ body {
       background-color: "background-outer",
     )
   );
-
-  // set themed lightbulb icons manually
-  &.light button.dark-mode-toggle {
-    background-image: url("data:image/svg+xml;charset=utf-8,#{themes.$icon-bulb-on}");
-  }
-
-  &.dark button.dark-mode-toggle {
-    background-image: url("data:image/svg+xml;charset=utf-8,#{themes.$icon-bulb-off}");
-  }
 }
 
 code,
@@ -141,8 +132,7 @@ main {
 
 // make SVG twemojis relative to surrounding text
 // https://github.com/twitter/twemoji#inline-styles
-img.emoji,
-svg.emoji {
+.emoji {
   height: 1.2em;
   width: 1.2em;
   margin: 0 0.05em;
@@ -160,16 +150,12 @@ a .emoji {
 }
 
 // pulsating loading spinner
-.loading {
-  display: inline-block;
-
-  > div {
-    @include themes.themed(
-      (
-        background-color: "medium-light",
-      )
-    );
-  }
+div.loading > div {
+  @include themes.themed(
+    (
+      background-color: "medium-light",
+    )
+  );
 }
 
 // Responsive

assets/sass/components/_header.scss

@@ -69,7 +69,7 @@ header {
     ul {
       list-style: none;
       display: flex;
-      align-items: baseline;
+      align-items: center;
       margin: 0;
       padding: 0;
 
@@ -78,6 +78,7 @@ header {
 
         a {
           display: inline-flex;
+          align-items: center;
 
           @include themes.themed(
             (
@@ -94,11 +95,8 @@ header {
           }
 
           span {
-            align-self: center;
-
             &.header-menu-icon {
               font-size: 1.3em;
-              vertical-align: -0.085em;
               user-select: none;
             }
 
@@ -112,22 +110,16 @@ header {
         }
 
         // Dark mode toggle
-        &#header-lightbulb {
-          align-self: center;
+        &.theme-toggle button {
+          border: 0;
+          padding: 0;
+          background: none;
+          margin: 0.3em -0.3em 0 1.4em;
+          cursor: pointer;
 
-          button {
-            // native button reset
-            border: 0;
-            padding: 0;
+          svg {
             width: 1.56em; // 24.33px, don't ask
             height: 1.56em;
-            margin: -0.075em -0.3em 0 1.4em; // weirdness w/ svg ratio
-            cursor: pointer;
-
-            // prepare for lightbulb symbol depending on active theme (set in components/_global)
-            background-color: transparent;
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
           }
         }
 
@@ -183,11 +175,14 @@ header {
           }
 
           // Dark mode toggle
-          &#header-lightbulb button.dark-mode-toggle {
-            width: 1.08em; // ~27px, don't ask
-            height: 1.08em;
+          &.theme-toggle button {
             margin-left: 1em;
             margin-right: -0.2em; // weirdness w/ svg ratio
+
+            svg {
+              width: 1.08em; // ~27px, don't ask
+              height: 1.08em;
+            }
           }
         }
       }