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

Home masthead (as the share image): ترنج beside a large دیوان and اردو کا کلاسیکی ادب in a gold double frame, divided by the couplet line (half-lines and ✤); stacks on phones

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

9
web/src/components/Bayt.astro Normal file
View File

@ -0,0 +1,9 @@
---
// The couplet line (from the logo concepts): two half-lines tapering outward from a ✤. Decorative; coloured by the palette.
const s = 13, petal = `M0,0 C${.45 * s},${-.35 * s} ${.25 * s},${-.9 * s} 0,${-s} C${-.25 * s},${-.9 * s} ${-.45 * s},${-.35 * s} 0,0Z`;
const misra = (a: number, b: number, y = 16, h = 6) => `M${a},${y} Q${(a + b) / 2},${y - h * .9} ${b},${y - h / 2} L${b},${y + h / 2} Q${(a + b) / 2},${y + h * .9} ${a},${y}Z`;
---
<svg class="bayt" viewBox="0 0 280 32" aria-hidden="true">
<path class="misra" d={misra(124, 4)} /><path class="misra" d={misra(156, 276)} />
<g class="gul">{[45, 135, 225, 315].map((a) => <path transform={`translate(140 16) rotate(${a})`} d={petal} />)}<circle class="hole" cx="140" cy="16" r={s * .16} /></g>
</svg>

9
web/src/pages/index.astro
View File

@ -12,13 +12,14 @@ const count = new Set(sections.flatMap((s) => s.poets.map((p) => p.id))).size;
const token = Astro.locals.user ? Astro.cookies.get(COOKIE)?.value : undefined; const token = Astro.locals.user ? Astro.cookies.get(COOKIE)?.value : undefined;
const marked: number[] = token ? (await asUser(token, '/api/library/marks')).data.poets ?? [] : []; const marked: number[] = token ? (await asUser(token, '/api/library/marks')).data.poets ?? [] : [];
const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`; const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
import Bayt from '../components/Bayt.astro';
--- ---
<Base> <Base>
<section class="hero"> <section class="masthead">
<img class="hero-logo" src="/logo/turanj.svg" width="120" height="120" alt="" /> <img class="masthead-logo" src="/logo/turanj.svg" width="220" height="220" alt="" />
<h1>اردو کا کلاسیکی ادب</h1> <h1><span class="name">دیوان</span><Bayt /><span class="tagline">اردو کا کلاسیکی ادب</span></h1>
<p>{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون</p>
</section> </section>
<p class="hero-count">{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون</p>
{sections.length === 0 && <p class="muted">مواد تیار کیا جا رہا ہے۔ براہِ کرم کچھ دیر بعد دوبارہ تشریف لائیں۔</p>} {sections.length === 0 && <p class="muted">مواد تیار کیا جا رہا ہے۔ براہِ کرم کچھ دیر بعد دوبارہ تشریف لائیں۔</p>}

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

@ -146,6 +146,21 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background:
.hero { text-align: center; } .hero { text-align: center; }
.hero-logo { display: block; width: clamp(84px, 22vw, 120px); height: auto; margin: 4px auto 0; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .12)); } .hero-logo { display: block; width: clamp(84px, 22vw, 120px); height: auto; margin: 4px auto 0; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .12)); }
.hero p { margin: 0; } .hero p { margin: 0; }
/* the home page masthead (as the share image): the logo beside دیوان and the headline, in a gold double frame */
.masthead { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 7vw, 72px); margin: 4px 0 10px;
padding: clamp(18px, 4vw, 34px) clamp(16px, 4vw, 40px); background: var(--surface-raised);
border: 6px solid var(--accent); outline: 1.5px solid var(--accent); outline-offset: -14px; border-radius: 4px; }
.masthead-logo { flex: none; width: clamp(110px, 24vw, 210px); height: auto; filter: drop-shadow(0 2px 8px rgb(0 0 0 / .12)); }
.masthead h1 { display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: 700; }
.masthead h1::after { display: none; }
.masthead .name { font-family: 'Noto Nastaliq Urdu', serif; color: var(--brand); font-size: clamp(2.8rem, 10vw, 5.2rem); line-height: 1.5;
margin-top: -.4em; padding-bottom: .3em; } /* Nastaliq: empty room above the ink, ink .27em below the box (measured) */
/* the couplet line under the name: half-lines in the palette's blue, the ✤ in vermilion */
.bayt { display: block; width: clamp(150px, 70%, 280px); height: auto; margin: 2px auto 16px; }
.bayt .misra { fill: var(--action); } .bayt .gul { fill: var(--brand); } .bayt .hole { fill: var(--surface-raised); }
.masthead .tagline { font-family: 'Noto Nastaliq Urdu', serif; color: var(--action); /* the palette's blue, as in the share image */ font-size: clamp(1.15rem, 3.6vw, 1.9rem); line-height: 2.1; }
.hero-count { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 6px; }
@media (max-width: 520px) { .masthead { flex-direction: column; gap: 4px; } }
/* poet / category */ /* poet / category */
.intro { background: var(--surface-raised); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 18px; white-space: pre-line; text-align: justify; } .intro { background: var(--surface-raised); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 18px; white-space: pre-line; text-align: justify; }