Scale the dialogue text with the game screen (#68)
The text is about 2.2% of the screen width (15 to 40 px), multiplied by the text-size setting, and its area is no longer capped at 120 px. Closes #68 [no-card] Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
525ff092f2
commit
3da669a52e
1 file changed
+7
-1
+7
-1
@@ -199,6 +199,8 @@ label:focus-within {
|
|||||||
border: 4px double #080b10;
|
border: 4px double #080b10;
|
||||||
}
|
}
|
||||||
.screen {
|
.screen {
|
||||||
|
/* Lets the dialogue text size follow the width of the game screen. */
|
||||||
|
container-type: inline-size;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
@@ -318,7 +320,11 @@ dialog h2 {
|
|||||||
box-shadow: 4px 4px 0 #0007;
|
box-shadow: 4px 4px 0 #0007;
|
||||||
}
|
}
|
||||||
.native-dialogue p {
|
.native-dialogue p {
|
||||||
max-height: 120px;
|
/* The box is wide and the ROM's lines are 18 characters, so the text scales
|
||||||
|
with the screen; the text-size setting multiplies it. */
|
||||||
|
font-size: calc(clamp(15px, 2.2cqw, 40px) * var(--text-scale));
|
||||||
|
line-height: 1.4;
|
||||||
|
max-height: 7em;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
|
|||||||
Reference in new issue
Block a user