fix responsive header

assets/sass/components/_header.scss

@@ -53,7 +53,7 @@ header {
     ul {
       list-style: none;
       display: flex;
-      align-items: center;
+      align-items: baseline;
       margin: 0;
       padding: 0;
 
@@ -90,16 +90,11 @@ header {
           }
         }
 
-        // no margin on the first child to make more room on narrow windows (before responsiveness kicks in).
-        // last child is the dark mode toggle -- margin is set directly on it in case it's hidden (if JS is disabled).
-        &:first-child,
-        &:last-child {
-          margin-left: 0;
-        }
-      }
-
         // Dark mode toggle
-      button.dark-mode-toggle {
+        &#header-lightbulb {
+          align-self: center;
+
+          button {
             // native button reset
             border: 0;
             padding: 0;
@@ -117,6 +112,15 @@ header {
             cursor: pointer;
           }
         }
+
+        // no margin on the first child to make more room on narrow windows (before responsiveness kicks in).
+        // last child is the dark mode toggle -- margin is set directly on it in case it's hidden (if JS is disabled).
+        &:first-child,
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
   }
 }
 
@@ -143,7 +147,7 @@ header {
         }
       }
 
-      ul.header-menu {
+      ul {
         font-size: 1.6em;
 
         li {
@@ -164,14 +168,12 @@ header {
               transform: none;
             }
           }
-        }
 
           // Dark mode toggle
-        button.dark-mode-toggle {
+          &#header-lightbulb button.dark-mode-toggle {
             // TODO: figure out need for weird magic numbers here
             height: 1.08em; // ~27px, don't ask
             width: 1.08em;
-          margin-top: 0.15em;
             margin-left: 1em;
             margin-right: -0.2em; // weirdness w/ svg ratio
           }
@@ -179,3 +181,4 @@ header {
       }
     }
   }
+}

layouts/partials/page/header.html

@@ -16,7 +16,7 @@
         </a>
       </li>
       {{- end }}
-      <li>
+      <li id="header-lightbulb">
         <button class="dark-mode-toggle" title="Toggle Dark Mode" aria-label="Toggle Dark Mode" style="display: none;"></button>
       </li>
     </ul>