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>
This commit is contained in:
@@ -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">
|
||||
<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 class="nav-menu">
|
||||
<button class="nav-menu-toggle" id="nav-toggle" aria-label="Menu">☰ Menu</button>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user