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

Fix: remplacer custom media queries par valeurs en dur, retirer postcss-custom-media
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m23s
Details

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-10 18:55:37 +01:00
parent 4a6363273e
commit b9631b8c53
12 changed files with 16 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/layout/Header.svelte
View file

@ -166,7 +166,7 @@
}
/* Mobile — var(--breakpoint-mobile) = 700px */
@media (--mobile) {
@media (max-width: 700px) {
.navbar {
min-height: 8vh;
padding: 10vh 0 1vh;
@ -179,7 +179,7 @@
}
/* Tablet — var(--breakpoint-tablet) = 912px */
@media (--tablet-only) {
@media (min-width: 701px) and (max-width: 912px) {
.navbar-item {
font-size: var(--font-size-paragraph-tablet);
padding: 1vmax 1.8vmax;

4
src/components/layout/Menu.svelte
View file

@ -244,7 +244,7 @@
}
/* Mobile — var(--breakpoint-mobile) = 700px */
@media (--mobile) {
@media (max-width: 700px) {
.menu-list {
font-size: var(--font-size-subtitle-mobile);
grid-area: 6/4 / span 8 / span 8;
@ -269,7 +269,7 @@
}
/* Tablet — var(--breakpoint-tablet) = 912px */
@media (--tablet-only) {
@media (min-width: 701px) and (max-width: 912px) {
.menu-list {
font-size: var(--font-size-title-section-tablet);
}

5
src/styles/variables.css
View file

@ -1,8 +1,3 @@
/* Custom media queries — utilisables dans @media (--mobile) / @media (--tablet) */
@custom-media --mobile (max-width: 700px);
@custom-media --tablet (max-width: 912px);
@custom-media --tablet-only (min-width: 701px) and (max-width: 912px);
/* CSS Variables */
:root {
/* Colors */

4
src/views/Article.svelte
View file

@ -231,7 +231,7 @@
}
/* --- Mobile --- */
@media (--mobile) {
@media (max-width: 700px) {
.article {
padding: 3rem 1.25rem 4rem;
}
@ -250,7 +250,7 @@
}
/* --- Tablet --- */
@media (--tablet-only) {
@media (min-width: 701px) and (max-width: 912px) {
.article-title {
font-size: var(--font-size-title-main-tablet);
}

4
src/views/Blog.svelte
View file

@ -308,7 +308,7 @@
}
/* --- Mobile --- */
@media (--mobile) {
@media (max-width: 700px) {
.blog-header {
padding: 4rem 0 2rem;
}
@ -342,7 +342,7 @@
}
/* --- Tablet --- */
@media (--tablet-only) {
@media (min-width: 701px) and (max-width: 912px) {
.blog-header :global(h1) {
font-size: var(--font-size-title-main-tablet);
}

4
src/views/Expertise.svelte
View file

@ -363,7 +363,7 @@
}
/* Mobile (≤ 700px) */
@media (--mobile) {
@media (max-width: 700px) {
.expertise-title {
grid-area: 5/4 / span 1 / span 7;
font-size: var(--font-size-title-main-mobile);
@ -379,7 +379,7 @@
}
/* Tablet (701–912px) */
@media (--tablet-only) {
@media (min-width: 701px) and (max-width: 912px) {
.expertise-title {
grid-area: 5/6 / span 4 / span 12;
font-size: var(--font-size-title-main-tablet);

2
src/views/Home.svelte
View file

@ -175,7 +175,7 @@
}
}
@media (--tablet-only) {
@media (min-width: 701px) and (max-width: 912px) {
.home-subtitle {
font-size: var(--font-size-subtitle-tablet);
width: 70%;

2
src/views/Play.svelte
View file

@ -431,7 +431,7 @@
}
/* --- Mobile (≤ 700px) --- */
@media (--mobile) {
@media (max-width: 700px) {
.game-preview {
display: none;
}

2
src/views/Portfolio.svelte
View file

@ -291,7 +291,7 @@
}
/* Mobile (≤ 700px) */
@media (--mobile) {
@media (max-width: 700px) {
.portfolio-gallery {
grid-area: 1/1 / span 20 / span 20;
opacity: 0.3;