diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 11 |
1 files changed, 6 insertions, 5 deletions
diff --git a/src/style.css b/src/style.css index d9f202e..06ba80c 100644 --- a/src/style.css +++ b/src/style.css @@ -262,10 +262,11 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si .addr-check .hl { color: var(--ink); font-weight: 700; } /* ---- mnemonic grid ---- */ -/* Words run DOWN a column, then the next — the way a hand copies a list — - so on a phone (two columns) the first column is 1–6, not 1,3,5,…; the row - count comes from the word count (--rows-3 / --rows-2, set inline). */ -.words { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows-3, 4), auto); grid-auto-columns: 1fr; gap: 8px; } +/* Three columns read ACROSS — 1 2 3 on the first line, 4 5 6 on the next — + the way a printed sheet is read. Two columns (a phone) run DOWN instead, + the way a hand copies a list: the first column is 1–6, not 1,3,5,…; that + row count comes from the word count (--rows-2, set inline). */ +.words { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 8px; } .words .w { display: flex; align-items: baseline; gap: 7px; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: var(--mono); @@ -377,7 +378,7 @@ hr.divider { margin: 16px 0; } /* ---- how it works ---- */ @media (max-width: 420px) { - .words { grid-template-rows: repeat(var(--rows-2, 6), auto); } + .words { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 1fr; grid-template-rows: repeat(var(--rows-2, 6), auto); } .balance .amt { font-size: 28px; } } |