Compare commits
No commits in common. "0694a2ed4f8f67bde0b4b8353e2af7676c11ac90" and "586f49f83613dddc42f8f26cbb1dc731300bb707" have entirely different histories.
0694a2ed4f
...
586f49f836
@ -1,8 +1,6 @@
|
||||
---
|
||||
// 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';
|
||||
@ -54,8 +52,6 @@ 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
|
||||
@ -94,8 +90,6 @@ 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'],
|
||||
@ -187,17 +181,10 @@ 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); }
|
||||
|
||||
@ -63,8 +63,6 @@
|
||||
: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); }
|
||||
@ -565,9 +563,6 @@ 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; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user