Changement de la taille des icônes sur petits écrans

This commit is contained in:
JonathanMM 2022-01-31 19:23:25 +01:00
parent 3bbed6ea52
commit a8bf4a10a7
2 changed files with 10 additions and 8 deletions

View File

@ -64,7 +64,7 @@
<audio preload src="sons/lettre-bien-place.wav" id="son-lettre-bien-place"></audio>
<svg>
<symbol id="icone-son-active" viewBox="0 0 32 32" width="32" height="32">
<symbol id="icone-son-active" viewBox="0 0 32 32">
<path
d="m11.152 6.0314-4.3386 3.19v13.555l1.4368 1.0571c0.78755 0.57894 2.74 2.0158 4.3386 3.1924 1.5962 1.1743 2.9111 2.1353 2.9228 2.1353 0.01172 0 0.0211-5.6043 0.0211-13.161 0-7.6739-0.0094-13.161-0.0211-13.161-0.01172 0-1.9736 1.4368-4.3597 3.1924z"
/>
@ -79,7 +79,7 @@
d="m17.759 12.119c-0.42425 0.13126-0.64457 0.59769-0.46409 0.98912 0.03516 0.07969 0.13595 0.21564 0.25314 0.33987 0.64926 0.70317 0.98913 1.5821 0.98913 2.5525 0 1.0032-0.3469 1.8681-1.0407 2.6064-0.18751 0.19923-0.26252 0.36799-0.26252 0.58598 0.0023 0.38206 0.2883 0.67973 0.67739 0.70551 0.31877 0.01875 0.51566-0.11016 0.92115-0.60941 1.0454-1.2868 1.411-2.9978 0.98913-4.6269-0.21798-0.84615-0.68911-1.6759-1.3009-2.297-0.12657-0.12892-0.19454-0.17814-0.30002-0.21798-0.13829-0.04922-0.34455-0.06329-0.46175-0.02812z"
/>
</symbol>
<symbol id="icone-son-desactive" viewBox="0 0 32 32" width="32" height="32">
<symbol id="icone-son-desactive" viewBox="0 0 32 32">
<path
d="m20.077 11.234a1.1719 1.1719 0 0 0-0.829 0.3438 1.1719 1.1719 0 0 0 0 1.6564l7.1895 7.1879a1.1719 1.1719 0 0 0 1.6564 0 1.1719 1.1719 0 0 0 0-1.6564l-7.1879-7.1879a1.1719 1.1719 0 0 0-0.829-0.3438z"
stroke-linecap="round"
@ -95,7 +95,7 @@
/>
<path d="m1 16v6.7857l2.058-0.0049 2.0556-0.0074v-13.548l-2.0556-0.0074-2.058-0.00494z" />
</symbol>
<symbol id="icone-croix" width="32" height="32" viewBox="0 0 8.4666665 8.4666669">
<symbol id="icone-croix" viewBox="0 0 8.4666665 8.4666669">
<path
style="
fill: none;
@ -123,7 +123,7 @@
id="path1432"
/>
</symbol>
<symbol id="icone-stats" viewBox="0 0 32 32" width="32" height="32">
<symbol id="icone-stats" viewBox="0 0 32 32">
<path
d="m3.077 5.3688c-0.14233 0-0.25668 0.12077-0.25668 0.27108v23.379c0 0.14944 0.11435 0.27108 0.25668 0.27108h5.9999c0.14233 0 0.25668-0.12164 0.25668-0.27108v-23.379c0-0.15031-0.11435-0.27108-0.25668-0.27108z"
stroke-linecap="round"
@ -147,13 +147,13 @@
/>
<path d="m2.3991 2.3983v27.203h27.202" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.7903" />
</symbol>
<symbol id="icone-regles" viewBox="0 0 32 32" width="32" height="32">
<symbol id="icone-regles" viewBox="0 0 32 32">
<path
d="m13.787 23.247h2.9075v3.638h-2.9075zm2.8216-2.1055h-2.7357v-2.2057q0-1.4466 0.40104-2.3776 0.40104-0.93099 1.6901-2.1628l1.2891-1.2747q0.8164-0.75911 1.1745-1.4323 0.3724-0.67318 0.3724-1.375 0-1.2747-0.94531-2.0625-0.93099-0.78776-2.4779-0.78776-1.1315 0-2.4206 0.5013-1.2747 0.5013-2.6641 1.4609v-2.6927q1.3464-0.81641 2.7214-1.2174 1.3893-0.40104 2.8646-0.40104 2.6354 0 4.2253 1.3893 1.6042 1.3893 1.6042 3.6667 0 1.0885-0.51562 2.0768-0.51562 0.97396-1.8047 2.2057l-1.2604 1.2318q-0.67318 0.67318-0.95963 1.0599-0.27214 0.3724-0.38672 0.73047-0.08594 0.30078-0.12891 0.73047-0.04297 0.42969-0.04297 1.1745z"
/>
<circle cx="16" cy="16" r="14" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</symbol>
<symbol id="icone-config" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<symbol id="icone-config" viewBox="0 0 32 32">
<path
d="m25.1 1.0009c-0.24859-4e-3 -0.49949 0.01-0.74873 0.0174-2.0188 0.0622-4.01 1.6525-4.1616 3.7439-0.50981 2.1512-0.87169 4.4107-1.974 6.354-3.7058 3.71-7.6856 7.1393-11.505 10.732-1.5478 1.48-3.1912 2.8734-4.6112 4.4788-1.1941 1.7248 0.0372 4.6853 2.237 4.6724 1.7332-0.0568 2.7416-1.7429 3.8664-2.8178 4.1892-4.5584 8.0333-9.4317 12.34-13.883 1.1377-0.93788 2.716-1.0269 4.0959-1.4049 0.92741-0.23075 1.9087-0.30646 2.8033-0.63139 1.6048-1.0192 2.7463-2.8492 2.9189-4.7437 0.057-0.45104-0.44752-0.30978-0.44752-0.30978l-2.78 1.2811-2.1238-1.7534-0.35649-1.9778s0.64592-0.63983 0.93495-0.69523l2.7286-1.018c-0.10848-1.1283-1.5342-1.6956-2.4817-1.9526-0.24051-0.0653-0.48684-0.0877-0.73543-0.0919zm-2.0729 7.6496 1.2424 2.9363-1.1244 0.45314-0.0242-0.0565 0.3074-0.12799-0.0588-0.1407 0.0644-0.0145 0.1478-0.0331-0.0662-0.2953-0.1475 0.0328-0.11675 0.026-0.14721-0.35234 0.063-0.0142 0.1478-0.0331-0.0659-0.2953-0.14779 0.0328-0.11558 0.0257-0.1472-0.35265 0.0621-0.0139 0.14779-0.0328-0.0662-0.29559-0.1475 0.0331-0.11439 0.0257-0.1472-0.35293 0.0606-0.0136 0.1478-0.0328-0.0659-0.29558-0.1478 0.0331-0.11321 0.0254-0.20514-0.49186c-0.21772 0.0877-0.22976 0.0949-0.3358 0.13893l-0.0254-0.0594c0.37973-0.15303 0.7595-0.30603 1.1392-0.45906zm-1.9817 0.79839 0.029 0.0674c-0.10243 0.0423-0.10517 0.0455-0.29885 0.12356l0.0987 0.23499-0.0511 0.0115-0.14779 0.0331 0.0662 0.29529 0.1475-0.0331 0.10434-0.0233 0.14839 0.35264-0.0517 0.0115-0.14779 0.0331 0.0659 0.2953 0.1478-0.0331 0.10493-0.0234 0.14809 0.35235-0.0523 0.0118-0.1478 0.0331 0.0662 0.2953 0.1475-0.0328 0.10582-0.0236 0.14809 0.35234-0.0529 0.0118-0.14779 0.0331 0.0659 0.2953 0.14779-0.0328 0.10641-0.0237 0.1676 0.39876 0.31894-0.13272 0.0201 0.0467-1.0538 0.42447-1.2418-2.9364c0.34615-0.13948 0.69225-0.27907 1.0384-0.41855zm-16.315 16.667a1.7456 1.7456 0 0 1 1.7454 1.7457 1.7456 1.7456 0 0 1-1.7454 1.7454 1.7456 1.7456 0 0 1-1.7454-1.7454 1.7456 1.7456 0 0 1 1.7454-1.7457z"
stroke-width=".15134"

View File

@ -13,6 +13,7 @@
--couleur-bordure-grille: #ffffff;
--couleur-police: #ffffff;
--couleur-police-grille: #ffffff;
--taille-icone: 32px;
}
@font-face {
@ -64,8 +65,8 @@ h1 {
#configuration-config-icone,
#configuration-stats-icone,
#configuration-audio-icone {
height: 32px;
width: 32px;
height: var(--taille-icone);
width: var(--taille-icone);
}
#grille {
@ -318,6 +319,7 @@ h1 {
@media (max-width: 500px) {
:root {
--taille-cellule: 42px;
--taille-icone: 28px;
}
body,