From 70fab005093cd92bfbde1bfa3380c3dc873bdfcf Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 10 Apr 2026 12:01:49 +0200 Subject: feat: align homepage to mockup-a with centered hero, terminal animation, article grid MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Restructure hero layout with centered .hero-container (max-width 1080px), update hero text (prompt "welcome to", button "About Me" → /is/), add terminal widget title bar and staggered fade-in animation, replace scroll indicator with animated line. Add section header (eyebrow + title) above articles, new vertical .article-card grid layout with solid type badges (sharp corners, sharp badges), implement scroll reveal stagger (90ms per sibling). Update terminal color palette to use proper CSS variables. Remove ambient glow from hero. Changes follow THEMING-STANDARD: semantic color variables, mobile-first responsive design, prefers-reduced-motion support, WCAG AA accessibility. - hero.html: new .hero-container wrapper, typed terminal content, scroll line - hero.css: restructure layout, add color classes, stagger animation, scroll pulse - home.html: add section header, .articles-grid, pass context="home" flag - post-card.html: context-conditional rendering (homepage vertical vs. other horizontal) - card.css: new .article-card, .articles-grid, .article-* styles - main.css: add section utilities, .reveal/.revealed base states - variables.css: add --terminal-prompt, --terminal-text, --terminal-accent - scroll-reveal.js: add 90ms per-item stagger with cleanup - 404.css: remove hardcoded terminal color fallbacks Co-Authored-By: Claude Haiku 4.5 --- assets/css/components/404.css | 4 +- assets/css/components/card.css | 99 +++++++++++++++++++++++++++++++ assets/css/components/hero.css | 132 ++++++++++++++++++++++++++--------------- 3 files changed, 185 insertions(+), 50 deletions(-) (limited to 'assets/css/components') diff --git a/assets/css/components/404.css b/assets/css/components/404.css index d2c93b0..3db099f 100644 --- a/assets/css/components/404.css +++ b/assets/css/components/404.css @@ -222,7 +222,7 @@ padding: 1rem; font-family: var(--font-mono); font-size: 0.75rem; - color: var(--terminal-text, #c4d6e8); + color: var(--terminal-text); line-height: 1.6; } @@ -232,7 +232,7 @@ } .terminal-prompt { - color: var(--terminal-prompt, #00ff88); + color: var(--terminal-prompt); } #terminal-files { diff --git a/assets/css/components/card.css b/assets/css/components/card.css index 6a8cfaf..3d218bc 100644 --- a/assets/css/components/card.css +++ b/assets/css/components/card.css @@ -153,3 +153,102 @@ height: 150px; } } + +/* ─── Homepage article cards ─────────────────────────────── */ + +.articles-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} + +@media (max-width: 768px) { + .articles-grid { grid-template-columns: 1fr; } +} + +.article-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 0; + overflow: hidden; + display: flex; + flex-direction: column; + transition: var(--transition); +} + +.article-card:hover { + transform: translate(0, -4px); + box-shadow: 0 8px 30px var(--accent-glow); + border-color: var(--accent); +} + +/* Badge background set via inline style in template using var(--type-*) */ +.article-type { + font-family: var(--font-mono); + font-size: var(--fs-badge); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + padding: 0.4rem 1rem; + color: var(--bg); + width: fit-content; + border-radius: 3px; + margin: 1rem 1rem 0; +} + +.article-content { + padding: 1rem 1rem 1.5rem; + display: flex; + flex-direction: column; + flex: 1; +} + +.article-title { + font-family: var(--font-head); + font-size: 1.1rem; + font-weight: 700; + line-height: 1.3; + margin-bottom: 0.5rem; + letter-spacing: -0.025em; +} + +.article-title a { color: var(--text); text-decoration: none; } +.article-title a:hover { color: var(--accent); } + +.article-excerpt { + color: var(--text-dim); + font-size: 0.9rem; + line-height: 1.6; + flex: 1; + margin-bottom: 1rem; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.article-meta { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 1rem; + border-top: 1px solid var(--border); + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-top: auto; +} + +/* .article-read named distinctly from .article-link (used in 404.css) */ +.article-read { + color: var(--accent); + text-decoration: none; + font-weight: 600; + letter-spacing: 0.05em; + transition: color var(--duration-fast) ease; +} + +.article-read:hover { color: var(--accent2); } diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css index 3596274..b9ecb24 100644 --- a/assets/css/components/hero.css +++ b/assets/css/components/hero.css @@ -2,13 +2,25 @@ .hero { position: relative; - min-height: 100vh; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; + padding: 6rem 2rem 2rem; + overflow: hidden; +} + +.hero-container { + position: relative; + z-index: 2; display: flex; align-items: center; - justify-content: center; - padding: 2rem; gap: 3rem; - overflow: hidden; + max-width: 1080px; + width: 100%; + margin: 0 auto; + flex: 1; } #matrix-canvas { @@ -25,8 +37,6 @@ html.theme-light #matrix-canvas { .hero-left { flex: 1; min-width: 0; - position: relative; - z-index: 2; } .hero-prompt { @@ -190,11 +200,9 @@ html.theme-light #matrix-canvas { flex: 0 0 auto; width: 320px; display: none; - position: relative; - z-index: 2; } -@media (min-width: 1200px) { +@media (min-width: 900px) { .hero-right { display: block; } @@ -225,19 +233,60 @@ html.theme-light #matrix-canvas { display: inline-block; } +.terminal-title { + margin-left: auto; + font-family: var(--font-mono); + font-size: 0.7rem; + color: var(--text-dim); +} + .terminal-content { padding: 1rem; font-family: var(--font-mono); - color: var(--terminal-text, #c4d6e8); + color: var(--terminal-text); + font-size: 0.75rem; + line-height: 1.7; } -.terminal-content div { - white-space: pre-wrap; +.terminal-content .tl { + white-space: nowrap; word-wrap: break-word; } +/* Terminal color classes */ +.tc-dim { color: var(--muted); } +.tc-ok { color: var(--accent2); } +.tc-key { color: var(--accent); } + +/* Terminal stagger animation */ +@keyframes terminal-fade-in { + from { + opacity: 0; + transform: translateY(4px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.tl { + opacity: 0; + animation: terminal-fade-in 0.4s ease forwards; +} + +.tl-d1 { animation-delay: 0ms; } +.tl-d2 { animation-delay: 150ms; } +.tl-d3 { animation-delay: 300ms; } +.tl-d4 { animation-delay: 450ms; } +.tl-d5 { animation-delay: 600ms; } +.tl-d6 { animation-delay: 750ms; } +.tl-d7 { animation-delay: 900ms; } +.tl-d8 { animation-delay: 1050ms; } +.tl-d9 { animation-delay: 1200ms; } + .terminal-prompt { - color: var(--terminal-prompt, #00ff88); + color: var(--terminal-prompt); } /* Scroll Indicator */ @@ -250,44 +299,38 @@ html.theme-light #matrix-canvas { flex-direction: column; align-items: center; gap: 0.5rem; - font-size: 0.75rem; + font-family: var(--font-mono); + font-size: 0.7rem; + letter-spacing: 0.1em; + text-transform: uppercase; color: var(--text-dim); - animation: bounce 2s infinite; z-index: 2; } -.scroll-indicator svg { - color: var(--accent); +.scroll-line { + width: 1px; + height: 40px; + background: var(--accent); + animation: scroll-line-pulse 2s ease-in-out infinite; } -@keyframes bounce { - 0%, 100% { transform: translateX(-50%) translateY(0); } - 50% { transform: translateX(-50%) translateY(-8px); } -} - -/* Ambient glow behind hero */ -.hero::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 600px; - height: 600px; - background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%); - transform: translate(-50%, -50%); - pointer-events: none; - z-index: 1; +@keyframes scroll-line-pulse { + 0%, 100% { opacity: 0.3; transform: scaleY(1); } + 50% { opacity: 1; transform: scaleY(1.15); } } /* Mobile */ @media (max-width: 900px) { .hero { - flex-direction: column; - min-height: auto; - justify-content: flex-start; + height: auto; + min-height: 100vh; padding-top: 6rem; } + .hero-container { + flex-direction: column; + } + .hero-tagline { max-width: 100%; } @@ -299,15 +342,8 @@ html.theme-light #matrix-canvas { @media (prefers-reduced-motion: reduce) { .hero-name.is-glitching::before, - .hero-name.is-glitching::after { - animation: none; - } - - .scroll-indicator { - animation: none; - } - - .cursor { - animation: none; - } + .hero-name.is-glitching::after { animation: none; } + .cursor { animation: none; } + .scroll-line { animation: none; opacity: 0.6; } + .tl { animation: none; opacity: 1; } } -- cgit v1.2.3