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

Header: font list in Naskh at a fixed height (Nastaliq spilled out in Safari); the ع is laid over the book icon as text (Safari drew the SVG text too large)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Anas Rashid 2026-10-09 15:29:27 +02:00
parent 70e44f705d
commit a37ba82829
3 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/Icon.astro
View File

@ -6,8 +6,8 @@ const PATHS = {
admin: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
edit: '<path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/>',
bookmark: '<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>',
// the word book: a book with the letter ع (an Urdu letter, not a Latin A)
words: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><text x="12.4" y="14.6" text-anchor="middle" font-size="15" font-weight="700" font-family="Noto Naskh Arabic, serif" fill="currentColor" stroke="none">ع</text>',
// the word book: a book; the letter ع is laid over it as text (.glyph-icon), which every browser draws the same
words: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>',
user: '<circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/>',
login: '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><path d="m10 17 5-5-5-5"/><path d="M15 12H3"/>',
logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/>',

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

@ -48,12 +48,12 @@ import Icon from '../components/Icon.astro';
{Astro.locals.user?.role === 'admin' && <a class="icon-btn" href="/admin" title="ایڈمن" aria-label="ایڈمن"><Icon name="admin" /></a>}
{['mod-l2', 'mod-l1', 'admin'].includes(Astro.locals.user?.role ?? '') && <a class="icon-btn" href="/mod" title="موڈریشن" aria-label="موڈریشن"><Icon name="edit" /></a>}
{Astro.locals.user && <a class="icon-btn" href="/library" title="محفوظ شدہ" aria-label="محفوظ شدہ"><Icon name="bookmark" /></a>}
{Astro.locals.user && <a class="icon-btn" href="/words" title="ذخیرۂ الفاظ" aria-label="ذخیرۂ الفاظ"><Icon name="words" /></a>}
{Astro.locals.user && <a class="icon-btn" href="/words" title="ذخیرۂ الفاظ" aria-label="ذخیرۂ الفاظ"><span class="glyph-icon"><Icon name="words" /><span aria-hidden="true">ع</span></span></a>}
{Astro.locals.user
? <a class="icon-btn" href="/account" title={`اکاؤنٹ: ${Astro.locals.user.full_name || Astro.locals.user.email}`} aria-label="اکاؤنٹ"><Icon name="user" /></a>
: <a class="icon-btn" href={`/signin?next=${encodeURIComponent(Astro.url.pathname)}`} title="لاگ ان" aria-label="لاگ ان"><Icon name="login" /></a>}
<label class="font-pick" title="خط"><Icon name="font" size={18} /><select id="font-select" aria-label="خط">
<option value="naskh" class="f-naskh">نسخ</option><option value="nastaliq" class="f-nastaliq">نستعلیق</option>
<option value="naskh">نسخ</option><option value="nastaliq">نستعلیق</option>
</select></label>
<button type="button" class="icon-btn" id="theme-toggle" aria-label="روشن یا تاریک" title="روشن یا تاریک"><Icon name="theme" /></button>
{Astro.locals.user && (

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

@ -481,11 +481,13 @@ h1 + .muted { text-align: center; margin-top: 0; }
.icon { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon-btn.small { width: 30px; height: 30px; }
/* the font picker in the header: the icon and a list; each name in its own font */
/* the font picker in the header: the icon and a list */
.font-pick { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px 0 10px; border: 1.5px solid var(--border); border-radius: 999px;
background: var(--inner); color: var(--ink); cursor: pointer; }
.font-pick:hover, .font-pick:focus-within { border-color: var(--brand); color: var(--brand); }
.font-pick select { font: inherit; font-family: 'Noto Naskh Arabic', serif; font-size: .85rem; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 2px; }
.font-pick select { font: 400 .85rem/1.4 'Noto Naskh Arabic', serif; height: 28px; border: 0; background: transparent; color: inherit;
cursor: pointer; padding: 0 2px; } /* Naskh at a fixed height whatever the reading font (Nastaliq would spill out) */
.font-pick select:focus { outline: none; }
.font-pick .f-naskh { font-family: 'Noto Naskh Arabic', serif; }
.font-pick .f-nastaliq { font-family: 'Noto Nastaliq Urdu', serif; }
.glyph-icon { position: relative; display: inline-flex; }
.glyph-icon > span { position: absolute; inset: 0 0 4px 2px; display: flex; align-items: center; justify-content: center;
font: 700 11px/1 'Noto Naskh Arabic', serif; }