Add visual polish and micro-interactions for editorial feel
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 34s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m15s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s

Phase 1 - Critical Fixes:
- EmptyState: warm palette, coral button, Playfair Display title
- Pagination: design system colors, coral active state
- LoadingSkeleton: warm shimmer with coral tint

Phase 2 - Signature Patterns:
- Navigation: sliding underline hover effect on links
- globals.css: increased noise texture opacity for paper feel
- RankingsView: alternating row backgrounds
- HomeView: decorative coral bar under section headings

Phase 3 - Polish:
- SchoolCard: SVG trend icons replacing unicode arrows
- RankingsView: styled metallic rank badges replacing emoji medals

Phase 4 - Micro-interactions:
- Navigation badge: pop animation when count changes
- HomeView grid: staggered entry animation for cards

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-02-03 14:12:48 +00:00
parent d22275bfe0
commit 18964a34a2
10 changed files with 257 additions and 64 deletions

View File

@@ -63,16 +63,39 @@
transition: all 0.2s ease;
}
/* Sliding underline effect */
.navLink::after {
content: '';
position: absolute;
bottom: 4px;
left: 1rem;
right: 1rem;
height: 2px;
background: var(--accent-coral, #e07256);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
border-radius: 1px;
}
.navLink:hover {
color: var(--text-primary, #1a1612);
background: var(--bg-secondary, #f3ede4);
}
.navLink:hover::after {
transform: scaleX(1);
}
.navLink.active {
color: var(--accent-coral, #e07256);
background: rgba(224, 114, 86, 0.1);
}
.navLink.active::after {
transform: scaleX(1);
}
.badge {
display: inline-flex;
align-items: center;
@@ -85,6 +108,22 @@
color: white;
background: var(--accent-coral, #e07256);
border-radius: 9999px;
animation: badgePop 0.3s ease-out;
box-shadow: 0 2px 6px rgba(224, 114, 86, 0.4);
}
@keyframes badgePop {
0% {
transform: scale(0.6);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@media (max-width: 640px) {