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