Merge pull request 'Naskh weight slider in the display settings' (#101) from feature/naskh-weight into main

Reviewed-on: #101

web/src/layouts/Base.astro

@@ -1,6 +1,8 @@
 ---
 // fonts are self-hosted (no Google Fonts request; works with Brave Shields and offline)
 import '@fontsource/noto-naskh-arabic/400.css';
+import '@fontsource/noto-naskh-arabic/500.css';
+import '@fontsource/noto-naskh-arabic/600.css';
 import '@fontsource/noto-naskh-arabic/700.css';
 import '@fontsource/noto-nastaliq-urdu/400.css';
 import '@fontsource/noto-nastaliq-urdu/700.css';
@@ -52,6 +54,8 @@ import { siteUrl } from '../lib/site-url';
         const f = new URLSearchParams(location.search).get('font');
         if (f === 'nastaliq' || f === 'naskh') localStorage.setItem('divan-font', f);
         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 t = localStorage.getItem('divan-theme');
         if (t) document.documentElement.dataset.theme = t;
         const pal = localStorage.getItem('divan-palette'); // sepia when unset
@@ -90,6 +94,8 @@ import { siteUrl } from '../lib/site-url';
             <div class="display-panel">
               <p>خط</p>
               <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>
               <p>رنگ</p>
               <div class="swatches">
                 {[['', 'سپیا', '#fbf6ea', '#bf3f2a'], ['teal', 'فیروزی', '#e2f0ee', '#0b4f6c'], ['lapis', 'نیلگوں', '#e6ebf8', '#1d3b8b'],
@@ -181,10 +187,17 @@ import { siteUrl } from '../lib/site-url';
       const marks = () => {
         const on = { font: root.classList.contains('nastaliq') ? 'nastaliq' : 'naskh', palette: root.dataset.palette ?? '', theme: root.dataset.theme ?? '' };
         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
         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 ?? ''))));
       };
+      const weight = panel.querySelector('[data-weight]');
+      weight.addEventListener('input', () => {
+        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);
+      });
       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

@@ -63,6 +63,8 @@
 :root.nastaliq { --font: 'Libron', 'Noto Nastaliq Urdu', var(--font-ui); --verse-lh: 2.7; }
 
 * { 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); }
 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); }
@@ -563,6 +565,9 @@ h1 + .muted { text-align: center; margin-top: 0; }
 .display-panel p { margin: 6px 0 4px; color: var(--text-muted); font-size: .8rem; }
 .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: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; }
 .display-panel .swatches button { flex-direction: column; font-size: .7rem; padding: 4px 2px; }