anas/divan
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Display settings: text size slider (90%-150%) beside Naskh's weight; the whole page scales, remembered, applied before paint

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Anas Rashid 2026-10-10 00:58:01 +02:00
parent 77c07c1552
commit 61321b5130
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/layouts/Base.astro
View File

@ -56,6 +56,8 @@ import { siteUrl } from '../lib/site-url';
if (localStorage.getItem('divan-font') === 'nastaliq') document.documentElement.classList.add('nastaliq');
const w = localStorage.getItem('divan-weight'); // Naskh's weight (400-700), heavier for small screens
if (w) document.documentElement.style.setProperty('--naskh-weight', w);
const z = localStorage.getItem('divan-size'); // text size in % (100 by default), every page scales with it
if (z) document.documentElement.style.setProperty('--text-size', z + '%');
const t = localStorage.getItem('divan-theme');
if (t) document.documentElement.dataset.theme = t;
const pal = localStorage.getItem('divan-palette'); // sepia when unset
@ -96,6 +98,8 @@ import { siteUrl } from '../lib/site-url';
<div class="seg"><button type="button" data-font="naskh">نسخ</button><button type="button" data-font="nastaliq" class="f-nastaliq">نستعلیق</button></div>
<label class="weight"><span>نسخ کی موٹائی</span>
<input type="range" min="400" max="700" step="100" value="400" data-weight aria-label="نسخ کی موٹائی" /></label>
<label class="weight"><span>حروف کا سائز</span>
<input type="range" min="90" max="150" step="10" value="100" data-size aria-label="حروف کا سائز" /></label>
<p>رنگ</p>
<div class="swatches">
{[['', 'سپیا', '#fbf6ea', '#bf3f2a'], ['teal', 'فیروزی', '#e2f0ee', '#0b4f6c'], ['lapis', 'نیلگوں', '#e6ebf8', '#1d3b8b'],
@ -189,6 +193,7 @@ import { siteUrl } from '../lib/site-url';
panel.querySelectorAll('[data-font]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.font === on.font)));
weight.value = root.style.getPropertyValue('--naskh-weight') || '400';
weight.disabled = on.font === 'nastaliq'; // Nastaliq comes in regular and bold only
size.value = parseInt(root.style.getPropertyValue('--text-size')) || '100';
panel.querySelectorAll('[data-palette]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.palette === on.palette)));
panel.querySelectorAll('[data-theme-pick]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.themePick === on.theme)));
panel.querySelectorAll('[data-digits]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.digits === (root.dataset.digits ?? ''))));
@ -198,6 +203,11 @@ import { siteUrl } from '../lib/site-url';
if (weight.value === '400') root.style.removeProperty('--naskh-weight'); else root.style.setProperty('--naskh-weight', weight.value);
store('divan-weight', weight.value === '400' ? '' : weight.value);
});
const size = panel.querySelector('[data-size]');
size.addEventListener('input', () => {
if (size.value === '100') root.style.removeProperty('--text-size'); else root.style.setProperty('--text-size', size.value + '%');
store('divan-size', size.value === '100' ? '' : size.value);
});
panel.addEventListener('click', (e) => {
const b = e.target.closest('button'); if (!b) return;
if (b.dataset.font) { root.classList.toggle('nastaliq', b.dataset.font === 'nastaliq'); store('divan-font', b.dataset.font); }

5
web/src/styles/global.css
View File

@ -65,6 +65,8 @@
* { box-sizing: border-box; }
/* Naskh's weight from the display settings (400 by default; heavier reads better on small screens) */
:root:not(.nastaliq) body { font-weight: var(--naskh-weight, 400); }
/* text size from the display settings: everything is in rem, so the whole page scales (90%-150%) */
html { font-size: var(--text-size, 100%); }
body { margin: 0; background: var(--surface-page); color: var(--text); font-family: var(--font); line-height: 1.9; }
:where(a) { color: var(--link); text-decoration: none; }
:where(a):hover { color: var(--active); }
@ -566,7 +568,8 @@ h1 + .muted { text-align: center; margin-top: 0; }
.display-panel .seg { display: flex; gap: 4px; }
.display-panel button { flex: 1; gap: 4px; padding: 2px 6px; border-radius: var(--r-md); }
.display-panel .weight { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: .8rem; color: var(--text-muted); }
.display-panel .weight input { flex: 1; accent-color: var(--action); }
.display-panel .weight span { white-space: nowrap; }
.display-panel .weight input { flex: 1; min-width: 0; accent-color: var(--action); }
.display-panel .weight:has(input:disabled) { opacity: .5; }
.display-panel .f-nastaliq { font-family: 'Noto Nastaliq Urdu', serif; line-height: 2.2; }
.display-panel .swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }