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

Home logo turns on hover like the header's: pale rays one way, gold lobes the other, the disc and دیوان still

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

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

@ -13,10 +13,11 @@ 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'; import Bayt from '../components/Bayt.astro';
import logo from '../../public/logo/turanj.svg?raw'; // inline, so its rays can turn on hover
--- ---
<Base> <Base>
<section class="masthead"> <section class="masthead">
<img class="masthead-logo" src="/logo/turanj.svg" width="220" height="220" alt="" /> <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> <h1><span class="name">دیوان</span><Bayt /><span class="tagline">اردو کا کلاسیکی ادب</span></h1>
</section> </section>
<p class="hero-count">{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون</p> <p class="hero-count">{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون</p>

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

@ -92,10 +92,10 @@ body { margin: 0; background: var(--surface-page); color: var(--text); font-fami
.wordmark .logo { width: clamp(52px, 13vw, 72px); height: auto; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); overflow: visible; } .wordmark .logo { width: clamp(52px, 13vw, 72px); height: auto; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); overflow: visible; }
/* on hover the two layers of rays turn opposite ways; the blue disc and the word stay still */ /* on hover the two layers of rays turn opposite ways; the blue disc and the word stay still */
.logo .rays-long, .logo .rays-short { transform-box: fill-box; transform-origin: center; } .logo .rays-long, .logo .rays-short { transform-box: fill-box; transform-origin: center; }
.wordmark:hover .rays-long, .wordmark:focus-visible .rays-long { animation: rays 9s linear infinite; } :is(.wordmark:hover, .wordmark:focus-visible, .masthead-logo:hover) .rays-long { animation: rays 9s linear infinite; }
.wordmark:hover .rays-short, .wordmark:focus-visible .rays-short { animation: rays 9s linear infinite reverse; } :is(.wordmark:hover, .wordmark:focus-visible, .masthead-logo:hover) .rays-short { animation: rays 9s linear infinite reverse; }
@keyframes rays { to { transform: rotate(360deg); } } @keyframes rays { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wordmark .logo g { animation: none !important; } } @media (prefers-reduced-motion: reduce) { .logo g { animation: none !important; } }
.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 */