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

User access redesign, Libron, spacing, footer, headline, logo concepts #72

Merged
anas merged 10 commits from anas/user-access-footer-logo into main 2026-10-09 14:43:53 +00:00
Conversation 0 Commits 10 Files Changed 45 +5 -4
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5a5657803d - Show all commits

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 card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
import Bayt from '../components/Bayt.astro';
import logo from '../../public/logo/turanj.svg?raw'; // inline, so its rays can turn on hover
---
<Base>
<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>
</section>
<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; }
/* 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; }
.wordmark:hover .rays-long, .wordmark:focus-visible .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-long { animation: rays 9s linear infinite; }
:is(.wordmark:hover, .wordmark:focus-visible, .masthead-logo:hover) .rays-short { animation: rays 9s linear infinite reverse; }
@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 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 */