Merge pull request 'Home masthead: no second دیوان (the logo says it); اردو کا کلاسیکی ادب is the heading, between two couplet lines' (#73) from anas/user-access-footer-logo into main

Reviewed-on: #73

web/src/pages/index.astro

@@ -18,7 +18,7 @@ import logo from '../../public/logo/turanj.svg?raw'; // inline, so its rays can
 <Base>
   <section class="masthead">
     <Fragment set:html={logo.replace('<svg ', '<svg class="logo masthead-logo" aria-hidden="true" ')} />
-    <h1><span class="name">دیوان</span><Bayt /><span class="tagline">اردو کا کلاسیکی ادب</span></h1>
+    <div class="masthead-text"><Bayt /><h1>اردو کا کلاسیکی ادب</h1><Bayt /></div>
   </section>
   <p class="hero-count">{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون</p>
 

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;
+  padding-top: .2em; padding-bottom: .2em; } /* Nastaliq hangs below its box: room above and below keeps it clear of the couplet lines */
 .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; } }