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:
Johan Lundberg 2025-07-02 00:53:39 +02:00
parent a3bdd4b217
commit 2720eb1f4b
2 changed files with 52 additions and 0 deletions

View file

@ -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 {