Add Next album navigation button to album cards
- Add "Next" button to album cards for sequential navigation through rankings - Button shows "Next (#rank+1)" and uses existing jump-to-rank functionality - Button only appears on albums 1-499 (not on album #500) - Styled to match Wikipedia and Spotify links with theme-aware colors - Uses right arrow SVG icon and hover effects consistent with other links - Clicking Next button jumps to the next sequential album in the ranking Features: • Sequential navigation through the Top 500 albums • Smart button hiding on the last album (#500) • Theme-aware styling with CSS custom properties • Consistent visual design with existing link buttons • Smooth scroll navigation using existing jump functionality 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
a3bdd4b217
commit
2720eb1f4b
2 changed files with 52 additions and 0 deletions
31
styles.css
31
styles.css
|
|
@ -790,6 +790,37 @@ body {
|
|||
color: #1ed760; /* Slightly brighter Spotify green for dark themes */
|
||||
}
|
||||
|
||||
.next-album-link {
|
||||
display: inline-block;
|
||||
color: var(--primary-color);
|
||||
background: none;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
background: var(--hover-background);
|
||||
border: 1px solid var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.next-album-link:hover {
|
||||
background: var(--primary-color);
|
||||
color: var(--text-light);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.next-album-link:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.next-album-link svg {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Loading and error states */
|
||||
.loading {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue