feat: seasonal race palette auto-detection on web

Inline script in Base.astro sets --accent / --accent-dim CSS variables
before first paint based on the current date. Switches to pink (Giro),
yellow (Tour), or red (Vuelta) during each Grand Tour window; falls back
to the default blue. Also aligns default --accent with the mobile app
(#60a5fa instead of #00c8ff).
This commit is contained in:
Davide Scaini
2026-04-25 15:41:45 +02:00
parent dfe5307ab4
commit 91d747c54a
+33 -2
View File
@@ -49,6 +49,37 @@ try {
document.documentElement.setAttribute('data-theme', t); document.documentElement.setAttribute('data-theme', t);
</script> </script>
<!-- Race-calendar palette: auto-switches accent colour during Grand Tours -->
<script is:inline>
(function () {
var palettes = {
default: { accent: '#60a5fa', dim: 'rgba(96,165,250,0.15)' },
giro: { accent: '#f472b6', dim: 'rgba(244,114,182,0.15)' },
tour: { accent: '#facc15', dim: 'rgba(250,204,21,0.15)' },
vuelta: { accent: '#ef4444', dim: 'rgba(239,68,68,0.15)' },
};
// [month 0-indexed, day] inclusive — update each year
var races = [
{ key: 'giro', start: [4, 8], end: [5, 1] },
{ key: 'tour', start: [5, 27], end: [6, 19] },
{ key: 'vuelta', start: [7, 15], end: [8, 6] },
];
function autoKey() {
var now = new Date(), y = now.getFullYear();
for (var i = 0; i < races.length; i++) {
var r = races[i];
if (now >= new Date(y, r.start[0], r.start[1]) &&
now < new Date(y, r.end[0], r.end[1] + 1)) return r.key;
}
return 'default';
}
var key = autoKey();
var p = palettes[key] || palettes.default;
document.documentElement.style.setProperty('--accent', p.accent);
document.documentElement.style.setProperty('--accent-dim', p.dim);
})();
</script>
<!-- Reload on bfcache restore so client:only components re-mount --> <!-- Reload on bfcache restore so client:only components re-mount -->
<script is:inline> <script is:inline>
window.addEventListener('pageshow', function(e) { window.addEventListener('pageshow', function(e) {
@@ -88,8 +119,8 @@ try {
--text-5: #71717a; /* zinc-500 */ --text-5: #71717a; /* zinc-500 */
--border: #27272a; /* zinc-800 */ --border: #27272a; /* zinc-800 */
--border-sub: #3f3f46; /* zinc-700 */ --border-sub: #3f3f46; /* zinc-700 */
--accent: #00c8ff; --accent: #60a5fa;
--accent-dim: rgba(0,200,255,0.15); --accent-dim: rgba(96,165,250,0.15);
} }
[data-theme="light"] { [data-theme="light"] {