smartphone style

This commit is contained in:
Adrien MALINGREY 2025-04-24 22:12:33 +02:00
parent 65e31d71c6
commit 64bc91d4a0
2 changed files with 47 additions and 9 deletions

View File

@ -3,10 +3,6 @@
const HAUTEUR_PAR_DEFAUT = 6; const HAUTEUR_PAR_DEFAUT = 6;
const LARGEUR_PAR_DEFAUT = 6; const LARGEUR_PAR_DEFAUT = 6;
echo "<!--\n";
var_dump($_SERVER);
echo "\n-->\n";
$id = filter_input(INPUT_GET, 'grille', FILTER_VALIDATE_REGEXP, [ $id = filter_input(INPUT_GET, 'grille', FILTER_VALIDATE_REGEXP, [
"options" => [ "options" => [
@ -15,7 +11,7 @@ $id = filter_input(INPUT_GET, 'grille', FILTER_VALIDATE_REGEXP, [
]); ]);
if (!$id) { if (!$id) {
$_GET["grille"] = uniqid(); $_GET["grille"] = uniqid();
header("Location: " . $_SERVER['REQUEST_URI'] . "?" . http_build_query($_GET)); header("Location: " . $_SERVER['DOCUMENT_URI'] . "?" . http_build_query($_GET));
exit; exit;
} }
@ -50,6 +46,7 @@ $grille = new Grille($hauteur, $largeur, $id);
<title>Mots croisés</title> <title>Mots croisés</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>

View File

@ -32,14 +32,15 @@ table.grille {
margin: 0 auto; margin: 0 auto;
} }
.grille th, .grille th {
.grille td { width: 25px;
width: 30px;
height: 30px; height: 30px;
text-align: center; text-align: center;
} }
.grille td { .grille td {
width: 2rem;
height: 2rem;
border: 1px solid black; border: 1px solid black;
padding: 2px; padding: 2px;
font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans; font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans;
@ -116,3 +117,43 @@ button[type="submit"]:hover {
button[type="submit"]:active { button[type="submit"]:active {
color: darkorchid; color: darkorchid;
} }
@media (max-width: 640px) {
* {
box-sizing: border-box;
}
body {
width: auto;
margin: 0;
padding: 0;
}
h1 table {
line-height: 0.7;
}
.grille td {
width: 2.5rem;
height: 2.5rem;
}
.definitions {
display: flex;
flex-flow: column;
}
.definitions .horizontales,
.definitions .verticales {
width: 100%;
}
}
@media (max-device-width:768px) and (orientation: landscape) {
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
}