manzolo/leggenda-del-regolo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Cartello → titolo: la dissolvenza parte insieme al titolo (prima il CSS sfumava il cartello prima che il codice arrivasse, e si vedeva la piazza); titolo e introduzione con fondo pieno

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018ks2K99uqCZjAxvy7Rdj1R
This commit is contained in:
manzolo
2026-10-25 10:44:46 +01:00
co-authored by Claude Opus 5.5
parent 12c6357cbc
commit acc437a33c
3 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+6 -4
View File
@@ -68,12 +68,12 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
.overlay[hidden] { display: none; }
/* Titolo e introduzione: le illustrazioni a pixel netti, con una velatura per leggere il testo. */
#title { justify-content: flex-start; padding-top: 6%; image-rendering: pixelated;
background: none; }
background: #0d0910; } /* fondo pieno: finché l'illustrazione non arriva, sotto non si vede il gioco */
#title .buttons { margin-top: auto; }
#title .dedication { margin-bottom: 2%; text-shadow: 2px 2px 0 #000; }
#title .subtitle { color: var(--ink); text-shadow: 2px 2px 0 #000; }
#intro { justify-content: flex-start; padding-top: 7%; cursor: pointer; image-rendering: pixelated;
background: none; }
background: #0d0910; } /* fondo pieno: finché l'illustrazione non arriva, sotto non si vede il gioco */
#intro-text { min-height: 4.2em; max-width: 30em; font-size: clamp(11.52px, 1.87vw, 21.6px); font-weight: bold; line-height: 1.3; color: var(--ink);
text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000; animation: appear .8s ease-out; }
#intro .hint { margin-top: auto; margin-bottom: 40px; color: var(--dim); font-size: clamp(8.64px, 1.08vw, 11.52px); text-shadow: 1px 1px 0 #000; }
@@ -110,8 +110,10 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
#title .dedication { font-size: max(9px, calc(var(--u) * 1.5)); }
#intro-text { font-size: max(11px, calc(var(--u) * 2)); }
#title .buttons button { font-size: max(11px, calc(var(--u) * 1.9)); }
#splash { z-index: 11; gap: .15em; cursor: pointer; background: radial-gradient(circle at 50% 45%, #2a2030, #0d0910 70%);
animation: splash-out .7s ease-in 4.3s forwards; }
#splash { z-index: 11; gap: .15em; cursor: pointer; background: radial-gradient(circle at 50% 45%, #2a2030, #0d0910 70%); }
/* La dissolvenza la avvia main.js insieme al titolo: il CSS arriva prima del codice, e con un orologio suo il cartello
sparirebbe prima che il titolo ci sia. */
#splash.out { animation: splash-out .7s ease-in forwards; }
#splash p { margin: 0; max-width: none; font-weight: bold; text-shadow: 3px 3px 0 #000; opacity: 0; }
#splash .splash-name { font-size: clamp(24.48px, 5.76vw, 63.36px); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
animation: splash-in .9s ease-out .2s forwards; }