adrien/mots-croises
adrien/mots-croises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive design

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-04-30 03:25:53 +02:00
parent cb8b42af67
commit b703729e66
2 changed files with 110 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.php
View File

@ -53,7 +53,7 @@ $grille->current();
<body> <body>
<form id="grilleForm" method="get" location="."> <form id="grilleForm" method="get" location=".">
<h1> <h1 class="large width">
<table> <table>
<tbody> <tbody>
<tr> <tr>
@ -80,8 +80,11 @@ $grille->current();
</tbody> </tbody>
</table> </table>
</h1> </h1>
<h1 class="small width">Mots croisés</h1>
<div class="grille-et-definitions">
<?php if ($grille->valid()): ?> <?php if ($grille->valid()): ?>
<table class="grille"> <div class="grille">
<table>
<tr> <tr>
<th></th> <th></th>
<?php for ($x = 0; $x < $largeur; $x++): ?> <?php for ($x = 0; $x < $largeur; $x++): ?>
@ -104,8 +107,8 @@ $grille->current();
</tr> </tr>
<?php endfor; ?> <?php endfor; ?>
</table> </table>
<div class="definitions"> </div>
<div class="horizontales"> <div class="definitions horizontales">
<h2>Horizontalement</h2> <h2>Horizontalement</h2>
<ol> <ol>
<?php for ($y = 0; $y < $hauteur; $y++): ?> <?php for ($y = 0; $y < $hauteur; $y++): ?>
@ -124,7 +127,7 @@ $grille->current();
<?php endfor; ?> <?php endfor; ?>
</ol> </ol>
</div> </div>
<div class="verticales"> <div class="definitions verticales">
<h2>Verticalement</h2> <h2>Verticalement</h2>
<ol type="A"> <ol type="A">
<?php for ($x = 0; $x < $largeur; $x++): ?> <?php for ($x = 0; $x < $largeur; $x++): ?>
@ -143,10 +146,10 @@ $grille->current();
<?php endfor; ?> <?php endfor; ?>
</ol> </ol>
</div> </div>
</div>
<?php else: ?> <?php else: ?>
<h3 class="erreur">Erreur de génération de la grille</h3> <h3 class="erreur">Erreur de génération de la grille</h3>
<?php endif ?> <?php endif ?>
</div>
<input type="hidden" id="lignes" <?php if (isset($_GET["lignes"])): ?>name="lignes" <?php endif ?>value="<?= $hauteur ?>" /> <input type="hidden" id="lignes" <?php if (isset($_GET["lignes"])): ?>name="lignes" <?php endif ?>value="<?= $hauteur ?>" />
<input type="hidden" id="colonnes" <?php if (isset($_GET["colonnes"])): ?>name="colonnes" <?php endif ?>value="<?= $largeur ?>" /> <input type="hidden" id="colonnes" <?php if (isset($_GET["colonnes"])): ?>name="colonnes" <?php endif ?>value="<?= $largeur ?>" />

91
style.css
View File

@ -1,20 +1,27 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 2rem 1rem;
background-color: white; background-color: white;
font-family: Times, 'Times New Roman', Georgia, serif; font-family: Times, 'Times New Roman', Georgia, serif;
} }
form { form {
padding: 1rem;
min-height: calc(100vh - 2rem);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: space-evenly; min-height: calc(100vh - 4rem);
} }
h1 { h1 {
margin: 0; margin: 0;
letter-spacing: 0.2em;
}
h1.large.width {
display: inherit;
}
h1.small.width {
display: none;
} }
h1 table { h1 table {
@ -33,15 +40,26 @@ h2 {
text-align: center; 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; border-collapse: collapse;
margin: 0 auto; margin: 0 auto;
height: fit-content; height: fit-content;
} }
.grille th { .grille th,
width: 25px; .grille td {
height: 30px; width: 2rem;
height: 2rem;
text-align: center; text-align: center;
} }
@ -91,13 +109,11 @@ table.grille {
} }
.definitions { .definitions {
display: flex; width: 30%;
justify-content: space-evenly;
} }
.definitions .horizontales, .definitions.horizontales {
.definitions .verticales { order: -1;
width: 45%;
} }
.definitions ol { .definitions ol {
@ -141,8 +157,8 @@ button[type='submit'] {
} }
button[type='submit'] { button[type='submit'] {
width: fit-content; width: 100%;
margin: 0 auto; margin: auto;
border: none; border: none;
background: none; background: none;
font-family: inherit; font-family: inherit;
@ -150,6 +166,7 @@ button[type='submit'] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
justify-content: center;
} }
button[type="submit"]:hover { 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) { @media (max-width: 640px) {
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -171,12 +223,15 @@ button[type="submit"]:active {
body { body {
width: auto; width: auto;
margin: 0; margin: 0;
padding: 0; padding: 1rem 0;
} }
h1.large.width {
display: none;
}
h1 table { h1.small.width {
line-height: 0.7; display: none;
} }
.grille td { .grille td {