From c3c20ab489f0065888d54b5bc51ce58881450110 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Wed, 13 May 2026 09:40:13 +0200 Subject: feat: add glitch effect to article list page H1 Add .section-title class with chromatic-aberration glitch mechanics mirroring .hero-name. Extend hero-glitch.js to target both classes independently. Load glitch script on IsHome and IsSection pages. Title styled uppercase, centered, white. Co-Authored-By: Claude Sonnet 4.6 --- assets/css/main.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) (limited to 'assets/css/main.css') diff --git a/assets/css/main.css b/assets/css/main.css index 29f7f6e..05e491e 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -2055,7 +2055,52 @@ html.theme-light .hero-name { 100% { transform: translate(0); clip-path: inset(0 0 100% 0); opacity: 0; } } +/* Section title glitch effect (article list pages) */ +.section-title { + font-family: var(--font-head); + font-size: clamp(2rem, 6vw, 3rem); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; + color: var(--text); + text-transform: uppercase; + text-align: center; + display: block; + position: relative; + width: 100%; + margin-bottom: 3rem; +} + +.section-title::before, +.section-title::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + opacity: 0; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + +.section-title::before { color: #ff2b6d; } +.section-title::after { color: #00e5ff; } + +.section-title.is-glitching::before { + opacity: 0.8; + animation: glitch-red 0.45s steps(3) forwards; +} +.section-title.is-glitching::after { + opacity: 0.8; + animation: glitch-cyn 0.45s steps(3) forwards; +} + @media (prefers-reduced-motion: reduce) { .hero-name::before, .hero-name::after { display: none; } + .section-title::before, + .section-title::after { display: none; } } -- cgit v1.2.3