mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-14 00:22:03 +00:00
Landing : visuel du hero agrandi sur ordinateur
Le canvas déborde sur la marge droite jusqu'au bord de l'écran (garde de 24 px) et monte à 700 px de haut. Environ 1,7 fois plus grand en 1920 px, sans coupure de 1024 à 1920 px ; mobile et tablette inchangés. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
7be0748042
commit
6d2f681307
2 files changed
+6
-2
No files matched your search
+2
-2
@@ -755,10 +755,10 @@ function HeroGraph({ className = '' }) {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={`relative w-full max-w-2xl mx-auto lg:mx-0 ${className}`} data-reveal data-hero-galaxy>
|
||||
<div ref={containerRef} className={`relative w-full max-w-2xl mx-auto lg:mx-0 hero-graph ${className}`} data-reveal data-hero-galaxy>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="block w-full h-[40svh] sm:h-[clamp(420px,92vw,560px)]"
|
||||
className="block w-full h-[40svh] sm:h-[clamp(420px,92vw,560px)] lg:h-[clamp(560px,46vw,700px)]"
|
||||
aria-label="Arbre de famille animé"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -87,6 +87,10 @@ em.s { font-style: italic; font-weight: 300; }
|
||||
.hero-txt { display: grid; gap: 24px; justify-items: start; }
|
||||
.hero-txt .t-d1 { max-width: 17ch; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; }
|
||||
.hero-txt .lede { max-width: 44ch; }
|
||||
/* Le visuel du hero déborde sur la marge droite, jamais au-delà de l'écran (24px de garde pour la barre de défilement) */
|
||||
@media (min-width: 1024px) {
|
||||
.hero-graph { max-width: none; margin-left: -40px; width: calc(100% + 40px + var(--gut) + max(0px, (100vw - 1200px) / 2) - 24px); }
|
||||
}
|
||||
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
|
||||
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
|
||||
|
||||
Reference in new issue
Block a user