From 855f0bdba9ed7c6e3be4ff9871c13b4f83a979c0 Mon Sep 17 00:00:00 2001 From: JL Kruger Date: Fri, 27 Mar 2026 20:42:06 +0200 Subject: [PATCH] Add mobile dropdown nav to image collection pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- Images/exopraxist.html | 58 ++++++++++++++++++++++++++++++++++++-- Images/myster-wizzard.html | 58 ++++++++++++++++++++++++++++++++++++-- Images/nomad-soul.html | 58 ++++++++++++++++++++++++++++++++++++-- Images/wayback.html | 58 ++++++++++++++++++++++++++++++++++++-- 4 files changed, 220 insertions(+), 12 deletions(-) diff --git a/Images/exopraxist.html b/Images/exopraxist.html index 6f65cd4..a8ddb44 100644 --- a/Images/exopraxist.html +++ b/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 @@ 2026–present Collection

Exopraxist

-
- ← Back to Hub - ↓ Download Folder +
+ +
@@ -306,6 +354,10 @@ }); document.addEventListener('DOMContentLoaded', renderGallery); + + document.getElementById('nav-toggle').onclick = function() { + document.getElementById('nav-links').classList.toggle('open'); + }; diff --git a/Images/myster-wizzard.html b/Images/myster-wizzard.html index 593e675..89041c0 100644 --- a/Images/myster-wizzard.html +++ b/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 @@ 2022–2025 Collection

MysterWizzard

-
- ← Back to Hub - ↓ Download Folder +
+ +
@@ -305,6 +353,10 @@ }); document.addEventListener('DOMContentLoaded', renderGallery); + + document.getElementById('nav-toggle').onclick = function() { + document.getElementById('nav-links').classList.toggle('open'); + }; diff --git a/Images/nomad-soul.html b/Images/nomad-soul.html index ee1ad6c..42bd708 100644 --- a/Images/nomad-soul.html +++ b/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 @@ 2015–2021 Collection

YourNomadSoul

-
- ← Back to Hub - ↓ Download Folder +
+ +
@@ -310,6 +358,10 @@ }); document.addEventListener('DOMContentLoaded', renderGallery); + + document.getElementById('nav-toggle').onclick = function() { + document.getElementById('nav-links').classList.toggle('open'); + }; diff --git a/Images/wayback.html b/Images/wayback.html index ceea687..e79337e 100644 --- a/Images/wayback.html +++ b/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 @@ 2010–2014 Collection

WayBack

-
- ← Back to Hub - ↓ Download Folder +
+ +
@@ -309,6 +357,10 @@ }); document.addEventListener('DOMContentLoaded', renderGallery); + + document.getElementById('nav-toggle').onclick = function() { + document.getElementById('nav-links').classList.toggle('open'); + };