Merge pull request 'Text size slider in the display settings' (#104) from feature/text-size into main

Reviewed-on: #104

web/src/layouts/Base.astro

@@ -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); }

web/src/styles/global.css

@@ -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; }