Artist Page
<p>Brings back the old layout for the artist page but with new elements.</p>
Source Code (CSS)
.header-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1em 48px 1.75em;
z-index: 1;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
align-items: flex-end;
gap: 2em;
}
/* Badge (first child) - Row 1 */
.header-content > div:first-child {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3em;
}
/* Artist logo image (Row 2) */
.artist-logo {
grid-column: 1;
grid-row: 2;
max-width: 500px;
height: auto;
object-fit: contain;
display: block;
}
/* Artist name text (Row 2) */
.artist-name {
grid-column: 1;
grid-row: 2;
font-size: 2.5em;
font-weight: bold;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Action buttons - Spans both rows, right side */
.hero-actions {
grid-column: 3;
grid-row: 1 / 3;
display: flex;
align-items: center;
gap: 0.65em;
flex-shrink: 0;
}