From 6451b615bd96ef9b9a494f7e03009038a0a75c66 Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Fri, 9 Oct 2026 01:02:28 +0200 Subject: [PATCH 1/5] Poet cards: bookmark in the top-left corner (saved cards keep their size); Hijri and Gregorian years on separate lines, more padding Co-Authored-By: Claude Opus 5.5 --- web/src/lib/urdu.ts | 7 +++++-- web/src/pages/index.astro | 6 +++--- web/src/styles/global.css | 6 ++++-- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/web/src/lib/urdu.ts b/web/src/lib/urdu.ts index 50a00dcc..8cfc642e 100644 --- a/web/src/lib/urdu.ts +++ b/web/src/lib/urdu.ts @@ -11,8 +11,11 @@ export const centuryName = (c: number | null) => (c ? `${ORDINALS[c] ?? ud(c)} const span = (a: number | null, b: number | null, mark: string) => a || b ? `${a ? ud(a) : '؟'} – ${b ? ud(b) : '؟'} ${mark}` : ''; // Hijri and Gregorian (عیسوی): "۱۲۹۴ – ۱۳۵۷ ھ · ۱۸۷۷ – ۱۹۳۸ ء" -export const years = (p: { birth_year_ah: number | null; death_year_ah: number | null; birth_year_ce?: number | null; death_year_ce?: number | null }) => - [span(p.birth_year_ah, p.death_year_ah, 'ھ'), span(p.birth_year_ce ?? null, p.death_year_ce ?? null, 'ء')].filter(Boolean).join(' · '); +type Years = { birth_year_ah: number | null; death_year_ah: number | null; birth_year_ce?: number | null; death_year_ce?: number | null }; +// Hijri and Gregorian spans, each on its own (poet cards show them as two lines) +export const yearLines = (p: Years) => + [span(p.birth_year_ah, p.death_year_ah, 'ھ'), span(p.birth_year_ce ?? null, p.death_year_ce ?? null, 'ء')].filter(Boolean) as string[]; +export const years = (p: Years) => yearLines(p).join(' · '); // search highlighting (same matching rules as the API's search) export { highlighter } from '../../../api/src/urdu.ts'; diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro index 9fdc9070..eb275f91 100644 --- a/web/src/pages/index.astro +++ b/web/src/pages/index.astro @@ -2,7 +2,7 @@ import Base from '../layouts/Base.astro'; import { api } from '../lib/api'; import { asUser, COOKIE } from '../lib/auth'; -import { centuryOf, centuryName, years, ud } from '../lib/urdu'; +import { centuryOf, centuryName, yearLines, ud } from '../lib/urdu'; type Poet = { id: number; url: string; nickname: string; birth_year_ah: number | null; death_year_ah: number | null; pin_order: number | null }; const poets = (await api('/api/poets')) ?? []; @@ -34,7 +34,7 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;

مقبول شعرا

{pinned.map((p) => ( - {p.nickname}{years(p)} + {p.nickname}{yearLines(p).map((y) => {y})} ))}
@@ -47,7 +47,7 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`; {list.map((p) => ( {p.nickname} - {years(p)} + {yearLines(p).map((y) => {y})} ))} diff --git a/web/src/styles/global.css b/web/src/styles/global.css index 6ca35494..2dac5bd7 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -64,10 +64,12 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background: .poets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .poet-card { min-width: 120px; text-align: center; background: var(--paper); border: 1.5px solid var(--border); - border-radius: 999px; padding: 2px 14px; color: var(--ink); transition: transform .25s; + border-radius: 999px; padding: 6px 26px 8px; color: var(--ink); transition: transform .25s; position: relative; } +/* the bookmark sits in the card's top-left corner, so a saved poet's card keeps its size */ +.poet-card.mark-bm::after { position: absolute; top: 12px; left: 18px; margin: 0; } .poet-card:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--ink); } -.poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.4; } +.poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; } .hero { text-align: center; } .hero p { margin: 0; } -- 2.47.3 From 9e110d824180741652def25f589b703ee28eaa52 Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Fri, 9 Oct 2026 01:05:30 +0200 Subject: [PATCH 2/5] Poet cards: keep the bookmark inside the side padding so it never covers the name (Safari's wider fallback font) Co-Authored-By: Claude Opus 5.5 --- web/src/styles/global.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/styles/global.css b/web/src/styles/global.css index 2dac5bd7..a1fa2c9a 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -64,10 +64,10 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background: .poets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .poet-card { min-width: 120px; text-align: center; background: var(--paper); border: 1.5px solid var(--border); - border-radius: 999px; padding: 6px 26px 8px; color: var(--ink); transition: transform .25s; position: relative; + border-radius: 999px; padding: 6px 36px 8px; color: var(--ink); transition: transform .25s; position: relative; } -/* the bookmark sits in the card's top-left corner, so a saved poet's card keeps its size */ -.poet-card.mark-bm::after { position: absolute; top: 12px; left: 18px; margin: 0; } +/* the bookmark sits in the top-left corner, inside the side padding (36px), so it never covers the name and a saved card keeps its size */ +.poet-card.mark-bm::after { position: absolute; top: 12px; left: 16px; margin: 0; } .poet-card:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--ink); } .poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; } .hero { text-align: center; } -- 2.47.3 From 7ca1c68c528a4fd9d6d5e026db8255e040b9674c Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Fri, 9 Oct 2026 01:07:33 +0200 Subject: [PATCH 3/5] =?UTF-8?q?Poet=20cards:=20one=20size=20for=20all=20(2?= =?UTF-8?q?10px,=20two=20per=20row=20on=20phones);=20long=20names=20end=20?= =?UTF-8?q?in=20=E2=80=A6=20with=20the=20full=20name=20on=20hover?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- web/src/pages/index.astro | 6 +++--- web/src/styles/global.css | 5 ++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro index eb275f91..39d45788 100644 --- a/web/src/pages/index.astro +++ b/web/src/pages/index.astro @@ -34,7 +34,7 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;

مقبول شعرا

{pinned.map((p) => ( - {p.nickname}{yearLines(p).map((y) => {y})} + {p.nickname}{yearLines(p).map((y) => {y})} ))}
@@ -45,8 +45,8 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;

{centuryName(century)}

{list.map((p) => ( - - {p.nickname} + + {p.nickname} {yearLines(p).map((y) => {y})} ))} diff --git a/web/src/styles/global.css b/web/src/styles/global.css index a1fa2c9a..8258a8f2 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -63,12 +63,15 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background: /* poet tiles (captions only, photos hidden for now) */ .poets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .poet-card { - min-width: 120px; text-align: center; background: var(--paper); border: 1.5px solid var(--border); + /* one size for every card: long names end in … (full name on hover) */ + width: 210px; max-width: calc(50% - 4px); min-height: 5.125rem; text-align: center; + display: flex; flex-direction: column; justify-content: center; background: var(--paper); border: 1.5px solid var(--border); border-radius: 999px; padding: 6px 36px 8px; color: var(--ink); transition: transform .25s; position: relative; } /* the bookmark sits in the top-left corner, inside the side padding (36px), so it never covers the name and a saved card keeps its size */ .poet-card.mark-bm::after { position: absolute; top: 12px; left: 16px; margin: 0; } .poet-card:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--ink); } +.poet-card .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; } .hero { text-align: center; } .hero p { margin: 0; } -- 2.47.3 From ad82ad39572d25ede233f424acc583db1175d9eb Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Fri, 9 Oct 2026 01:09:50 +0200 Subject: [PATCH 4/5] Poet cards: years in Naskh so their lines stay compact (cards grew too tall in Brave with Nastaliq) Co-Authored-By: Claude Opus 5.5 --- web/src/styles/global.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/styles/global.css b/web/src/styles/global.css index 8258a8f2..93c91831 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -72,7 +72,8 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background: .poet-card.mark-bm::after { position: absolute; top: 12px; left: 16px; margin: 0; } .poet-card:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--ink); } .poet-card .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; } +/* years in Naskh: compact lines whatever the reading font (Nastaliq's tall line boxes made cards grow in some browsers) */ +.poet-card small { display: block; color: var(--muted); font-family: 'Noto Naskh Arabic', serif; font-size: .75rem; line-height: 1.6; white-space: nowrap; } .hero { text-align: center; } .hero p { margin: 0; } -- 2.47.3 From ff814a7b7686ac5716c4c85a6f0c66eb359dc63c Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Fri, 9 Oct 2026 01:11:10 +0200 Subject: [PATCH 5/5] =?UTF-8?q?Reading=20pages:=20previous/next=20buttons?= =?UTF-8?q?=20centred,=20=D9=BE=DA=86=DA=BE=D9=84=D8=A7=20on=20the=20right?= =?UTF-8?q?=20and=20=D8=A7=DA=AF=D9=84=D8=A7=20on=20the=20left?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- web/src/pages/[...path].astro | 4 ++-- web/src/styles/global.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/pages/[...path].astro b/web/src/pages/[...path].astro index f00c7c36..28f1b6ba 100644 --- a/web/src/pages/[...path].astro +++ b/web/src/pages/[...path].astro @@ -133,8 +133,8 @@ const title = page.type === 'poem' ? page.poem.title : page.type === 'poet' ? pa

کسی لفظ کو منتخب کریں تو اس کے معنی اور تلفظ ساتھ نظر آئیں گے۔

{page.divan && (

diff --git a/web/src/styles/global.css b/web/src/styles/global.css index 93c91831..6bcf1c19 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -105,7 +105,7 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background: .couplet p, .couplet p + p { text-align: center; } .couplet::after { display: none; } } -.poem-nav { display: flex; justify-content: space-between; } +.poem-nav { display: flex; justify-content: center; gap: 12px; } /* RTL: پچھلا on the right, اگلا on the left */ .poem-nav a { border: 1.5px solid var(--border); background: var(--inner); border-radius: 10px; padding: 0 14px; } .source { text-align: center; font-size: .85rem; color: var(--muted); } -- 2.47.3