From 3e0e3a625d804b53a086fef350d3bd06b2962229 Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Thu, 8 Oct 2026 21:14:40 +0200 Subject: [PATCH] Keyboard rows stacked and centred (not the header's flex row) Co-Authored-By: Claude Opus 5.5 --- web/src/layouts/Base.astro | 2 +- web/src/styles/global.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro index 620dee79..03da5821 100644 --- a/web/src/layouts/Base.astro +++ b/web/src/layouts/Base.astro @@ -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:'ؤ', ',':'،', '.':'۔', '?':'؟', ';':'؛', }; - 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 insert = (text) => { const s = q.selectionStart ?? q.value.length, e = q.selectionEnd ?? q.value.length; diff --git a/web/src/styles/global.css b/web/src/styles/global.css index c23be2ea..7e3b63f4 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -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:hover { 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 button { font-family: 'Noto Naskh Arabic', serif; font-size: 1.1rem; min-width: 2.4em; padding: 2px 6px; cursor: pointer;