Jonathan/Lyra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): restyle Artists, Discover, Wanted, discography + preview (Phase 2)

Browse Source 
Convert the remaining pages onto the Pressing Plant system: PageHead
component, shared list-row / toggle / small+ghost button / tracklist classes,
and page wrappers trimmed now that the shell provides masthead + nav. All
logic and test hooks (aria-labels, button text) preserved. Verified in the
real app across both themes (Playwright): artists/discover/wanted/discography
render cohesively with real data.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan
2026-07-12 14:27:43 +02:00
parent 7f1fe52a7c
commit ead5f33bcc
12 changed files with 404 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/design.css
+53
View File
@@ -169,3 +169,56 @@ nav.contents .sep { flex: 1; }
.job { grid-template-columns: 4px 1fr; }
.job .chip { grid-column: 2 / 3; justify-self: start; margin-top: 12px; }
}
/* ── Phase 2: page headers, list rows, tools ──────────── */
.page-head { margin: 6px 0 26px; }
.page-head .eyebrow {
font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--graphite); margin: 0 0 9px;
}
.page-head h1 {
font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em;
margin: 0; line-height: 1; text-wrap: balance;
}
.list { list-style: none; margin: 0 0 40px; padding: 0; }
.list-row {
display: flex; gap: 14px 20px; align-items: baseline; justify-content: space-between;
flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.list-row .main { min-width: 0; }
.list-row .rtitle { font-size: 1.2rem; line-height: 1.2; }
.list-row .rtitle a { color: inherit; text-decoration: none; }
.list-row .rtitle a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.list-row .rtitle .artist, .list-row .rtitle .dim { color: var(--graphite); }
.list-row .rmeta {
font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--graphite); margin-top: 7px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.list-row .rmeta .dot { opacity: 0.5; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn.sm { padding: 6px 11px; font-size: 0.62rem; letter-spacing: 0.12em; }
.btn.ghost { border-color: var(--rule-2); color: var(--graphite); }
.btn.ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.toggle {
font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--graphite); display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
}
.toggle input { accent-color: var(--accent); }
.following { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.tool-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 28px; }
.notice { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--alert); }
.muted-note { color: var(--graphite); font-size: 0.95rem; }
.score { font-variant-numeric: tabular-nums; }
/* tracklist (preview page) */
.tracks { list-style: none; margin: 10px 0 4px; padding: 0 0 0 2px; }
.tracks li {
display: flex; gap: 12px; font-family: var(--mono); font-size: 0.74rem; color: var(--graphite);
padding: 3px 0; font-variant-numeric: tabular-nums;
}
.tracks li .tnum { color: var(--rule-2); min-width: 2em; }
.tracks li .tname { color: var(--ink); }