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

Header logo: the shamsa medallion beside the Nastaliq دیوان (turns a little on hover), lined up with the word at every width; a home-screen icon (apple-touch-icon) from the same medallion

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

BIN
web/public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

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

@ -18,6 +18,7 @@ import Icon from '../components/Icon.astro';
<title>{fullTitle}</title> <title>{fullTitle}</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<script is:inline> <script is:inline>
// font, palette and light/dark applied before paint (Naskh, sepia and the system's light/dark by default) // font, palette and light/dark applied before paint (Naskh, sepia and the system's light/dark by default)
try { try {
@ -36,7 +37,7 @@ import Icon from '../components/Icon.astro';
<body data-user={Astro.locals.user ? '1' : undefined}> <body data-user={Astro.locals.user ? '1' : undefined}>
<header class="site-header"> <header class="site-header">
<div class="wrap"> <div class="wrap">
<a class="wordmark" href="/">دیوان</a> <a class="wordmark" href="/"><img class="logo" src="/logo/shamsa-icon.svg" width="44" height="44" alt="" /><span>دیوان</span></a>
<form class="search-form" action="/search" method="get" role="search"> <form class="search-form" action="/search" method="get" role="search">
<input type="search" name="q" id="q" data-urdu value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" /> <input type="search" name="q" id="q" data-urdu value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" />
<button type="button" id="rom-toggle" class="in-box rom" aria-label="رومن حروف سے اردو" aria-pressed="false" title="رومن حروف سے اردو ٹائپنگ (dil → دل)">اب</button> <button type="button" id="rom-toggle" class="in-box rom" aria-label="رومن حروف سے اردو" aria-pressed="false" title="رومن حروف سے اردو ٹائپنگ (dil → دل)">اب</button>

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

@ -87,7 +87,12 @@ body { margin: 0; background: var(--surface-page); color: var(--text); font-fami
/* header: logo + search + toggles in a gold-bordered bar */ /* header: logo + search + toggles in a gold-bordered bar */
.site-header .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; } .site-header .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; }
.wordmark { font-family: 'Noto Nastaliq Urdu', serif; font-size: 2rem; line-height: 1.5; color: var(--brand); font-weight: 700; } .wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: 'Noto Nastaliq Urdu', serif; font-size: 2rem; line-height: 1.5; color: var(--brand); font-weight: 700; }
/* the logo: the shamsa medallion, then the word */
.wordmark .logo { flex: none; width: 44px; height: 44px; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); transition: transform .3s; }
.wordmark:hover .logo { transform: rotate(15deg); }
.wordmark span { padding-bottom: .45em; margin-bottom: -.2em; } /* Nastaliq hangs below its line box: room underneath centres the ink on the medallion */
@media (min-width: 641px) { .wordmark span { position: relative; top: -.22em; } }
.search-form { flex: 1; min-width: 0; display: flex; position: relative; } .search-form { flex: 1; min-width: 0; display: flex; position: relative; }
.search-form input { background: var(--surface-sunken); } .search-form input { background: var(--surface-sunken); }
.search-form input { flex: 1; min-width: 0; padding: 4px 14px; padding-inline-end: 116px; } /* min-width 0: shrinks instead of pushing past the icons */ .search-form input { flex: 1; min-width: 0; padding: 4px 14px; padding-inline-end: 116px; } /* min-width 0: shrinks instead of pushing past the icons */
@ -216,7 +221,8 @@ h1 + .muted { text-align: center; margin-top: 0; }
/* phones: wordmark and icons on one row, the search box on its own full-width row below */ /* phones: wordmark and icons on one row, the search box on its own full-width row below */
@media (max-width: 640px) { @media (max-width: 640px) {
.site-header .wrap { gap: 8px; } .site-header .wrap { gap: 8px; }
.wordmark { font-size: 1.7rem; padding-bottom: .45em; margin-bottom: -.2em; } /* Nastaliq's descenders hang below the line box: room so they clear the search row */ .wordmark { font-size: 1.7rem; gap: 8px; }
.wordmark .logo { width: 38px; height: 38px; } /* Nastaliq's descenders hang below the line box: room so they clear the search row */
.toggles { margin-inline-start: auto; gap: 4px; } .toggles { margin-inline-start: auto; gap: 4px; }
.search-form { order: 3; flex-basis: 100%; } .search-form { order: 3; flex-basis: 100%; }
} }