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

Poet cards: one size for all (210px, two per row on phones); long names end in … with the full name on hover

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

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

@ -34,7 +34,7 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
<h2>مقبول شعرا</h2>
<div class="poets">
{pinned.map((p) => (
<a class={card(p)} href={p.url}>{p.nickname}{yearLines(p).map((y) => <small>{y}</small>)}</a>
<a class={card(p)} href={p.url} title={p.nickname}><span class="name">{p.nickname}</span>{yearLines(p).map((y) => <small>{y}</small>)}</a>
))}
</div>
</section>
@ -45,8 +45,8 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
<h2>{centuryName(century)}</h2>
<div class="poets">
{list.map((p) => (
<a class={card(p)} href={p.url}>
{p.nickname}
<a class={card(p)} href={p.url} title={p.nickname}>
<span class="name">{p.nickname}</span>
{yearLines(p).map((y) => <small>{y}</small>)}
</a>
))}

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

@ -63,12 +63,15 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background:
/* poet tiles (captions only, photos hidden for now) */
.poets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.poet-card {
min-width: 120px; text-align: center; background: var(--paper); border: 1.5px solid var(--border);
/* one size for every card: long names end in … (full name on hover) */
width: 210px; max-width: calc(50% - 4px); min-height: 5.125rem; text-align: center;
display: flex; flex-direction: column; justify-content: center; background: var(--paper); border: 1.5px solid var(--border);
border-radius: 999px; padding: 6px 36px 8px; color: var(--ink); transition: transform .25s; position: relative;
}
/* the bookmark sits in the top-left corner, inside the side padding (36px), so it never covers the name and a saved card keeps its size */
.poet-card.mark-bm::after { position: absolute; top: 12px; left: 16px; margin: 0; }
.poet-card:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--ink); }
.poet-card .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; }
.hero { text-align: center; }
.hero p { margin: 0; }