From c42150058196f5affad5c6c590e99dd2fc7321c3 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 10 Apr 2026 11:29:00 +0200 Subject: feat: complete Hugo theme implementation from mockups MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Transform all production-ready mockup files into a fully functional Hugo theme with all design patterns, components, and interactivity. Implements the complete plan: token alignment, global shell, homepage, articles section, single article views, photo gallery, static pages, and 404 page. Changes: - Phase 0: Token alignment (--color-* → --type-*, add spacing/z-index/timing scales) - Phase 1a: Global shell (baseof.html, hamburger menu, theme toggle, matrix rain) - Phase 1b: Homepage (hero layout, glitch/typing/scroll-reveal effects) - Phase 1c: Articles section (timeline layout, filter system, featured cards) - Phase 1d: Single article (meta bar, share sidebar, footer nav, progress bar) - Phase 1e: Photo gallery (lightbox, grid layout, shortcode updates) - Phase 1f: Static pages (about/contact page layout) - Phase 1g: 404 page (standalone HTML, quote randomization, recent articles) New files: - 6 CSS components: hamburger, article-hero, share-sidebar, timeline, lightbox, 404 - 8 JS modules: hamburger, glitch, typing, scroll-reveal, share-sidebar, lightbox, 404, photo-utils - 6 template partials: article-single, featured-card, photo-article, share-sidebar, static-page, timeline-item - 1 layout: 404.html (standalone) Updated: - All CSS variables with comprehensive token system - All JS modules integrated into main.js - All shortcodes (gallery, gal-img) for lightbox compatibility - All layout files (baseof, home, section, page) with new dispatching logic Verified: Hugo build succeeds with 21 pages, no errors. Co-Authored-By: Claude Haiku 4.5 --- assets/css/components/hamburger.css | 187 ++++++++++++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 assets/css/components/hamburger.css (limited to 'assets/css/components/hamburger.css') diff --git a/assets/css/components/hamburger.css b/assets/css/components/hamburger.css new file mode 100644 index 0000000..200e81d --- /dev/null +++ b/assets/css/components/hamburger.css @@ -0,0 +1,187 @@ +/* hamburger.css */ + +.nav-header { + position: fixed; + top: 0; + right: 0; + z-index: var(--z-nav); + padding: var(--sp-6) var(--sp-8); +} + +/* Hamburger Button */ +.hamburger { + background: none; + border: none; + cursor: pointer; + display: flex; + flex-direction: column; + gap: 0.4rem; + padding: 0.5rem; + transition: all var(--duration-base) ease; + width: 32px; + height: 32px; + align-items: center; + justify-content: center; +} + +.hamburger span { + display: block; + width: 24px; + height: 2px; + background-color: var(--text); + border-radius: 2px; + transition: all var(--duration-base) ease; + transform-origin: center; +} + +.hamburger.active span:nth-child(1) { + transform: translateY(10px) rotate(45deg); +} + +.hamburger.active span:nth-child(2) { + opacity: 0; +} + +.hamburger.active span:nth-child(3) { + transform: translateY(-10px) rotate(-45deg); +} + +/* Menu Overlay */ +.menu-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(6, 11, 16, 0.95); + backdrop-filter: blur(4px); + z-index: var(--z-menu); + opacity: 0; + visibility: hidden; + transition: opacity var(--duration-base) ease, visibility var(--duration-base) ease; + display: flex; + align-items: center; + justify-content: center; +} + +.menu-overlay.active { + opacity: 1; + visibility: visible; +} + +/* Menu Items */ +.menu-items { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--sp-12); + width: 90%; + max-width: 600px; + padding: var(--sp-8); +} + +.menu-logo { + font-family: var(--font-head); + font-size: 1.5rem; + font-weight: 700; + color: var(--text); + text-decoration: none; + margin-bottom: var(--sp-4); +} + +.menu-links { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--sp-6); + text-align: center; +} + +.menu-links a { + color: var(--text); + text-decoration: none; + font-family: var(--font-mono); + font-size: 1.2rem; + padding: var(--sp-3) var(--sp-4); + border-radius: 4px; + transition: all var(--duration-base) ease; +} + +.menu-links a:hover { + color: var(--accent); +} + +.menu-links a[aria-current="page"] { + color: var(--accent); + font-weight: 700; +} + +/* Menu Footer */ +.menu-footer { + display: flex; + justify-content: center; + margin-top: var(--sp-8); +} + +/* Theme Switch Button */ +.theme-switch { + background: var(--surface); + border: 1px solid var(--border); + cursor: pointer; + width: 50px; + height: 26px; + border-radius: 20px; + padding: 2px; + position: relative; + transition: all var(--duration-base) ease; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.theme-switch:hover { + border-color: var(--accent); +} + +.theme-switch-dot { + width: 20px; + height: 20px; + background-color: var(--text); + border-radius: 50%; + display: block; + transition: transform var(--duration-base) ease; +} + +.theme-switch.light { + justify-content: flex-end; +} + +.theme-switch.light .theme-switch-dot { + transform: translateX(24px); +} + +/* Keyboard Focus */ +.hamburger:focus-visible, +.menu-links a:focus-visible, +.theme-switch:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--accent); + color: var(--bg); + padding: var(--sp-2) var(--sp-4); + z-index: var(--z-modal); + text-decoration: none; + font-family: var(--font-mono); + font-size: 0.9rem; +} + +.skip-link:focus { + top: 0; +} -- cgit v1.2.3