Add mobile dropdown nav to image collection pages

Desktop: two nav buttons side by side (unchanged).
Mobile: collapses to a ☰ Menu toggle, dropdown reveals both links.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Images/exopraxist.html

@@ -87,6 +87,51 @@
             background: var(--accent-glow);
             box-shadow: 0 0 10px var(--accent-glow);
         }
+        .nav-menu { position: relative; }
+
+        .nav-menu-toggle {
+            display: none;
+            font-family: 'Share Tech Mono', monospace;
+            background: none;
+            border: 1px solid var(--text-muted);
+            color: var(--text-muted);
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+            font-size: 1rem;
+            letter-spacing: 0.05em;
+            transition: var(--transition);
+        }
+
+        .nav-menu-toggle:hover {
+            color: var(--accent);
+            border-color: var(--accent);
+            background: var(--accent-glow);
+        }
+
+        .nav-menu-links {
+            display: flex;
+            gap: 1rem;
+        }
+
+        @media (max-width: 600px) {
+            .nav-menu-toggle { display: block; }
+            .nav-menu-links {
+                display: none;
+                flex-direction: column;
+                position: absolute;
+                right: 0;
+                top: calc(100% + 4px);
+                background: var(--bg-deep);
+                border: 1px solid var(--accent);
+                box-shadow: 0 4px 15px var(--accent-glow);
+                padding: 0.5rem;
+                gap: 0.5rem;
+                z-index: 200;
+                min-width: 180px;
+            }
+            .nav-menu-links.open { display: flex; }
+        }
+
 
         main {
             flex: 1;
@@ -220,9 +265,12 @@
             <span class="subtitle">2026–present Collection</span>
             <h1>Exopraxist</h1>
         </div>
-        <div class="nav-actions">
+        <div class="nav-menu">
-            <a href="images.html" class="nav-back">← Back to Hub</a>
+            <button class="nav-menu-toggle" id="nav-toggle" aria-label="Menu">&#9776; Menu</button>
-            <a href="https://files.exopraxist.org/share/97AGC2WQ" class="nav-back" target="_blank">↓ Download Folder</a>
+            <div class="nav-menu-links" id="nav-links">
+                <a href="images.html" class="nav-back">← Back to Hub</a>
+                <a href="https://files.exopraxist.org/share/97AGC2WQ" class="nav-back" target="_blank">↓ Download Folder</a>
+            </div>
         </div>
     </header>
 
@@ -306,6 +354,10 @@
         });
 
         document.addEventListener('DOMContentLoaded', renderGallery);
+
+        document.getElementById('nav-toggle').onclick = function() {
+            document.getElementById('nav-links').classList.toggle('open');
+        };
     </script>
 </body>
 </html>

Images/myster-wizzard.html

@@ -86,6 +86,51 @@
             background: var(--accent-glow);
             box-shadow: 0 0 10px var(--accent-glow);
         }
+        .nav-menu { position: relative; }
+
+        .nav-menu-toggle {
+            display: none;
+            font-family: 'Share Tech Mono', monospace;
+            background: none;
+            border: 1px solid var(--text-muted);
+            color: var(--text-muted);
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+            font-size: 1rem;
+            letter-spacing: 0.05em;
+            transition: var(--transition);
+        }
+
+        .nav-menu-toggle:hover {
+            color: var(--accent);
+            border-color: var(--accent);
+            background: var(--accent-glow);
+        }
+
+        .nav-menu-links {
+            display: flex;
+            gap: 1rem;
+        }
+
+        @media (max-width: 600px) {
+            .nav-menu-toggle { display: block; }
+            .nav-menu-links {
+                display: none;
+                flex-direction: column;
+                position: absolute;
+                right: 0;
+                top: calc(100% + 4px);
+                background: var(--bg-deep);
+                border: 1px solid var(--accent);
+                box-shadow: 0 4px 15px var(--accent-glow);
+                padding: 0.5rem;
+                gap: 0.5rem;
+                z-index: 200;
+                min-width: 180px;
+            }
+            .nav-menu-links.open { display: flex; }
+        }
+
 
         main {
             flex: 1;
@@ -219,9 +264,12 @@
             <span class="subtitle">2022–2025 Collection</span>
             <h1>MysterWizzard</h1>
         </div>
-        <div class="nav-actions">
+        <div class="nav-menu">
-            <a href="images.html" class="nav-back">← Back to Hub</a>
+            <button class="nav-menu-toggle" id="nav-toggle" aria-label="Menu">&#9776; Menu</button>
-            <a href="https://files.exopraxist.org/share/swAa4bTp" class="nav-back" target="_blank">↓ Download Folder</a>
+            <div class="nav-menu-links" id="nav-links">
+                <a href="images.html" class="nav-back">← Back to Hub</a>
+                <a href="https://files.exopraxist.org/share/swAa4bTp" class="nav-back" target="_blank">↓ Download Folder</a>
+            </div>
         </div>
     </header>
 
@@ -305,6 +353,10 @@
         });
 
         document.addEventListener('DOMContentLoaded', renderGallery);
