From cc797fd2626138db62ff4339e4c26959c71b413b Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Sat, 10 Oct 2026 01:17:45 +0200 Subject: [PATCH 1/3] Switching to Nastaliq shows a short note that it is for the text and the rest of the site stays Naskh Co-Authored-By: Claude Opus 5.5 --- web/src/layouts/Base.astro | 6 +++++- web/src/styles/global.css | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro index c2641dfb..bb1e05ea 100644 --- a/web/src/layouts/Base.astro +++ b/web/src/layouts/Base.astro @@ -210,7 +210,11 @@ import { siteUrl } from '../lib/site-url'; }); 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); } + if (b.dataset.font) { + // switching to Nastaliq: a short note that it is for the text (the interface stays Naskh, by design) + if (b.dataset.font === 'nastaliq' && !root.classList.contains('nastaliq')) toast('نستعلیق صرف کلام اور متن پر؛ باقی سائٹ نسخ میں رہتی ہے', 'info'); + root.classList.toggle('nastaliq', b.dataset.font === 'nastaliq'); store('divan-font', b.dataset.font); + } if (b.dataset.palette != null) { if (b.dataset.palette) root.dataset.palette = b.dataset.palette; else delete root.dataset.palette; store('divan-palette', b.dataset.palette); } if (b.dataset.digits != null) { // numerals: a cookie, so the server sends pages with them; switching back to Eastern reloads the page diff --git a/web/src/styles/global.css b/web/src/styles/global.css index c65f15df..67ad5665 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -684,6 +684,7 @@ h1 + .muted { text-align: center; margin-top: 0; } font: var(--fs-sm)/1.8 var(--font-ui); animation: toast-in .25s ease-out; } .toast::before { content: '✓ '; color: var(--ok); font-weight: 700; } .toast.error::before { content: '! '; color: var(--danger); } +.toast.info::before { content: 'ⓘ '; color: var(--accent); } .toast.out { animation: toast-out .3s ease-in forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(14px); } } @keyframes toast-out { to { opacity: 0; transform: translateY(14px); } } From 07e85d7a5406790290497e399e06a706dbaacde9 Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Sat, 10 Oct 2026 01:18:33 +0200 Subject: [PATCH 2/3] Nastaliq titles: more line height and space above, so tall letters no longer reach into the path line Co-Authored-By: Claude Opus 5.5 --- web/src/styles/global.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/src/styles/global.css b/web/src/styles/global.css index 67ad5665..e086f78c 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -115,6 +115,8 @@ body { margin: 0; background: var(--surface-page); color: var(--text); font-fami main { padding: 16px 0 48px; } h1, h2 { line-height: 1.6; margin: .2em 0 .4em; font-weight: 700; text-align: center; color: var(--heading); } h1 { font-size: clamp(1.3rem, 5vw, var(--fs-2xl)); } +/* Nastaliq titles: its tall letters (ک، گ، ط) and deep descents need room, or they reach into the path line above */ +:root.nastaliq h1.lit { line-height: 2.4; margin-top: .6em; } h1::after { content: ''; display: block; width: 140px; height: 2px; background: var(--brand); margin: 8px auto 0; } /* Ganjoor's gold pill headings and links (.century / .part-title-block) */ From c8f5459ad70ca6bbb23b1f8cf95876247f87e25b Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Sat, 10 Oct 2026 01:19:26 +0200 Subject: [PATCH 3/3] Display settings: both sliders the same length (labels share one width) Co-Authored-By: Claude Opus 5.5 --- web/src/styles/global.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/styles/global.css b/web/src/styles/global.css index e086f78c..ff811a30 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -580,9 +580,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 { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: .8rem; color: var(--text-muted); } /* the same label width, so both sliders are the same length */ .display-panel .weight span { white-space: nowrap; } -.display-panel .weight input { flex: 1; min-width: 0; accent-color: var(--action); } +.display-panel .weight input { width: 100%; min-width: 0; margin: 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; }