Move theme changer into hamburger menu; fix name-speak button size on mobile

Author: Bikram Gole

about.html

@@ -63,13 +63,7 @@
       <a href="index.html" data-nav="home">Home</a>
       <a href="about.html" data-nav="about">About</a>
       <a href="contact.html" data-nav="contact">Contact</a>
-    </nav>
-    <button class="hamburger" type="button" aria-label="Menu" aria-expanded="false">
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-    </button>
-    <div class="header-tools">
+      <div class="header-tools">
       <label for="header-theme-select" class="theme-top-label">Theme</label>
       <select id="header-theme-select" class="theme-top-select" aria-label="Theme switcher">
         <option value="mint">Mint Matrix</option>
@@ -89,7 +83,13 @@
         <option value="blackflag">Black Flag Uprising</option>
       </select>
       <button id="theme-cycle-btn" class="theme-cycle-btn" type="button" aria-label="Cycle theme">↻</button>
-    </div>
+      </div>
+    </nav>
+    <button class="hamburger" type="button" aria-label="Menu" aria-expanded="false">
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+    </button>
   </header>
   <div class="scroll-progress" aria-hidden="true">
     <span class="scroll-progress-bar"></span>

contact.html

@@ -63,13 +63,7 @@
       <a href="index.html" data-nav="home">Home</a>
       <a href="about.html" data-nav="about">About</a>
       <a href="contact.html" data-nav="contact">Contact</a>
-    </nav>
-    <button class="hamburger" type="button" aria-label="Menu" aria-expanded="false">
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-    </button>
-    <div class="header-tools">
+      <div class="header-tools">
       <label for="header-theme-select" class="theme-top-label">Theme</label>
       <select id="header-theme-select" class="theme-top-select" aria-label="Theme switcher">
         <option value="mint">Mint Matrix</option>
@@ -89,7 +83,13 @@
         <option value="blackflag">Black Flag Uprising</option>
       </select>
       <button id="theme-cycle-btn" class="theme-cycle-btn" type="button" aria-label="Cycle theme">↻</button>
-    </div>
+      </div>
+    </nav>
+    <button class="hamburger" type="button" aria-label="Menu" aria-expanded="false">
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+    </button>
   </header>
   <div class="scroll-progress" aria-hidden="true">
     <span class="scroll-progress-bar"></span>

index.html

@@ -81,13 +81,7 @@
       <a href="index.html" data-nav="home">Home</a>
       <a href="about.html" data-nav="about">About</a>
       <a href="contact.html" data-nav="contact">Contact</a>
-    </nav>
-    <button class="hamburger" type="button" aria-label="Menu" aria-expanded="false">
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-    </button>
-    <div class="header-tools">
+      <div class="header-tools">
       <label for="header-theme-select" class="theme-top-label">Theme</label>
       <select id="header-theme-select" class="theme-top-select" aria-label="Theme switcher">
         <option value="mint">Mint Matrix</option>
@@ -107,7 +101,13 @@
         <option value="blackflag">Black Flag Uprising</option>
       </select>
       <button id="theme-cycle-btn" class="theme-cycle-btn" type="button" aria-label="Cycle theme">↻</button>
-    </div>
+      </div>
+    </nav>
+    <button class="hamburger" type="button" aria-label="Menu" aria-expanded="false">
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+    </button>
   </header>
   <div class="scroll-progress" aria-hidden="true">
     <span class="scroll-progress-bar"></span>

styles.css

@@ -5482,6 +5482,16 @@ body[data-page="home"] .github-layout {
   }
 }
 
+/* Nav contains header-tools on desktop */
+.site-header nav {
+  flex: 1;
+  align-items: center;
+}
+
+.site-header nav .header-tools {
+  margin-left: auto;
+}
+
 /* Hamburger Menu */
 .hamburger {
   display: none;
@@ -5561,6 +5571,19 @@ body[data-page="home"] .github-layout {
     padding: 0.6rem 1.2rem;
   }
 
+  .site-header nav .header-tools {
+    margin-left: 0;
+    flex-direction: row;
+    gap: 0.5rem;
+    width: auto;
+    justify-content: center;
+    margin-top: 0.8rem;
+  }
+
+  .site-header nav .header-tools .theme-top-label {
+    display: inline;
+  }
+
   .hero-name-row {
     flex-wrap: nowrap;
   }
@@ -5586,9 +5609,8 @@ body[data-page="home"] .github-layout {
   }
 
   .name-speak {
-    width: 44px !important;
-    height: 44px !important;
-    right: -0.5rem !important;
+    width: 36px;
+    height: 36px;
   }
 
   #command-input,