Add text size and keyboard settings (#38)
Settings sets the text size (100, 125 or 150 %) and the key of each button, kept in this browser's storage and validated on load. Every font size scales with --text-scale, and the dialogue box scrolls instead of growing past the screen. The game screen's label, the Play message and Help's control list name the current keys. Screen reader announcements for every native screen and touch control remapping remain. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
samyandClaude Opus 5.5 committed
1 parent
29248172bd
commit
f289615bd2
10 files changed
+588
-41
No files matched your search
+83
-21
@@ -1,10 +1,11 @@
|
||||
:root {
|
||||
--text-scale: 1;
|
||||
font-family:
|
||||
"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
color: #282831;
|
||||
background: #d9e2dd;
|
||||
font-synthesis: none;
|
||||
font-size: 14px;
|
||||
font-size: calc(14px * var(--text-scale));
|
||||
line-height: 1.45;
|
||||
--cream: #fffbea;
|
||||
--cream-dark: #eee8ce;
|
||||
@@ -95,7 +96,7 @@ label:focus-within {
|
||||
gap: 12px;
|
||||
}
|
||||
.power {
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--text-scale));
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.power i {
|
||||
@@ -142,7 +143,7 @@ label:focus-within {
|
||||
border: 2px solid #566675;
|
||||
border-bottom: 0;
|
||||
color: #27394a;
|
||||
font-size: 12px;
|
||||
font-size: calc(12px * var(--text-scale));
|
||||
}
|
||||
.tabs button[aria-selected="true"] {
|
||||
position: relative;
|
||||
@@ -153,7 +154,7 @@ label:focus-within {
|
||||
}
|
||||
.tabs button span {
|
||||
margin-right: 5px;
|
||||
font-size: 9px;
|
||||
font-size: calc(9px * var(--text-scale));
|
||||
}
|
||||
.tab-panel {
|
||||
min-height: 0;
|
||||
@@ -203,7 +204,7 @@ label:focus-within {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: #c5dced;
|
||||
font-size: 9px;
|
||||
font-size: calc(9px * var(--text-scale));
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
@@ -234,7 +235,7 @@ label:focus-within {
|
||||
.menu-title {
|
||||
margin: 0 0 7px;
|
||||
color: var(--blue);
|
||||
font-size: 11px;
|
||||
font-size: calc(11px * var(--text-scale));
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
@@ -248,12 +249,12 @@ p {
|
||||
.menu-panel h2,
|
||||
dialog h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: clamp(17px, 2.5vw, 25px);
|
||||
font-size: calc(clamp(17px, 2.5vw, 25px) * var(--text-scale));
|
||||
line-height: 1.15;
|
||||
}
|
||||
.load-card > p:not(.menu-title) {
|
||||
margin: 7px 0 12px;
|
||||
font-size: 11px;
|
||||
font-size: calc(11px * var(--text-scale));
|
||||
}
|
||||
.primary-button,
|
||||
.menu-button {
|
||||
@@ -294,6 +295,9 @@ dialog h2 {
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
/* Large text never pushes the box above the screen; it scrolls. */
|
||||
max-height: calc(100% - 24px);
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
color: var(--ink);
|
||||
background: var(--cream);
|
||||
@@ -801,7 +805,7 @@ dialog h2 {
|
||||
max-width: 128px;
|
||||
margin: 3px 0 0;
|
||||
text-align: center;
|
||||
font-size: 8px;
|
||||
font-size: calc(8px * var(--text-scale));
|
||||
}
|
||||
|
||||
.controls {
|
||||
@@ -876,7 +880,7 @@ dialog h2 {
|
||||
}
|
||||
.system-keys .game-key {
|
||||
padding: 4px 7px;
|
||||
font-size: 8px;
|
||||
font-size: calc(8px * var(--text-scale));
|
||||
background: #6d7478;
|
||||
}
|
||||
|
||||
@@ -1006,7 +1010,7 @@ dialog h2 {
|
||||
}
|
||||
.atlas-legend {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-size: calc(12px * var(--text-scale));
|
||||
color: #5f6763;
|
||||
}
|
||||
.atlas-legend span {
|
||||
@@ -1033,7 +1037,7 @@ dialog h2 {
|
||||
}
|
||||
.planned-panel > p:last-child {
|
||||
max-width: 680px;
|
||||
font-size: 15px;
|
||||
font-size: calc(15px * var(--text-scale));
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@@ -1056,13 +1060,13 @@ dialog h2 {
|
||||
.status {
|
||||
grid-area: status;
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
font-size: calc(11px * var(--text-scale));
|
||||
}
|
||||
.game-notice {
|
||||
grid-area: notice;
|
||||
margin: 0;
|
||||
color: #b8d4e6;
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--text-scale));
|
||||
}
|
||||
.game-notice:empty {
|
||||
display: none;
|
||||
@@ -1073,7 +1077,7 @@ dialog h2 {
|
||||
max-width: 280px;
|
||||
text-align: right;
|
||||
color: #b8c7ce;
|
||||
font-size: 9px;
|
||||
font-size: calc(9px * var(--text-scale));
|
||||
}
|
||||
.error {
|
||||
color: #ffb0a1 !important;
|
||||
@@ -1101,10 +1105,68 @@ dialog dl {
|
||||
dialog dd {
|
||||
margin: 0;
|
||||
}
|
||||
/* Read by screen readers, not shown. */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Settings: text size choices and the key table. */
|
||||
#settings-dialog {
|
||||
max-height: calc(100% - 24px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.text-size {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 18px;
|
||||
margin: 0 0 18px;
|
||||
padding: 10px 12px;
|
||||
border: 2px solid var(--ink);
|
||||
}
|
||||
.text-size label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 32px;
|
||||
}
|
||||
.key-settings h3 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.key-settings table {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.key-settings th,
|
||||
.key-settings td {
|
||||
padding: 4px 6px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--cream-dark);
|
||||
}
|
||||
.key-settings td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
.key-settings td button {
|
||||
min-height: 32px;
|
||||
padding: 2px 10px;
|
||||
font: inherit;
|
||||
color: var(--ink);
|
||||
background: var(--cream-dark);
|
||||
border: 2px solid var(--ink);
|
||||
}
|
||||
.settings-status {
|
||||
min-height: 1.5em;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
.dialog-close {
|
||||
float: right;
|
||||
background: transparent;
|
||||
font-size: 22px;
|
||||
font-size: calc(22px * var(--text-scale));
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@@ -1117,7 +1179,7 @@ dialog dd {
|
||||
.tabs button {
|
||||
min-width: 83px;
|
||||
padding: 6px 9px;
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--text-scale));
|
||||
}
|
||||
.console {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -1177,7 +1239,7 @@ dialog dd {
|
||||
box-shadow: 3px 3px 0 #2d6685;
|
||||
}
|
||||
.load-card h1 {
|
||||
font-size: 16px;
|
||||
font-size: calc(16px * var(--text-scale));
|
||||
}
|
||||
.minimap-overlay {
|
||||
top: 4px;
|
||||
@@ -1195,10 +1257,10 @@ dialog dd {
|
||||
padding-block: 4px;
|
||||
}
|
||||
.status {
|
||||
font-size: 9px;
|
||||
font-size: calc(9px * var(--text-scale));
|
||||
}
|
||||
.save-status {
|
||||
font-size: 8px;
|
||||
font-size: calc(8px * var(--text-scale));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1598,7 +1660,7 @@ dialog dd {
|
||||
}
|
||||
.pokedex-tab-status {
|
||||
max-width: 680px;
|
||||
font-size: 15px;
|
||||
font-size: calc(15px * var(--text-scale));
|
||||
line-height: 1.8;
|
||||
}
|
||||
.pokedex-tab-body {
|
||||
|
||||
Reference in new issue
Block a user