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:
@@ -1,5 +1,37 @@
|
||||
<template>
|
||||
<section class="section-padding">
|
||||
<section class="relative overflow-hidden section-padding">
|
||||
<!-- Shadok scale: balance with absurd objects -->
|
||||
<svg class="shadok-scale" viewBox="0 0 260 280" fill="none" aria-hidden="true">
|
||||
<!-- Vertical pole -->
|
||||
<line x1="130" y1="40" x2="130" y2="240" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
|
||||
<!-- Base triangle -->
|
||||
<polygon points="100,240 160,240 130,220" fill="currentColor" opacity="0.5"/>
|
||||
<!-- Horizontal beam -->
|
||||
<line x1="40" y1="80" x2="220" y2="60" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
|
||||
<!-- Pivot circle -->
|
||||
<circle cx="130" cy="70" r="8" fill="currentColor" opacity="0.6"/>
|
||||
<!-- Left pan (chain lines) -->
|
||||
<line x1="40" y1="80" x2="30" y2="120" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="40" y1="80" x2="70" y2="120" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
<!-- Left pan dish -->
|
||||
<path d="M20 120 Q50 135 80 120" stroke="currentColor" stroke-width="2.5" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Absurd object on left: a snail -->
|
||||
<ellipse cx="50" cy="112" rx="14" ry="8" fill="currentColor" opacity="0.5"/>
|
||||
<path d="M60 108 Q68 95 58 92 Q48 90 52 100" stroke="currentColor" stroke-width="2" fill="none" opacity="0.4"/>
|
||||
<!-- Right pan (chain lines) -->
|
||||
<line x1="220" y1="60" x2="210" y2="100" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="220" y1="60" x2="250" y2="100" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
<!-- Right pan dish -->
|
||||
<path d="M200 100 Q230 115 260 100" stroke="currentColor" stroke-width="2.5" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Absurd object on right: a star/coin -->
|
||||
<circle cx="230" cy="92" r="10" fill="currentColor" opacity="0.4"/>
|
||||
<circle cx="230" cy="92" r="5" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Tiny Shadok perched on top -->
|
||||
<ellipse cx="130" cy="35" rx="12" ry="10" fill="currentColor" opacity="0.6"/>
|
||||
<circle cx="130" cy="22" r="7" fill="currentColor" opacity="0.55"/>
|
||||
<circle cx="133" cy="20" r="2" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<div class="container-content">
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<UiScrollReveal>
|
||||
@@ -41,4 +73,24 @@ const { data: content } = await usePageContent('home')
|
||||
.heading-section {
|
||||
font-size: clamp(1.625rem, 4vw, 2.125rem);
|
||||
}
|
||||
|
||||
.shadok-scale {
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
top: 10%;
|
||||
width: clamp(100px, 14vw, 200px);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadok-float-scale 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shadok-float-scale {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-10px) rotate(2deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shadok-scale { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user