GnosysLabs/Resonant
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Replace the Artists route fallback content with a searchable artist list, counts, artwork, and artist-specific playback.

Browse Source 
Hop-State: A_06FNPER3B0F42JETD868VDG
Hop-Proposal: R_06FNPEQ1X5JW4SKNSA3856G
Hop-Task: T_06FNPDXDVREH0RSVM1731Q0
Hop-Attempt: AT_06FNPDXDVS3KPW8HKJPGAA8
This commit is contained in:
cyph3rasi
2026-07-13 04:27:01 -07:00
committed by Hop
parent 00832b4eda
commit 34af86bfc3
5 changed files with 111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+15
View File
@@ -132,6 +132,20 @@ main { min-width: 0; height: calc(100vh - var(--player-height)); overflow-y: aut
.cover--indigo { background: radial-gradient(circle at 34% 28%, oklch(0.69 0.12 247), transparent 18%), linear-gradient(140deg, oklch(0.4 0.13 261), oklch(0.18 0.04 270)); }
.cover--sand { background: radial-gradient(circle at 68% 30%, oklch(0.86 0.065 84), transparent 22%), linear-gradient(145deg, oklch(0.67 0.08 74), oklch(0.29 0.045 53)); }
.artist-section { max-width: 1040px; }
.artist-list { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); column-gap: 34px; border-top: 1px solid var(--line); }
.artist-row { display: grid; width: 100%; min-width: 0; grid-template-columns: 58px minmax(0, 1fr) 32px; align-items: center; gap: 13px; padding: 12px 8px; border: 0; border-bottom: 1px solid oklch(0.28 0.012 275 / 0.58); border-radius: 9px; background: transparent; text-align: left; transition: color 160ms ease, background 160ms ease; }
.artist-row:hover, .artist-row:focus-visible { background: oklch(0.2 0.012 275 / 0.78); }
.artist-portrait { display: grid; width: 54px; height: 54px; overflow: hidden; place-items: center; border-radius: 50%; box-shadow: 0 7px 20px oklch(0.05 0.018 275 / 0.28); }
.artist-portrait img { width: 100%; height: 100%; object-fit: cover; }
.artist-portrait b { color: oklch(0.94 0.018 60 / 0.8); font-size: 0.78rem; letter-spacing: -0.03em; text-transform: uppercase; }
.artist-meta { min-width: 0; }
.artist-meta strong, .artist-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-meta strong { color: var(--ink); font-size: 0.82rem; font-weight: 600; }
.artist-meta small { margin-top: 4px; color: var(--faint); font-size: 0.67rem; }
.artist-play { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--muted); background: var(--surface-raised); transition: color 160ms ease, background 160ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1); }
.artist-row:hover .artist-play, .artist-row:focus-visible .artist-play { color: oklch(0.17 0.012 275); background: var(--accent-bright); transform: scale(1.05); }
.track-list { overflow: hidden; border-top: 1px solid var(--line); }
.track-row { display: grid; grid-template-columns: minmax(245px, 1.5fr) minmax(130px, 1fr) 34px 48px 34px; min-height: 57px; align-items: center; border-bottom: 1px solid oklch(0.28 0.012 275 / 0.58); color: var(--muted); transition: background 140ms ease; }
.track-row:hover, .track-row:focus-within { background: oklch(0.2 0.012 275 / 0.78); }
@@ -297,6 +311,7 @@ input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visib
.hero-art .cover { width: 165px; }
.hero-actions { position: relative; z-index: 4; }
.album-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 19px 13px; }
.artist-list { grid-template-columns: 1fr; }
.album-tile:nth-child(n + 5) { display: block; }
.section-heading { align-items: flex-end; }
.section-heading h2 { font-size: 1.25rem; }