diff --git a/static/landing.html b/static/landing.html index f983786..0c598d3 100644 --- a/static/landing.html +++ b/static/landing.html @@ -95,6 +95,50 @@ color: #fff; border: none; } .btn.primary:hover { filter: brightness(1.07); } + .nav-links-hamburger { + display: none; + position: relative; + } + .hamburger-btn { + display: flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--panel); + color: var(--fg); + cursor: pointer; + } + .hamburger-btn:hover { + border-color: var(--accent); + } + .hamburger-menu { + position: absolute; + top: calc(100% + 10px); + right: 0; + min-width: 220px; + display: none; + flex-direction: column; + padding: 12px; + background: rgba(17,17,17,0.98); + border: 1px solid var(--border); + border-radius: var(--radius); + backdrop-filter: blur(10px); + box-shadow: 0 12px 40px rgba(0,0,0,0.4); + } + .hamburger-menu a { + color: var(--muted); + padding: 8px 10px; + border-radius: 6px; + } + .hamburger-menu a:hover { + color: var(--fg); + } + .nav-links-hamburger.open .hamburger-menu { + display: flex; + } /* Hero */ .hero { padding: 86px 0 40px; text-align: center; } @@ -296,7 +340,8 @@ @media (max-width: 820px) { .grid { grid-template-columns: repeat(2, 1fr); } .shotrow { grid-template-columns: 1fr; } - .nav-links a:not(.btn) { display: none; } + .nav-links { display: none; } + .nav-links-hamburger { display: block; } } @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } @@ -324,6 +369,28 @@ GitHub + + @@ -733,6 +800,24 @@ show(0); })(); + + + // Mobile navigation: open/close hamburger menu + (function () { + var container = document.querySelector('.nav-links-hamburger'); + if (!container) return; + + var button = container.querySelector('.hamburger-btn'); + + button.addEventListener('click', function (e) { + e.stopPropagation(); + container.classList.toggle('open'); + }); + + document.addEventListener('click', function () { + container.classList.remove('open'); + }); + })();