+
+        document.getElementById('nav-toggle').onclick = function() {
+            document.getElementById('nav-links').classList.toggle('open');
+        };
     </script>
 </body>
 </html>

Images/nomad-soul.html

@@ -86,6 +86,51 @@
             background: var(--accent-glow);
             box-shadow: 0 0 10px var(--accent-glow);
         }
+        .nav-menu { position: relative; }
+
+        .nav-menu-toggle {
+            display: none;
+            font-family: 'Share Tech Mono', monospace;
+            background: none;
+            border: 1px solid var(--text-muted);
+            color: var(--text-muted);
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+            font-size: 1rem;
+            letter-spacing: 0.05em;
+            transition: var(--transition);
+        }
+
+        .nav-menu-toggle:hover {
+            color: var(--accent);
+            border-color: var(--accent);
+            background: var(--accent-glow);
+        }
+
+        .nav-menu-links {
+            display: flex;
+            gap: 1rem;
+        }
+
+        @media (max-width: 600px) {
+            .nav-menu-toggle { display: block; }
+            .nav-menu-links {
+                display: none;
+                flex-direction: column;
+                position: absolute;
+                right: 0;
+                top: calc(100% + 4px);
+                background: var(--bg-deep);
+                border: 1px solid var(--accent);
+                box-shadow: 0 4px 15px var(--accent-glow);
+                padding: 0.5rem;
+                gap: 0.5rem;
+                z-index: 200;
+                min-width: 180px;
+            }
+            .nav-menu-links.open { display: flex; }
+        }
+
 
         main {
             flex: 1;
@@ -224,9 +269,12 @@
             <span class="subtitle">2015–2021 Collection</span>
             <h1>YourNomadSoul</h1>
         </div>
-        <div class="nav-actions">
+        <div class="nav-menu">
-            <a href="images.html" class="nav-back">← Back to Hub</a>
+            <button class="nav-menu-toggle" id="nav-toggle" aria-label="Menu">&#9776; Menu</button>
-            <a href="https://files.exopraxist.org/share/yNytp9Di" class="nav-back" target="_blank">↓ Download Folder</a>
+            <div class="nav-menu-links" id="nav-links">
+                <a href="images.html" class="nav-back">← Back to Hub</a>
+                <a href="https://files.exopraxist.org/share/yNytp9Di" class="nav-back" target="_blank">↓ Download Folder</a>
+            </div>
         </div>
     </header>
 
@@ -310,6 +358,10 @@
         });
 
         document.addEventListener('DOMContentLoaded', renderGallery);
+
+        document.getElementById('nav-toggle').onclick = function() {
+            document.getElementById('nav-links').classList.toggle('open');
+        };
     </script>
 </body>
 </html>

Images/wayback.html

@@ -86,6 +86,51 @@
             background: var(--accent-glow);
             box-shadow: 0 0 10px var(--accent-glow);
         }
+        .nav-menu { position: relative; }
+
+        .nav-menu-toggle {
+            display: none;
+            font-family: 'Share Tech Mono', monospace;
+            background: none;
+            border: 1px solid var(--text-muted);
+            color: var(--text-muted);
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+            font-size: 1rem;
+            letter-spacing: 0.05em;
+            transition: var(--transition);
+        }
+
+        .nav-menu-toggle:hover {
+            color: var(--accent);
+            border-color: var(--accent);
+            background: var(--accent-glow);
+        }
+
+        .nav-menu-links {
+            display: flex;
+            gap: 1rem;
+        }
+
+        @media (max-width: 600px) {
+            .nav-menu-toggle { display: block; }
+            .nav-menu-links {
+                display: none;
+                flex-direction: column;
+                position: absolute;
+                right: 0;
+                top: calc(100% + 4px);
+                background: var(--bg-deep);
+                border: 1px solid var(--accent);
+                box-shadow: 0 4px 15px var(--accent-glow);
+                padding: 0.5rem;
+                gap: 0.5rem;
+                z-index: 200;
+                min-width: 180px;
+            }
+            .nav-menu-links.open { display: flex; }
+        }
+
 
         main {
             flex: 1;
@@ -224,9 +269,12 @@
             <span class="subtitle">2010–2014 Collection</span>
             <h1>WayBack</h1>
         </div>
-        <div class="nav-actions">
+        <div class="nav-menu">
-            <a href="images.html" class="nav-back">← Back to Hub</a>
+            <button class="nav-menu-toggle" id="nav-toggle" aria-label="Menu">&#9776; Menu</button>
-            <a href="https://files.exopraxist.org/share/voxb2LeQ" class="nav-back" target="_blank">↓ Download Folder</a>
+            <div class="nav-menu-links" id="nav-links">
+                <a href="images.html" class="nav-back">← Back to Hub</a>
+                <a href="https://files.exopraxist.org/share/voxb2LeQ" class="nav-back" target="_blank">↓ Download Folder</a>
+            </div>
         </div>
     </header>
 
@@ -309,6 +357,10 @@
         });
 
         document.addEventListener('DOMContentLoaded', renderGallery);
+
+        document.getElementById('nav-toggle').onclick = function() {
+            document.getElementById('nav-links').classList.toggle('open');
+        };
     </script>
 </body>
 </html>