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/timeline.css | 336 +++++++++++++++++++++++++++++++++++++ 1 file changed, 336 insertions(+) create mode 100644 assets/css/components/timeline.css (limited to 'assets/css/components/timeline.css') diff --git a/assets/css/components/timeline.css b/assets/css/components/timeline.css new file mode 100644 index 0000000..c4a3678 --- /dev/null +++ b/assets/css/components/timeline.css @@ -0,0 +1,336 @@ +/* timeline.css */ + +.page-header { + padding: 4rem 2rem 2rem; + max-width: var(--container-max); + margin: 0 auto; + text-align: center; +} + +.page-header h1 { + margin-bottom: 2rem; +} + +.filter-buttons { + display: flex; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; +} + +.filter-btn { + padding: 0.6rem 1.2rem; + font-family: var(--font-mono); + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.1em; + background: transparent; + border: 1px solid var(--border); + color: var(--text); + cursor: pointer; + border-radius: 4px; + transition: all var(--duration-base) ease; +} + +.filter-btn:hover { + border-color: var(--accent); + color: var(--accent); +} + +.filter-btn.active { + background: var(--accent); + color: #000; + border-color: var(--accent); + font-weight: 600; +} + +/* Featured Article */ +.featured-article { + max-width: var(--container-max); + margin: 3rem auto; + padding: 2rem; + background: var(--surface); + border: 2px solid transparent; + border-image: linear-gradient(135deg, var(--accent), var(--accent2)) 1; + border-radius: 8px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: center; +} + +@media (max-width: 768px) { + .featured-article { + grid-template-columns: 1fr; + } +} + +.featured-image { + width: 100%; + overflow: hidden; + border-radius: 4px; +} + +.featured-image img { + width: 100%; + height: 300px; + object-fit: cover; +} + +.featured-body { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.featured-header { + display: flex; + gap: 1rem; + align-items: center; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.featured-type-badge { + font-weight: 600; +} + +.featured-date { + color: var(--text-dim); +} + +.featured-title { + font-size: clamp(1.5rem, 4vw, 2.5rem); + line-height: 1.2; + margin-bottom: 1rem; +} + +.featured-excerpt { + color: var(--text-dim); + line-height: 1.8; + margin-bottom: 1rem; +} + +.featured-link { + color: var(--accent); + text-decoration: none; + font-family: var(--font-mono); + font-size: 0.9rem; + transition: all var(--duration-base) ease; +} + +.featured-link:hover { + color: var(--accent2); + transform: translateX(4px); +} + +/* Timeline */ +.timeline-section { + position: relative; + max-width: var(--container-max); + margin: 4rem auto; + padding: 0 2rem; +} + +.timeline-line { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(to bottom, var(--accent), transparent); + transform: translateX(-50%); +} + +@media (max-width: 900px) { + .timeline-line { + left: 0; + } +} + +.timeline-feed { + position: relative; + padding: 2rem 0; +} + +.timeline-item { + position: relative; + margin-bottom: 3rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: center; +} + +.timeline-item.left { + grid-template-columns: 1fr 1fr; +} + +.timeline-item.right { + grid-template-columns: 1fr 1fr; + direction: rtl; +} + +.timeline-item.right > * { + direction: ltr; +} + +@media (max-width: 900px) { + .timeline-item, + .timeline-item.left, + .timeline-item.right { + grid-template-columns: 1fr; + direction: ltr; + } + + .timeline-item.right > * { + direction: ltr; + } +} + +.timeline-dot { + position: absolute; + left: 50%; + top: 2rem; + width: 16px; + height: 16px; + background: var(--accent); + border: 3px solid var(--bg); + border-radius: 50%; + transform: translateX(-50%); + z-index: 2; +} + +@media (max-width: 900px) { + .timeline-dot { + left: -8px; + } +} + +.article-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + overflow: hidden; + transition: all var(--duration-base) ease; + cursor: pointer; +} + +.article-card:hover { + border-color: var(--accent); + box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); + transform: translateY(-4px); +} + +.article-card-image { + width: 100%; + height: 200px; + overflow: hidden; +} + +.article-card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--duration-base) ease; +} + +.article-card:hover .article-card-image img { + transform: scale(1.05); +} + +.article-card-body { + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.article-card-header { + display: flex; + gap: 1rem; + align-items: center; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.article-type-badge { + font-weight: 600; + padding: 0.3rem 0.6rem; + border-radius: 4px; + background: color-mix(in srgb, currentColor 15%, transparent); + border: 1px solid color-mix(in srgb, currentColor 30%, transparent); +} + +.article-type-badge.type-tech { + color: var(--type-tech); +} + +.article-type-badge.type-life { + color: var(--type-life); +} + +.article-type-badge.type-quote { + color: var(--type-quote); +} + +.article-type-badge.type-link { + color: var(--type-link); +} + +.article-type-badge.type-photo { + color: var(--type-photo); +} + +.article-date { + color: var(--text-dim); +} + +.article-card-title { + font-size: 1.3rem; + font-weight: 700; + line-height: 1.3; + margin: 0.5rem 0; +} + +.article-card-title a { + color: var(--text); + text-decoration: none; + transition: color var(--duration-base) ease; +} + +.article-card-title a:hover { + color: var(--accent); +} + +.article-card-excerpt { + color: var(--text-dim); + font-size: 0.95rem; + line-height: 1.6; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Hide/show articles based on filter */ +.timeline-item[data-type] { + display: none; +} + +.timeline-item[data-type].visible, +.timeline-item[data-filter="all"].visible { + display: grid; +} + +@media (prefers-reduced-motion: reduce) { + .article-card:hover { + transform: none; + } + + .article-card-image img { + transition: none; + } +} -- cgit v1.2.3