From a5a6834a3741385476f3f4ed18fa140640af7db3 Mon Sep 17 00:00:00 2001 From: Andrea Manzi Date: Fri, 23 Oct 2026 20:59:23 +0200 Subject: [PATCH] Carattere a pixel Press Start 2P (OFL) in tutto il gioco; Tozzino nei crediti MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Il carattere è dentro il gioco (assets/fonts, con la licenza); testi ridotti e senza grassetti finti. - Mappa con etichette più piccole, crediti con un nome per riga, verbi sopra l'inventario sul telefono (la prova nel browser controlla che nessun verbo sia tagliato). - Crediti: Tozzino (Francesco Tozzi) fra le idee, il carattere fra i ringraziamenti. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_017egeN2amL84ErjfgQFtEDn --- Dockerfile | 1 + assets/fonts/OFL-press-start-2p.txt | 93 ++++++++++++++++++++ assets/fonts/press-start-2p-latin-ext.woff2 | Bin 0 -> 9856 bytes assets/fonts/press-start-2p-latin.woff2 | Bin 0 -> 12512 bytes src/main.js | 2 +- src/story/story.js | 3 +- style.css | 67 ++++++++------ tests/browser.mjs | 2 + 8 files changed, 140 insertions(+), 28 deletions(-) create mode 100644 assets/fonts/OFL-press-start-2p.txt create mode 100644 assets/fonts/press-start-2p-latin-ext.woff2 create mode 100644 assets/fonts/press-start-2p-latin.woff2 diff --git a/Dockerfile b/Dockerfile index 7340d81..eacd705 100644 --- a/Dockerfile +++ b/Dockerfile @@ -8,6 +8,7 @@ COPY assets/scenes /usr/share/nginx/html/assets/scenes COPY assets/characters /usr/share/nginx/html/assets/characters COPY assets/audio /usr/share/nginx/html/assets/audio COPY assets/icons /usr/share/nginx/html/assets/icons +COPY assets/fonts /usr/share/nginx/html/assets/fonts COPY assets/voices /usr/share/nginx/html/assets/voices EXPOSE 80 diff --git a/assets/fonts/OFL-press-start-2p.txt b/assets/fonts/OFL-press-start-2p.txt new file mode 100644 index 0000000..5891186 --- /dev/null +++ b/assets/fonts/OFL-press-start-2p.txt @@ -0,0 +1,93 @@ +Copyright 2012 The Press Start 2P Project Authors (cody@zone38.net), with Reserved Font Name "Press Start 2P" + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/assets/fonts/press-start-2p-latin-ext.woff2 b/assets/fonts/press-start-2p-latin-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..0919c5f6e63d1a668f5b9b051f922de1652a71e1 GIT binary patch literal 9856 zcmV-`CV$y?Pew8T0RR91049I{5C8xG0DlYs045>;0RR9100000000000000000000 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 literal 0 HcmV?d00001 diff --git a/assets/fonts/press-start-2p-latin.woff2 b/assets/fonts/press-start-2p-latin.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..947a9792df962367ce85b81182fdb07be1eaced1 GIT binary patch literal 12512 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 literal 0 HcmV?d00001 diff --git a/src/main.js b/src/main.js index 9331bc4..a474dd7 100644 --- a/src/main.js +++ b/src/main.js @@ -75,7 +75,7 @@ $('skip-intro').addEventListener('click', () => { introLine = story.intro.length $('credits-list').replaceChildren(...(story.credits ?? []).flatMap(({ role, names }) => { const dt = document.createElement('dt'), dd = document.createElement('dd'); dt.textContent = role; - dd.textContent = names.join(' · '); + dd.replaceChildren(...names.map(n => Object.assign(document.createElement('span'), { textContent: n }))); return [dt, dd]; })); for (const b of document.querySelectorAll('.open-credits')) b.addEventListener('click', () => { $('credits').hidden = false; }); diff --git a/src/story/story.js b/src/story/story.js index a9b0e03..95e77ff 100644 --- a/src/story/story.js +++ b/src/story/story.js @@ -20,13 +20,14 @@ export const story = { // I crediti, schermata «Crediti» dal titolo e dalla fine: un ruolo e chi l'ha fatto. Arriveranno man mano. credits: [ { role: 'Un gioco di', names: ['Andrea Manzi «Manzolo»'] }, - { role: 'Idee e consigli', names: ['Yuri Baldi', 'BaronDeDuke (Gabriele Rossi)'] }, + { role: 'Idee e consigli', names: ['Yuri Baldi', 'BaronDeDuke (Gabriele Rossi)', 'Tozzino (Francesco Tozzi)'] }, { role: 'Storia e aneddoti di San Piero', names: ['Francesco Bacci'] }, { role: 'Musica', names: ['Andrea Manzi, con Suno'] }, { role: 'Sfondi', names: ['dalle fotografie di San Piero di Andrea'] }, // Chi ci ha mandato foto, ricordi o idee: una riga per contributo, si allunga man mano. { role: 'Fotografie', names: ['Mariano Mirannalti (l\'interno della Pieve)'] }, { role: 'Voci', names: ['XTTS-v2 di Coqui'] }, + { role: 'Carattere', names: ['Press Start 2P di CodeMan38 (licenza OFL)'] }, { role: 'Programmazione', names: ['Andrea Manzi, con Claude e Codex'] }, ], characters: { diff --git a/style.css b/style.css index 96bf3f4..9405b89 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,7 @@ +@font-face { font-family: "Press Start 2P"; src: url(assets/fonts/press-start-2p-latin.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } +@font-face { font-family: "Press Start 2P"; src: url(assets/fonts/press-start-2p-latin-ext.woff2) format("woff2"); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } :root { --bg: #1b1420; --panel: #2a2030; @@ -5,11 +9,16 @@ --dim: #b9a9c2; --accent: #ffd27a; --blue: #6fa8ff; - --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; + /* Carattere a pixel stile anni '80 (Press Start 2P, licenza OFL: assets/fonts/OFL-press-start-2p.txt). */ + --font: "Press Start 2P", "Courier New", monospace; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); } +/* Il carattere a pixel ha un solo spessore: niente grassetti o corsivi finti, che lo sfocano. */ +* { font-synthesis: none; font-variant-ligatures: none; } +button, input { font-family: var(--font); } +body { line-height: 1.5; } body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } #app { width: min(100vw, 1280px, calc((100dvh - 250px) * 16 / 9)); min-width: min(100vw, 320px); margin-block: auto; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } @@ -17,37 +26,37 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h #scene { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; } #speech { position: absolute; left: 0; top: 0; max-width: 46%; transform: translate(-50%, -100%); pointer-events: none; - font-size: clamp(14px, 2.3vw, 26px); font-weight: bold; line-height: 1.2; text-align: center; + font-size: clamp(10.08px, 1.66vw, 18.72px); font-weight: bold; line-height: 1.2; text-align: center; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000; } #speech:empty { display: none; } /* Musica: nota per il muto e cursore del volume, in alto a destra sopra la scena (anche sul titolo). */ #sound { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; background: rgba(27, 20, 32, .62); border-radius: 18px; } -#mute { width: 30px; height: 30px; padding: 0; font: bold 18px var(--font); color: var(--accent); background: none; border: 0; cursor: pointer; } +#mute { width: 30px; height: 30px; padding: 0; font: bold 12.96px var(--font); color: var(--accent); background: none; border: 0; cursor: pointer; } #mute[aria-pressed="true"] { color: var(--dim); text-decoration: line-through; } #volume { width: clamp(60px, 10vw, 110px); accent-color: var(--accent); cursor: pointer; } -#sentence { min-height: 1.8em; padding: .25em .6em; text-align: center; color: var(--blue); font-size: clamp(15px, 2vw, 22px); font-weight: bold; background: var(--panel); } +#sentence { min-height: 1.8em; padding: .25em .6em; text-align: center; color: var(--blue); font-size: clamp(10.8px, 1.44vw, 15.84px); font-weight: bold; background: var(--panel); } #panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; padding: 8px; background: var(--panel); } /* Otto verbi su due righe piene, quattro per riga. */ #verbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-content: start; } #verbs button, #inventory button { font: inherit; color: var(--dim); background: #3a2d42; border: 2px solid #4b3a55; border-radius: 4px; - padding: .35em .2em; font-size: clamp(13px, 1.7vw, 19px); font-weight: bold; cursor: pointer; } + padding: .35em .2em; font-size: clamp(9.36px, 1.22vw, 13.68px); font-weight: bold; cursor: pointer; } #verbs button:hover, #inventory button:hover { color: var(--ink); } #verbs button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); } #inventory { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(2.4em, auto); gap: 4px; align-content: start; min-height: 5.4em; padding: 4px; background: #231a29; border: 2px solid #4b3a55; border-radius: 4px; } #inventory:empty::before { content: 'Inventario'; grid-column: 1 / -1; align-self: center; text-align: center; color: var(--dim); opacity: .45; - font-size: clamp(13px, 1.7vw, 19px); font-weight: bold; letter-spacing: .08em; } + font-size: clamp(9.36px, 1.22vw, 13.68px); font-weight: bold; letter-spacing: .08em; } #inventory button { display: flex; align-items: center; gap: .35em; justify-content: center; color: var(--ink); } #inventory button[aria-pressed="true"] { border-color: var(--accent); } #inventory i { width: .8em; height: .8em; border-radius: 50% 50% 50% 0; flex: none; } #inventory img { width: 1.9em; height: 1.9em; flex: none; image-rendering: pixelated; } #choices { margin: 0; padding: 10px 14px 12px 2.4em; background: var(--panel); min-height: 9.5em; } -#choices li { padding: .25em 0; font-size: clamp(15px, 2vw, 22px); font-weight: bold; color: var(--dim); cursor: pointer; } +#choices li { padding: .25em 0; font-size: clamp(10.8px, 1.44vw, 15.84px); font-weight: bold; color: var(--dim); cursor: pointer; } #choices li:hover, #choices li:focus { color: var(--accent); outline: none; } .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; @@ -61,10 +70,10 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h #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: linear-gradient(rgba(20, 12, 30, .6), rgba(20, 12, 30, .1) 55%), url(assets/scenes/panorama-intro.png) center / cover, #2a2030; } -#intro-text { min-height: 4.2em; max-width: 30em; font-size: clamp(16px, 2.6vw, 30px); font-weight: bold; line-height: 1.3; color: var(--ink); +#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; color: var(--dim); font-size: clamp(12px, 1.5vw, 16px); text-shadow: 1px 1px 0 #000; } -#skip-intro { position: absolute; right: 10px; bottom: 10px; font: bold 14px var(--font); padding: .3em .9em; border-radius: 6px; border: 0; +#intro .hint { margin-top: auto; color: var(--dim); font-size: clamp(8.64px, 1.08vw, 11.52px); text-shadow: 1px 1px 0 #000; } +#skip-intro { position: absolute; right: 10px; bottom: 10px; font: bold 10.08px var(--font); padding: .3em .9em; border-radius: 6px; border: 0; color: var(--bg); background: var(--dim); cursor: pointer; } @keyframes appear { from { opacity: 0; transform: translateY(6px); } } /* Cartello d'apertura «Manzolo (Poca) Art Presents»: le parole entrano una alla volta, il «(Poca)» cade dall'alto @@ -72,24 +81,24 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h #splash { z-index: 3; gap: .15em; cursor: pointer; background: radial-gradient(circle at 50% 45%, #2a2030, #0d0910 70%); animation: splash-out .7s ease-in 4.3s 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(34px, 8vw, 88px); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); +#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; } -#splash .splash-art { font-size: clamp(22px, 4.5vw, 50px); color: var(--accent); animation: splash-in .9s ease-out 1s forwards; } +#splash .splash-art { font-size: clamp(15.84px, 3.24vw, 36px); color: var(--accent); animation: splash-in .9s ease-out 1s forwards; } #splash .splash-art span { display: inline-block; font-size: .7em; font-style: italic; color: #7fe08a; opacity: 0; animation: splash-poca .45s cubic-bezier(.3, 1.6, .6, 1) 1.9s forwards; } -#splash .splash-present { font-size: clamp(14px, 2.4vw, 26px); letter-spacing: .5em; text-transform: uppercase; color: var(--dim); +#splash .splash-present { font-size: clamp(10.08px, 1.73vw, 18.72px); letter-spacing: .5em; text-transform: uppercase; color: var(--dim); animation: splash-in .9s ease-out 2.6s forwards; } @keyframes splash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes splash-poca { from { opacity: 0; transform: translateY(-1.5em) rotate(-8deg) scale(1.8); } to { opacity: 1; transform: rotate(-8deg); } } @keyframes splash-out { to { opacity: 0; } } -.overlay h1 { margin: 0; font-size: clamp(30px, 7vw, 76px); line-height: 1; letter-spacing: .02em; color: var(--ink); text-shadow: 3px 3px 0 #000; } +.overlay h1 { margin: 0; font-size: clamp(21.6px, 5.04vw, 54.72px); line-height: 1; letter-spacing: .02em; color: var(--ink); text-shadow: 3px 3px 0 #000; } .overlay h1 span { color: #7fe08a; } -.overlay h2 { margin: 0; font-size: clamp(24px, 5vw, 52px); color: var(--accent); } -.overlay p { margin: 0; max-width: 34em; font-size: clamp(13px, 2vw, 20px); } +.overlay h2 { margin: 0; font-size: clamp(17.28px, 3.6vw, 37.44px); color: var(--accent); } +.overlay p { margin: 0; max-width: 34em; font-size: clamp(9.36px, 1.44vw, 14.4px); } .subtitle { color: var(--dim); } .dedication { margin-top: .8em !important; font-style: italic; color: var(--accent); } .buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: .4em; } -.buttons button { font: inherit; font-weight: bold; font-size: clamp(15px, 2.2vw, 22px); padding: .45em 1.2em; border-radius: 6px; cursor: pointer; +.buttons button { font: inherit; font-weight: bold; font-size: clamp(10.8px, 1.58vw, 15.84px); padding: .45em 1.2em; border-radius: 6px; cursor: pointer; color: var(--bg); background: var(--accent); border: 0; } #continue { background: #7fe08a; } .buttons button.secondary { color: var(--ink); background: rgba(42, 32, 48, .85); box-shadow: inset 0 0 0 2px var(--dim); } @@ -97,43 +106,49 @@ 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(12px, 1.6vw, 16px) var(--font); padding: .35em .8em; +#map-button, #pause-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(18px, 3vw, 32px); } +#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; 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: bold clamp(10px, 1.5vw, 15px) var(--font); padding: .3em .6em; +#map-board button { position: absolute; transform: translate(-50%, -50%); font: clamp(6px, .82vw, 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; } #map-board button.here::after { content: ' · sei qui'; font-weight: normal; } /* I crediti crescono con chi contribuisce: scorre solo l'elenco, dedica e Chiudi restano sempre in vista. */ #credits { z-index: 3; justify-content: flex-start; overflow: hidden; padding-top: 4%; background: rgba(15, 10, 20, .96); } -#credits .credits-dedication { margin: .2em 0 .5em !important; font-size: clamp(16px, 2.6vw, 28px); } +#credits .credits-dedication { margin: .2em 0 .5em !important; font-size: clamp(10px, 1.6vw, 17px); } /* Due colonne: il ruolo a destra della sua colonna, il nome a sinistra della sua, allineati sulla riga. */ #credits dl { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding-right: .4em; margin: .2em 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1em; row-gap: .45em; align-items: baseline; width: min(100%, 44em); } -#credits dt { text-align: right; color: var(--dim); font-size: clamp(10px, 1.4vw, 14px); letter-spacing: .12em; text-transform: uppercase; } -#credits dd { margin: 0; text-align: left; color: var(--ink); font-size: clamp(13px, 2vw, 20px); font-weight: bold; } -#credits .legal { color: var(--dim); font-size: clamp(10px, 1.2vw, 13px); opacity: .8; } +#credits dt { text-align: right; color: var(--dim); font-size: clamp(7.2px, 1.01vw, 10.08px); letter-spacing: .12em; text-transform: uppercase; } +#credits dd span { display: block; } +#credits dd { margin: 0; text-align: left; color: var(--ink); font-size: clamp(8px, 1.15vw, 12px); line-height: 1.6; font-weight: bold; } +#credits .legal { color: var(--dim); font-size: clamp(7.2px, 0.86vw, 9.36px); opacity: .8; } #rotate { display: none; padding: 1em; text-align: center; color: var(--dim); } @media (orientation: portrait) and (max-width: 700px) { #rotate { display: block; } } +/* Schermi stretti: il carattere a pixel è largo, i verbi vanno sopra l'inventario e su due righe da quattro. */ +@media (max-width: 600px) { + #panel { grid-template-columns: 1fr; gap: 6px; padding: 6px; } + #verbs button { font-size: 9px; padding: .7em .1em; } +} /* Telefono in orizzontale: la scena prende tutta l'altezza, verbi e inventario vanno di lato. */ @media (orientation: landscape) and (max-height: 520px) { #app { width: 100vw; flex-direction: row; } #stage { flex: none; width: min(calc(100dvh * 16 / 9), 68vw); align-self: flex-start; } #side { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--panel); } - #sentence { font-size: 14px; } + #sentence { font-size: 10.08px; } #panel { grid-template-columns: 1fr; gap: 6px; padding: 6px; } #inventory { grid-template-columns: repeat(2, 1fr); min-height: 0; } - #verbs button, #inventory button, #choices li { font-size: 14px; } + #verbs button, #inventory button, #choices li { font-size: 10.08px; } #choices { min-height: 0; padding: 6px 8px 6px 2em; } } diff --git a/tests/browser.mjs b/tests/browser.mjs index 659eb87..9f6f7f9 100644 --- a/tests/browser.mjs +++ b/tests/browser.mjs @@ -172,6 +172,8 @@ try { await phone.click('#skip-intro'); await settle(phone); const overflow = await phone.evaluate(() => document.documentElement.scrollWidth > innerWidth); + // Ogni verbo si vede tutto: niente pulsanti tagliati dall'inventario. + assert.ok(await phone.evaluate(() => [...document.querySelectorAll('#verbs button')].every(b => b.scrollWidth <= b.clientWidth + 1 && b.getBoundingClientRect().right <= innerWidth)), 'verbi tagliati sul telefono'); assert.equal(overflow, false, 'scorrimento orizzontale su telefono'); await phone.screenshot({ path: `${OUT}/08-telefono.png` }); const landscape = await open({ width: 844, height: 390 });