Keyboard rows stacked and centred (not the header's flex row)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Anas Rashid 2026-10-08 21:14:40 +02:00
parent 4ef7de256c
commit 3e0e3a625d
2 changed files with 2 additions and 2 deletions

View File

@ -71,7 +71,7 @@ const fullTitle = title ? `${title} · دیوان` : 'دیوان · اردو ک
A:'آ', T:'ٹ', D:'ڈ', R:'ڑ', N:'ں', Z:'ذ', S:'ص', G:'غ', H:'ھ', K:'خ', C:'ث', V:'ظ', X:'ژ', J:'ض', I:'ئ', O:'ۂ', Y:'ؤ', A:'آ', T:'ٹ', D:'ڈ', R:'ڑ', N:'ں', Z:'ذ', S:'ص', G:'غ', H:'ھ', K:'خ', C:'ث', V:'ظ', X:'ژ', J:'ض', I:'ئ', O:'ۂ', Y:'ؤ',
',':'،', '.':'۔', '?':'؟', ';':'؛', ',':'،', '.':'۔', '?':'؟', ';':'؛',
}; };
const ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm', 'ATDRNZSGHKCVXJIOY', ',.?;']; const ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm', 'ATDRNZSGH', 'KCVXJIOY', ',.?;'];
const q = document.getElementById('q'), kb = document.getElementById('kb'), kbBtn = document.getElementById('kb-toggle'); const q = document.getElementById('q'), kb = document.getElementById('kb'), kbBtn = document.getElementById('kb-toggle');
const insert = (text) => { const insert = (text) => {
const s = q.selectionStart ?? q.value.length, e = q.selectionEnd ?? q.value.length; const s = q.selectionStart ?? q.value.length, e = q.selectionEnd ?? q.value.length;

View File

@ -111,7 +111,7 @@ h1 + .muted { text-align: center; margin-top: 0; }
#kb-toggle { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); display: flex; padding: 4px; border: 0; background: none; color: var(--muted, currentColor); opacity: .7; cursor: pointer; border-radius: 6px; } #kb-toggle { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); display: flex; padding: 4px; border: 0; background: none; color: var(--muted, currentColor); opacity: .7; cursor: pointer; border-radius: 6px; }
#kb-toggle:hover { opacity: 1; } #kb-toggle:hover { opacity: 1; }
#kb-toggle[aria-pressed='true'] { color: var(--brand); opacity: 1; } #kb-toggle[aria-pressed='true'] { color: var(--brand); opacity: 1; }
.kb { padding-bottom: 10px; } .site-header .kb:not([hidden]) { display: block; padding-bottom: 10px; } /* not the header's flex row */
.kb div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; } .kb div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.kb button { .kb button {
font-family: 'Noto Naskh Arabic', serif; font-size: 1.1rem; min-width: 2.4em; padding: 2px 6px; cursor: pointer; font-family: 'Noto Naskh Arabic', serif; font-size: 1.1rem; min-width: 2.4em; padding: 2px 6px; cursor: pointer;