diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/main.min.css | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/assets/css/main.min.css b/assets/css/main.min.css index aef2fbd..3e91368 100644 --- a/assets/css/main.min.css +++ b/assets/css/main.min.css @@ -2153,6 +2153,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { /* Hero typography with fluid sizing */ +.section-title { + font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem); +} + /* ---- Article prev/next navigation ---- */ .article-nav { @@ -4833,11 +4837,66 @@ html.theme-light .hero-name { } } +/* 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; + } } .hover\:bg-surface:hover { |