studio-variable/world-game
3
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

fix(play): ratio SVG curves et simplification état actif carousel

Browse source 
- SVG curves : height 100vh / width auto (conserve le ratio)
- Carousel : fusionne les règles de border sur .active picture img
- Mobile : carousel décalé d'une ligne (grid-area 15), taille active corrigée

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-20 11:52:28 +01:00
parent e51f3fbfce
commit 869dacd121
1 changed files with 10 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/views/Play.svelte
View file

@ -336,8 +336,8 @@
} }
.play-curves svg { .play-curves svg {
width: 100%; height: 100vh;
height: 100%; width: auto;
} }
/* --- Animations partagées featured + preview --- */ /* --- Animations partagées featured + preview --- */
@ -453,10 +453,11 @@
opacity: 1; opacity: 1;
} }
.play-carousel-item button :global(img), .play-carousel-item.active button :global(picture img) {
.play-carousel-item button :global(picture img) {
object-fit: cover; object-fit: cover;
transition: all 0.4s var(--ease-standard); transition: all 0.4s var(--ease-standard);
border: 4px solid var(--color-primary);
border-radius: 25%;
} }
.play-carousel-title { .play-carousel-title {
@ -465,11 +466,6 @@
text-align: center; text-align: center;
} }
.play-carousel-item.active button :global(picture img) {
border: 4px solid var(--color-primary);
border-radius: 25%;
}
/* --- Mobile (≤ 700px) --- */ /* --- Mobile (≤ 700px) --- */
@media (max-width: 700px) { @media (max-width: 700px) {
.game-preview { .game-preview {
@ -491,14 +487,15 @@
} }
.play-carousel { .play-carousel {
grid-area: 14/4 / span 3 / span 13; grid-area: 15/4 / span 3 / span 13;
} }
.play-carousel-item :global(img) { .play-carousel-item :global(img) {
width: clamp(70px, 18.41vw, 355px); width: clamp(80px, 18.41vw, 355px);
} }
.play-carousel-item.active :global(img) { .play-carousel-item.active button :global(picture img) {
width: clamp(90px, 18.41vw, 355px); border: 2px solid var(--color-primary);
width: clamp(97px, 18.41vw, 355px);
} }
} }