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/404.css | 247 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 assets/css/components/404.css (limited to 'assets/css/components/404.css') diff --git a/assets/css/components/404.css b/assets/css/components/404.css new file mode 100644 index 0000000..d2c93b0 --- /dev/null +++ b/assets/css/components/404.css @@ -0,0 +1,247 @@ +/* 404.css */ + +.hero--404 { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; +} + +.content-wrapper { + display: grid; + grid-template-columns: 65% 35%; + gap: 3rem; + max-width: 1200px; + width: 100%; +} + +@media (max-width: 900px) { + .content-wrapper { + grid-template-columns: 1fr; + gap: 2rem; + } +} + +/* Quote Section */ +.quote-section { + margin-bottom: 3rem; + padding: 2rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + position: relative; +} + +.quote-mark { + font-size: 4rem; + color: var(--accent); + opacity: 0.3; + margin-bottom: -0.5rem; +} + +.quote-text { + font-family: var(--font-body); + font-size: 1.3rem; + font-weight: 400; + line-height: 1.8; + color: var(--text); + margin-bottom: 1rem; +} + +.quote-author { + font-family: var(--font-mono); + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-dim); +} + +/* Search Box */ +.search-box { + display: flex; + gap: 0; + margin-bottom: 3rem; + overflow: hidden; + border-radius: 4px; + border: 1px solid var(--border); +} + +.search-box input { + flex: 1; + padding: 0.75rem 1rem; + background: var(--surface); + border: none; + color: var(--text); + font-family: var(--font-mono); + font-size: 0.9rem; +} + +.search-box input::placeholder { + color: var(--text-dim); +} + +.search-box button { + padding: 0.75rem 1rem; + background: var(--accent); + border: none; + color: #000; + cursor: pointer; + transition: all var(--duration-base) ease; +} + +.search-box button:hover { + background: var(--accent2); +} + +/* Quick Nav */ +.quick-nav { + margin-bottom: 2rem; +} + +.quick-nav h3 { + font-size: 1rem; + margin-bottom: 1rem; +} + +.quick-nav ul { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.quick-nav a { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + border: 1px solid var(--border); + border-radius: 4px; + color: var(--text); + text-decoration: none; + transition: all var(--duration-base) ease; +} + +.quick-nav a:hover { + border-color: var(--accent); + background: rgba(168, 85, 247, 0.05); + padding-left: 1.25rem; +} + +/* Right Column */ +.hero-right-404 { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.recent-articles, +.terminal-widget { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + overflow: hidden; +} + +.recent-articles h3, +.terminal-widget .terminal-bar { + padding: 1rem; + background: var(--bg2); + font-size: 0.9rem; + font-weight: 700; +} + +.terminal-widget .terminal-bar { + display: flex; + gap: 0.75rem; + align-items: center; +} + +.terminal-dot { + width: 12px; + height: 12px; + border-radius: 50%; + display: inline-block; +} + +.recent-articles ul { + list-style: none; + padding: 0; + margin: 0; +} + +.recent-articles li { + border-bottom: 1px solid var(--border); + padding: 0; + margin: 0; +} + +.recent-articles li:last-child { + border-bottom: none; +} + +.article-link { + display: block; + padding: 0.75rem 1rem; + color: var(--text); + text-decoration: none; + font-size: 0.9rem; + transition: all var(--duration-base) ease; + border-left: 2px solid transparent; +} + +.article-link:hover { + background: rgba(168, 85, 247, 0.05); + border-left-color: var(--accent); + padding-left: 1.25rem; +} + +.article-link[data-type="tech"] { + color: var(--type-tech); +} + +.article-link[data-type="life"] { + color: var(--type-life); +} + +.article-link[data-type="quote"] { + color: var(--type-quote); +} + +.article-link[data-type="link"] { + color: var(--type-link); +} + +.article-link[data-type="photo"] { + color: var(--type-photo); +} + +.terminal-content { + padding: 1rem; + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--terminal-text, #c4d6e8); + line-height: 1.6; +} + +.terminal-content div { + white-space: pre-wrap; + word-wrap: break-word; +} + +.terminal-prompt { + color: var(--terminal-prompt, #00ff88); +} + +#terminal-files { + margin-top: 0.5rem; + color: var(--terminal-accent, #38bdf8); +} + +@media (prefers-reduced-motion: reduce) { + .article-link:hover { + padding-left: 1rem; + } +} -- cgit v1.2.3