From 9bf6d189df484c1e8973c336f8abcaa98331ebc1 Mon Sep 17 00:00:00 2001 From: Honey Date: Sun, 26 Apr 2026 22:12:38 +0200 Subject: [PATCH] fix: artist hero banner taller on desktop, fix right-side overlay bleed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hero height 220px mobile → 320px desktop (min-width: 769px) - Larger artist name (46px) and more padding on desktop - Overlay gradient now also darkens the right edge instead of fading to transparent Co-Authored-By: Claude Sonnet 4.6 --- src/views.js | 2 +- styles.css | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/views.js b/src/views.js index 308d737..84cd085 100644 --- a/src/views.js +++ b/src/views.js @@ -264,7 +264,7 @@ export async function loadArtistDetail(artist) { const img = imgRes.status === 'fulfilled' ? imgRes.value : null; if(img) { hero.style.background = `url('${img}') center/cover no-repeat`; - if(overlay) overlay.style.background = 'linear-gradient(to right,rgba(7,7,15,.9) 0%,rgba(7,7,15,.5) 60%,rgba(7,7,15,.2) 100%)'; + if(overlay) overlay.style.background = 'linear-gradient(to right,rgba(7,7,15,.95) 0%,rgba(7,7,15,.35) 55%,rgba(7,7,15,.75) 100%)'; } // ── Bio ── diff --git a/styles.css b/styles.css index 6f387a3..43999de 100644 --- a/styles.css +++ b/styles.css @@ -672,9 +672,14 @@ nav{flex:1;overflow-y:auto;padding:4px 10px} .np-drag-handle{width:100%;height:36px;display:flex;align-items:center;justify-content:center;cursor:grab;flex-shrink:0;touch-action:none} .np-drag-handle-bar{width:40px;height:4px;background:rgba(255,255,255,.25);border-radius:2px} -.artist-hero{height:180px;border-radius:14px;overflow:hidden;position:relative;margin-bottom:24px;background:linear-gradient(135deg,var(--surface2),var(--surface))} -.artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,15,.85) 0%,transparent 100%);display:flex;align-items:flex-end;padding:20px} +.artist-hero{height:220px;border-radius:14px;overflow:hidden;position:relative;margin-bottom:24px;background:linear-gradient(135deg,var(--surface2),var(--surface))} +.artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,15,.85) 0%,transparent 100%);display:flex;align-items:flex-end;padding:20px 28px} .artist-hero-name{font-size:32px;font-weight:800;letter-spacing:-1px} +@media(min-width:769px){ + .artist-hero{height:320px;border-radius:16px} + .artist-hero-overlay{padding:28px 36px} + .artist-hero-name{font-size:46px;letter-spacing:-2px} +} /* ── MISC ── */ .spinner{width:28px;height:28px;border:3px solid var(--surface2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:50px auto;display:block}