Enhance album cards with improved layout, Wikipedia links, and mobile optimization

- Redesigned album card layout with grid-based header (rank + details)
- Added Wikipedia links for all albums with accurate URL mappings
- Improved description formatting with proper paragraphs and typography
- Made stats cards clickable filters that maintain static numbers
- Significantly increased album art size on mobile devices (280px/240px vs 120px)
- Enhanced visual feedback for interactive elements

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Johan Lundberg 2025-07-01 20:57:52 +02:00
parent 88a6434132
commit ed8ad3c02a
3 changed files with 724 additions and 29 deletions

View file

@ -222,11 +222,14 @@ body {
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
}
.stat-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0,0,0,0.15);
background: rgba(102, 126, 234, 0.05);
}
.stat-number {
@ -260,14 +263,15 @@ body {
transition: all 0.3s ease;
cursor: pointer;
display: flex;
align-items: center;
gap: 1.5rem;
flex-direction: column;
gap: 1rem;
position: relative;
}
.album-cover {
width: 180px;
height: 180px;
width: 600px;
height: 600px;
max-width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
flex-shrink: 0;
@ -280,6 +284,8 @@ body {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
position: relative;
overflow: hidden;
margin: 0 auto;
align-self: center;
}
.album-cover:has(.album-cover-image) {
@ -308,7 +314,7 @@ body {
}
.album-cover-icon {
font-size: 4rem;
font-size: 6rem;
opacity: 0.8;
z-index: 1;
position: relative;
@ -366,22 +372,31 @@ body {
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.album-header-grid {
display: grid;
grid-template-columns: 100px 1fr;
gap: 1.5rem;
align-items: center;
}
.album-rank {
font-size: 2.5rem;
font-weight: 700;
color: #667eea;
min-width: 80px;
text-align: center;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.album-content {
flex: 1;
.album-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: 0.25rem;
}
.album-title {
font-size: 1.3rem;
font-weight: 600;
@ -432,9 +447,60 @@ body {
}
.album-description {
font-size: 0.9rem;
font-size: 0.95rem;
color: #555;
line-height: 1.5;
line-height: 1.7;
margin-top: 1rem;
text-align: justify;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.album-description p {
margin: 0 0 1rem 0;
text-indent: 1.5em;
}
.album-description p:first-child {
text-indent: 0;
}
.album-description p:last-child {
margin-bottom: 0;
}
.album-links {
margin-top: 1.5rem;
text-align: center;
padding-top: 1rem;
border-top: 1px solid #eee;
}
.wikipedia-link {
display: inline-block;
color: #667eea;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 20px;
background: rgba(102, 126, 234, 0.1);
transition: all 0.3s ease;
}
.wikipedia-link::before {
content: "🔗 ";
font-size: 0.8rem;
}
.wikipedia-link:hover {
background: rgba(102, 126, 234, 0.2);
transform: translateY(-1px);
}
.wikipedia-link:active {
transform: translateY(0);
}
@ -531,13 +597,13 @@ body {
}
.album-cover {
width: 120px;
height: 120px;
width: 280px;
height: 280px;
align-self: center;
}
.album-cover-icon {
font-size: 3rem;
font-size: 5rem;
}
.stats {
@ -561,4 +627,13 @@ body {
.stats {
grid-template-columns: 1fr;
}
.album-cover {
width: 240px;
height: 240px;
}
.album-cover-icon {
font-size: 4.5rem;
}
}