diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/main.css | 45 |
1 files changed, 45 insertions, 0 deletions
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; } } |