diff options
| author | user <user@clank> | 2026-08-30 19:48:16 +0200 |
|---|---|---|
| committer | user <user@clank> | 2026-08-30 19:48:16 +0200 |
| commit | 6b3f15e8118a576284d1400c98e485356e62bec4 (patch) | |
| tree | 9045b30dd7383a67146786da0c7f3053a304d6d3 /web | |
| parent | web: the demo poster rises above the lightened floor (diff) | |
| download | slosh-6b3f15e8118a576284d1400c98e485356e62bec4.tar.gz slosh-6b3f15e8118a576284d1400c98e485356e62bec4.tar.xz slosh-6b3f15e8118a576284d1400c98e485356e62bec4.zip | |
web: the hero logo cycles too, in truer colours
The floating logo's dress on the big one, cut to the brand: no hue
rotation -- that is what walks the little one off into blues -- just a
4s slide through the palette's own pinks and orchid and --dead's
sunset orange, the most retrowave colour the theme already owns, with
the shine crossing once a loop and a soft pink glow underneath.
Reduced motion gets the gradient standing still.
Diffstat (limited to 'web')
| -rw-r--r-- | web/site.css | 28 |
1 files changed, 27 insertions, 1 deletions
diff --git a/web/site.css b/web/site.css index 208318c..e9ce9a2 100644 --- a/web/site.css +++ b/web/site.css @@ -183,9 +183,35 @@ main { } .hero .logo { - color: var(--pink); line-height: 1em; letter-spacing: -0.05em; /* see .logo-float pre */ + /* The same dress as the floating logo, in truer colours: no hue + * rotation (that is what walks the little one off into blues), just a + * slide through the palette's own pinks -- and --dead's sunset orange, + * which is as retrowave as the theme gets -- with the shine crossing + * once a loop. Every stop is a colour slosh already wears. */ + background-image: linear-gradient(105deg, + rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.85) 50%, + rgba(255, 255, 255, 0) 68%), + linear-gradient(90deg, + var(--pink) 0%, #ff87e7 28%, #c95fff 52%, var(--dead) 78%, + var(--pink) 100%); + background-size: 60% 100%, 200% 100%; + background-repeat: no-repeat, repeat; + background-position: -150% 0, 0% 0; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + filter: drop-shadow(0 6px 26px rgba(255, 95, 215, 0.25)); + animation: hero-cycle 4s linear infinite; +} +@keyframes hero-cycle { + 0% { background-position: -150% 0, 0% 0; } + 84% { background-position: -150% 0, 168% 0; } + 100% { background-position: 250% 0, 200% 0; } +} +@media (prefers-reduced-motion: reduce) { + .hero .logo { animation: none; } } .hero h1 { |