Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix: artist hero banner taller on desktop, fix right-side overlay bleed

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-26 22:12:38 +02:00
1 parent 976e80f86d
commit 9bf6d189df
2 files changed
+8 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views.js
+1 -1
View File
@@ -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 ──
styles.css
+7 -2
View File
@@ -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}