Shanty/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added better artist bio/pics/lyrics

Browse Source
This commit is contained in:
Connor Johnstone
2026-03-19 14:53:39 -04:00
parent f6b363c40f
commit 51bcf26482
9 changed files with 580 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/style.css
View File

@@ -88,6 +88,92 @@ a:hover { color: var(--accent-hover); }
.stat-card .value { font-size: 2rem; font-weight: bold; color: var(--accent); }
.stat-card .label { font-size: 0.85rem; color: var(--text-secondary); }
/* Album art */
.album-art {
width: 48px;
height: 48px;
border-radius: 4px;
object-fit: cover;
background: var(--bg-card);
vertical-align: middle;
}
.album-art-lg {
width: 250px;
height: 250px;
border-radius: var(--radius);
object-fit: cover;
background: var(--bg-card);
}
.album-art-placeholder {
display: inline-block;
width: 48px;
height: 48px;
border-radius: 4px;
background: var(--bg-card);
}
.album-art-placeholder-lg {
display: block;
width: 250px;
height: 250px;
border-radius: var(--radius);
background: var(--bg-card);
}
.album-header {
display: flex;
gap: 1.5rem;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.artist-meta {
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.25rem;
}
.artist-meta .tag {
font-size: 0.8rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: var(--bg-card);
color: var(--text-secondary);
}
.artist-links {
display: flex;
gap: 0.75rem;
margin-top: 0.5rem;
}
.artist-links a {
font-size: 0.8rem;
color: var(--text-secondary);
}
.artist-links a:hover { color: var(--accent); }
.artist-photo {
width: 120px;
height: 120px;
border-radius: var(--radius);
object-fit: cover;
flex-shrink: 0;
}
.artist-bio {
color: var(--text-secondary);
line-height: 1.6;
max-width: 800px;
margin-top: 0.5rem;
}
.lyrics {
font-family: inherit;
font-size: 0.85rem;
color: var(--text-secondary);
white-space: pre-wrap;
padding: 1rem;
background: var(--bg-card);
border-radius: var(--radius);
max-height: 400px;
overflow-y: auto;
margin: 0;
}
/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border); }