thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make accent + pills + divider one card-header unit (fixes pill centering)

Browse Source 
Centering inside .tags could never look right: the accent line (.body::before),
its margin, and the body gap lived OUTSIDE the centering context, but the eye
measures the band from accent line to divider. Per Codex's audit, restructure
into one .cardhead unit — a fixed-height grid (accent row + a 1fr row that
centers the pill block) that owns the divider. Now the centered band is the band
you see, so 1-, 2-, and 3-pill cards sit evenly with aligned dividers and titles.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-01 21:21:31 +00:00
parent fd4229df83
commit f064b3f3fb
1 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ArticleCard.svelte
+17 -18
View File
@@ -40,7 +40,8 @@
{/if}
<div class="body">
<div class="tags">
<div class="cardhead">
<span class="accent"></span>
<div class="pillrow">
{#each pills as t, i (t)}
{#if ontag}
@@ -93,7 +94,7 @@
}
.body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tags { display: flex; align-items: center; }
.cardhead { display: flex; align-items: center; }
.pillrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tag {
background: var(--accent); color: #fff; border: none; border-radius: 999px;
@@ -106,17 +107,18 @@
button.tag:hover { background: var(--accent-deep); color: #fff; }
button.tag.soft:hover { background: var(--accent); color: #fff; }
/* Reserve room for two rows of pills on tiles so titles always line up
across the grid, whether a card has 1, 2, or 3 tags. A hairline closes
the zone. (The hero is its own layout and opts out.) */
/* Vertically center the pill row inside a fixed-height zone using a column
flex + justify-content (no align-content single-line quirk). Comfortably
taller than two rows so the 3-pill case keeps even margins; 1-, 2-, and
3-pill cards all sit symmetrically and their dividers/titles line up. */
.tile .tags {
flex-direction: column; justify-content: center; align-items: flex-start;
min-height: 64px; border-bottom: 1px solid var(--line);
/* On tiles, accent + pills + divider are ONE header unit with a fixed height,
so the centered band is exactly the band the eye measures (accent line →
divider). The accent is the top grid row; the pill row centers in the rest,
giving even margins for 1-, 2-, and 3-pill cards with everything aligned. */
.tile .cardhead {
display: grid; grid-template-rows: 3px 1fr; height: 84px;
padding-top: 18px; border-bottom: 1px solid var(--line);
}
.tile .accent {
width: 30px; height: 3px; border-radius: 2px; background: var(--accent); opacity: 0.85;
}
.tile .pillrow { align-self: center; }
/* Source on its own line below the tags, left-justified, for uniformity. */
.src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; }
@@ -155,11 +157,8 @@
/* ---- Typographic editorial tile (every non-hero card) ---- */
.tile { position: relative; }
.tile .body { padding-top: 18px; }
.tile .body::before {
content: ''; display: block; width: 30px; height: 3px;
background: var(--accent); border-radius: 2px; margin-bottom: 10px; opacity: 0.85;
}
/* The .cardhead owns the top padding (above the accent); avoid doubling it. */
.tile .body { padding-top: 0; }
.tile::after {
content: attr(data-topic);
position: absolute; right: 10px; bottom: -8px;
@@ -167,7 +166,7 @@
color: var(--accent); opacity: 0.05; text-transform: lowercase; letter-spacing: -0.02em;
pointer-events: none; user-select: none;
}
.tile .tags, .tile .src, .tile h3, .tile .why, .tile .actions { position: relative; }
.tile .cardhead, .tile .src, .tile h3, .tile .why, .tile .actions { position: relative; }
/* ---- Hero WITH image: two columns, with an atmospheric overlay ---- */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; }