diff --git a/package-lock.json b/package-lock.json index dfb3898..66f8cba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,100 @@ "vite": "7.0.4" }, "devDependencies": { - "fs-extra": "^11.3.3" + "fs-extra": "^11.3.3", + "postcss": "^8.5.8", + "postcss-custom-media": "^12.0.1" + } + }, + "node_modules/@csstools/cascade-layer-name-parser": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-3.0.0.tgz", + "integrity": "sha512-/3iksyevwRfSJx5yH0RkcrcYXwuhMQx3Juqf40t97PeEy2/Mz2TItZ/z/216qpe4GgOyFBP8MKIwVvytzHmfIQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0" + } + }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz", + "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^4.0.0" + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz", + "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=20.19.0" + } + }, + "node_modules/@csstools/media-query-list-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz", + "integrity": "sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0" } }, "node_modules/@esbuild/aix-ppc64": { @@ -1161,9 +1254,9 @@ } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.8", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz", + "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==", "funding": [ { "type": "opencollective", @@ -1188,6 +1281,35 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-custom-media": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-12.0.1.tgz", + "integrity": "sha512-66syE14+VeqkUf0rRX0bvbTCbNRJF132jD+ceo8th1dap2YJEAqpdh5uG98CE3IbgHT7m9XM0GIlOazNWqQdeA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "dependencies": { + "@csstools/cascade-layer-name-parser": "^3.0.0", + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0", + "@csstools/media-query-list-parser": "^5.0.0" + }, + "engines": { + "node": ">=20.19.0" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/regexparam": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz", diff --git a/package.json b/package.json index 75793d2..b90e052 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,8 @@ "vite": "7.0.4" }, "devDependencies": { - "fs-extra": "^11.3.3" + "fs-extra": "^11.3.3", + "postcss": "^8.5.8", + "postcss-custom-media": "^12.0.1" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..63af7d8 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +import customMedia from 'postcss-custom-media' + +export default { + plugins: [customMedia()] +} diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte index d2b54e4..12288c5 100644 --- a/src/components/layout/Header.svelte +++ b/src/components/layout/Header.svelte @@ -166,7 +166,7 @@ } /* Mobile — var(--breakpoint-mobile) = 700px */ - @media screen and (max-width: 700px) { + @media (--mobile) { .navbar { min-height: 8vh; padding: 10vh 0 1vh; @@ -179,7 +179,7 @@ } /* Tablet — var(--breakpoint-tablet) = 912px */ - @media screen and (min-width: 701px) and (max-width: 912px) { + @media (--tablet-only) { .navbar-item { font-size: var(--font-size-paragraph-tablet); padding: 1vmax 1.8vmax; diff --git a/src/components/layout/Menu.svelte b/src/components/layout/Menu.svelte index ac08a0e..73fb9d3 100644 --- a/src/components/layout/Menu.svelte +++ b/src/components/layout/Menu.svelte @@ -244,7 +244,7 @@ } /* Mobile — var(--breakpoint-mobile) = 700px */ - @media screen and (max-width: 700px) { + @media (--mobile) { .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 screen and (min-width: 701px) and (max-width: 912px) { + @media (--tablet-only) { .menu-list { font-size: var(--font-size-title-section-tablet); } diff --git a/src/styles/variables.css b/src/styles/variables.css index 3402246..f9ac8e3 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -1,3 +1,8 @@ +/* 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 */ @@ -6,10 +11,6 @@ --color-background: #000; --color-text: #fff; - /* BREAKPOINTS (référence — non utilisables directement dans @media) - * --breakpoint-mobile : 700px - * --breakpoint-tablet : 912px - */ --breakpoint-mobile: 700px; --breakpoint-tablet: 912px; diff --git a/src/views/Expertise.svelte b/src/views/Expertise.svelte index 3856aed..4e7922e 100644 --- a/src/views/Expertise.svelte +++ b/src/views/Expertise.svelte @@ -363,7 +363,7 @@ } /* Mobile (≤ 700px) */ - @media screen and (max-width: 700px) { + @media (--mobile) { .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 screen and (min-width: 701px) and (max-width: 912px) { + @media (--tablet-only) { .expertise-title { grid-area: 5/6 / span 4 / span 12; font-size: var(--font-size-title-main-tablet); diff --git a/src/views/Home.svelte b/src/views/Home.svelte index 9777b12..f19145e 100644 --- a/src/views/Home.svelte +++ b/src/views/Home.svelte @@ -175,7 +175,7 @@ } } - @media screen and (min-width: 701px) and (max-width: 912px) { + @media (--tablet-only) { .home-subtitle { font-size: var(--font-size-subtitle-tablet); width: 70%; diff --git a/src/views/Play.svelte b/src/views/Play.svelte index 8c25c97..6f3ea1a 100644 --- a/src/views/Play.svelte +++ b/src/views/Play.svelte @@ -386,7 +386,7 @@ } /* --- Mobile (≤ 700px) --- */ - @media screen and (max-width: 700px) { + @media (--mobile) { .game-preview { display: none; } diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte index 42af7e2..d133a68 100644 --- a/src/views/Portfolio.svelte +++ b/src/views/Portfolio.svelte @@ -291,7 +291,7 @@ } /* Mobile (≤ 700px) */ - @media screen and (max-width: 700px) { + @media (--mobile) { .portfolio-gallery { grid-area: 1/1 / span 20 / span 20; opacity: 0.3;