diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 7 |
1 files changed, 5 insertions, 2 deletions
diff --git a/src/style.css b/src/style.css index 8cdd92d..36698ae 100644 --- a/src/style.css +++ b/src/style.css @@ -254,7 +254,10 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si .addr-check .hl { color: var(--ink); font-weight: 700; } /* ---- mnemonic grid ---- */ -.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } +/* 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; } .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); @@ -366,7 +369,7 @@ hr.divider { margin: 16px 0; } /* ---- how it works ---- */ @media (max-width: 420px) { - .words { grid-template-columns: repeat(2, 1fr); } + .words { grid-template-rows: repeat(var(--rows-2, 6), auto); } .balance .amt { font-size: 28px; } } |