From 9e110d824180741652def25f589b703ee28eaa52 Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Fri, 9 Oct 2026 01:05:30 +0200 Subject: [PATCH] Poet cards: keep the bookmark inside the side padding so it never covers the name (Safari's wider fallback font) Co-Authored-By: Claude Opus 5.5 --- web/src/styles/global.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/styles/global.css b/web/src/styles/global.css index 2dac5bd7..a1fa2c9a 100644 --- a/web/src/styles/global.css +++ b/web/src/styles/global.css @@ -64,10 +64,10 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background: .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); - border-radius: 999px; padding: 6px 26px 8px; color: var(--ink); transition: transform .25s; position: relative; + border-radius: 999px; padding: 6px 36px 8px; color: var(--ink); transition: transform .25s; position: relative; } -/* the bookmark sits in the card's top-left corner, so a saved poet's card keeps its size */ -.poet-card.mark-bm::after { position: absolute; top: 12px; left: 18px; margin: 0; } +/* 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 small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; } .hero { text-align: center; }