diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro index d8a2965c..8534e019 100644 --- a/web/src/pages/index.astro +++ b/web/src/pages/index.astro @@ -18,7 +18,7 @@ import logo from '../../public/logo/turanj.svg?raw'; // inline, so its rays can

{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون

diff --git a/web/src/styles/global.css b/web/src/styles/global.css index 3abb6a4d..623e096f 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -146,19 +146,19 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background: .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 p { margin: 0; } -/* the home page masthead (as the share image): the logo beside دیوان and the headline, in a gold double frame */ +/* the home page masthead: the logo beside the headline (between two couplet lines), 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-text { display: flex; flex-direction: column; align-items: center; } +/* the headline between two couplet lines, like a framed verse; the logo already says دیوان */ +.masthead h1 { margin: 0; font-family: 'Noto Nastaliq Urdu', serif; font-weight: 700; color: var(--action); font-size: clamp(1.7rem, 6vw, 3.2rem); line-height: 2; + margin-top: -.25em; padding-bottom: .2em; } /* Nastaliq: room above the ink, the ink hangs below the box */ .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; } +/* the couplet line: half-lines in the palette's blue, the ✤ in vermilion */ +.bayt { display: block; width: clamp(160px, 80%, 320px); height: auto; margin: 6px auto; } .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; } }