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

Feat: breakpoints CSS en @custom-media via postcss-custom-media

Browse source 
- postcss.config.js: plugin postcss-custom-media
- variables.css: @custom-media --mobile / --tablet / --tablet-only
- Remplacement de tous les max-width: 700px et 912px hardcodés
  par @media (--mobile), (--tablet), (--tablet-only)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-10 08:34:37 +01:00
parent d42217fd20
commit 66767f0136
10 changed files with 148 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/styles/variables.css
View file

@ -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;