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

Pulsante «?» (o H) che mostra per qualche secondo cosa si può toccare; mappa che si scorre sul telefono

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017egeN2amL84ErjfgQFtEDn
This commit is contained in:
manzolo
2026-10-23 21:57:25 +02:00
co-authored by Claude Opus 5.5
parent a5a6834a37
commit c0d643d05d
5 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+5 -3
View File
@@ -106,18 +106,20 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
/* Mappa: la pianta del paese a gradini, i posti visti come cartellini, le strade come linee. */
/* In alto a sinistra: Pausa e Mappa. */
#corner { position: absolute; top: 6px; left: 6px; z-index: 2; display: flex; gap: 6px; }
#map-button, #pause-button { font: bold clamp(8.64px, 1.15vw, 11.52px) var(--font); padding: .35em .8em;
#map-button, #pause-button, #spots-button { font: bold clamp(8.64px, 1.15vw, 11.52px) var(--font); padding: .35em .8em;
color: var(--accent); background: rgba(27, 20, 32, .62); border: 0; border-radius: 18px; cursor: pointer; }
#pause { z-index: 3; background: rgba(15, 10, 20, .9); }
.pause-buttons { flex-direction: column; align-items: stretch; min-width: min(70%, 16em); }
#pause .hint { color: var(--dim); }
#map { z-index: 3; justify-content: flex-start; padding-top: 2.5%; background: rgba(15, 10, 20, .94); }
#map h2 { font-size: clamp(12.96px, 2.16vw, 23.04px); }
#map-board { position: relative; width: 92%; flex: 1; min-height: 0; margin: .3em 0;
/* Sui telefoni la pianta resta grande quanto serve per leggerla e si scorre col dito. */
#map-scroll { width: 92%; flex: 1; min-height: 0; margin: .3em 0; overflow: auto; -webkit-overflow-scrolling: touch; }
#map-board { position: relative; width: 100%; height: 100%; min-width: 900px; min-height: 380px;
background: repeating-linear-gradient(transparent 0 calc(25% - 1px), rgba(185, 169, 194, .12) calc(25% - 1px) 25%), radial-gradient(circle at 50% 60%, #3a2d42, #231a29); border-radius: 8px; }
#map-roads { position: absolute; inset: 0; width: 100%; height: 100%; }
#map-roads line { stroke: #b9a9c2; stroke-width: 2.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .7; }
#map-board button { position: absolute; transform: translate(-50%, -50%); font: clamp(6px, .82vw, 9px) var(--font); padding: .35em .45em;
#map-board button { position: absolute; transform: translate(-50%, -50%); font: 9px var(--font); padding: .35em .45em;
color: var(--bg); background: var(--ink); border: 2px solid #000; border-radius: 6px; cursor: pointer; white-space: nowrap; }
#map-board button:hover { background: var(--accent); }
#map-board button.here { color: var(--ink); background: #2f5fb3; cursor: default; }