Refonte UI complète : palettes saisonnières, typo moderne, paroles nettoyées, Shadoks
- Nettoyage paroles : suppression instructions Suno AI, corrections prononciation (11 fichiers) - 4 palettes saisonnières (Automne/Hiver dark, Printemps/Été light) avec sélecteur - Typographie modernisée : Outfit (display) + Inter (sans) remplacent Syne + Space Grotesk - Styles adaptatifs : CSS vars pour couleurs, overrides light mode complets - Mini-player : bouton Next ajouté, flèche expand plus visible - BookPlayer : fix scroll mode paginé, croix de fermeture visible - Illustrations Shadoks inline SVG dans 11 composants/pages - Suppression soulignés navigation, reset boutons, bordures propres Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,8 +2,20 @@
|
||||
<section class="section-padding">
|
||||
<div class="container-content">
|
||||
<UiScrollReveal>
|
||||
<div class="gw-card">
|
||||
<div class="flex flex-col items-center text-center gap-4 md:flex-row md:text-left md:gap-8">
|
||||
<div class="gw-card relative overflow-hidden">
|
||||
<!-- Shadok blob -->
|
||||
<svg class="shadok-blob" viewBox="0 0 200 180" fill="none" aria-hidden="true">
|
||||
<path d="M60 90 Q30 50 70 30 Q110 10 140 40 Q180 60 170 100 Q165 140 130 155 Q90 170 55 145 Q25 125 60 90Z" fill="currentColor" opacity="0.12"/>
|
||||
<path d="M60 90 Q30 50 70 30 Q110 10 140 40 Q180 60 170 100 Q165 140 130 155 Q90 170 55 145 Q25 125 60 90Z" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
|
||||
<circle cx="100" cy="80" r="8" fill="currentColor" opacity="0.08"/>
|
||||
<circle cx="120" cy="110" r="6" fill="currentColor" opacity="0.06"/>
|
||||
<circle cx="80" cy="105" r="5" fill="currentColor" opacity="0.07"/>
|
||||
<circle cx="95" cy="72" r="3" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="108" cy="70" r="3" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="96" cy="71" r="1.2" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="109" cy="69" r="1.2" fill="currentColor" opacity="0.5"/>
|
||||
</svg>
|
||||
<div class="flex flex-col items-center text-center gap-4 md:flex-row md:text-left md:gap-8 relative z-1">
|
||||
<!-- Icon -->
|
||||
<div class="gw-icon-wrapper">
|
||||
<div class="i-lucide-sparkles h-8 w-8 text-amber-400" />
|
||||
@@ -75,4 +87,24 @@ const { data: content } = await usePageContent('home')
|
||||
border: 1px solid hsl(40 80% 50% / 0.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shadok-blob {
|
||||
position: absolute;
|
||||
right: -2%;
|
||||
top: -20%;
|
||||
width: clamp(100px, 15vw, 180px);
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadok-drift 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shadok-drift {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-8px) rotate(3deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shadok-blob { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user