From b703729e660d0de752eb478838471542f0a46df7 Mon Sep 17 00:00:00 2001 From: adrien Date: Wed, 30 Apr 2025 03:25:53 +0200 Subject: [PATCH] responsive design --- index.php | 65 +++++++++++++++++++------------------ style.css | 97 +++++++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 110 insertions(+), 52 deletions(-) diff --git a/index.php b/index.php index c5df204..f05736e 100644 --- a/index.php +++ b/index.php @@ -53,7 +53,7 @@ $grille->current();
-

+

@@ -80,32 +80,35 @@ $grille->current();

- valid()): ?> - - - - - - - - - - - - - +

Mots croisés

+
+ valid()): ?> +
+
"> - grille[$y][$x] == " "): ?> - - - - -
+ + + + + + + + + + + + + + - - -
"> + grille[$y][$x] == " "): ?> + + + + +
-
-
+ +
+

Horizontalement

    @@ -124,7 +127,7 @@ $grille->current();
-
+

Verticalement

    @@ -143,10 +146,10 @@ $grille->current();
-
- -

Erreur de génération de la grille

- + +

Erreur de génération de la grille

+ +
name="lignes" value="" /> name="colonnes" value="" /> diff --git a/style.css b/style.css index 4220c25..9170b6c 100644 --- a/style.css +++ b/style.css @@ -1,20 +1,27 @@ body { margin: 0; - padding: 0; + padding: 2rem 1rem; background-color: white; font-family: Times, 'Times New Roman', Georgia, serif; } form { - padding: 1rem; - min-height: calc(100vh - 2rem); display: flex; flex-flow: column; - justify-content: space-evenly; + min-height: calc(100vh - 4rem); } h1 { margin: 0; + letter-spacing: 0.2em; +} + +h1.large.width { + display: inherit; +} + +h1.small.width { + display: none; } h1 table { @@ -33,15 +40,26 @@ h2 { text-align: center; } -table.grille { +.grille-et-definitions { + display: flex; + flex-flow: row; + justify-content: space-evenly; + flex-wrap: wrap; + height: max-content; + flex-grow: 1; + align-items: center; +} + +.grille table { border-collapse: collapse; margin: 0 auto; height: fit-content; } -.grille th { - width: 25px; - height: 30px; +.grille th, +.grille td { + width: 2rem; + height: 2rem; text-align: center; } @@ -91,13 +109,11 @@ table.grille { } .definitions { - display: flex; - justify-content: space-evenly; + width: 30%; } -.definitions .horizontales, -.definitions .verticales { - width: 45%; +.definitions.horizontales { + order: -1; } .definitions ol { @@ -141,8 +157,8 @@ button[type='submit'] { } button[type='submit'] { - width: fit-content; - margin: 0 auto; + width: 100%; + margin: auto; border: none; background: none; font-family: inherit; @@ -150,6 +166,7 @@ button[type='submit'] { display: flex; align-items: center; gap: 0.5em; + justify-content: center; } button[type="submit"]:hover { @@ -163,6 +180,41 @@ button[type="submit"]:active { } +@media (max-width: 1024px) { + body { + padding: 1.5rem 1rem; + } + + h1.large.width { + display: none; + } + + h1.small.width { + display: initial; + } + + h1 table { + line-height: 0.7; + } + + form { + min-height: calc(100vh - 2rem); + } + + .grille { + width: 100%; + margin: auto; + } + + .definitions { + width: 45%; + } + + .definitions.horizontales { + order: inherit + } +} + @media (max-width: 640px) { * { box-sizing: border-box; @@ -171,12 +223,15 @@ button[type="submit"]:active { body { width: auto; margin: 0; - padding: 0; + padding: 1rem 0; } - - h1 table { - line-height: 0.7; + h1.large.width { + display: none; + } + + h1.small.width { + display: none; } .grille td { @@ -189,8 +244,8 @@ button[type="submit"]:active { flex-flow: column; } - .definitions .horizontales, - .definitions .verticales { + .definitions.horizontales, + .definitions.verticales { width: 100%; } }