x-keyboard: Improve buttons (#137)

Nuclear-Squid · Mar 17, 2024 · 51eebb1 · 51eebb1
1 parent 5cf9724
commit 51eebb1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 16 deletions.
diff --git a/www/assets/css/keebs.css b/www/assets/css/keebs.css
@@ -45,29 +45,23 @@
 
 .keyboard form {
   display: flex;
-  justify-content: right;
-  margin: 2px;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 0 5em;
 }
 
 .keyboard fieldset {
   border: none;
   padding: 0 1px;
   margin: 0;
   text-wrap: balance;
-}
-
-.keyboard fieldset:first-child {
-  display: none;
-}
-
-.keyboard fieldset:last-child {
-  text-align: right;
+  text-align: center;
 }
 
 .keyboard form input {
   box-sizing: border-box;
   width: auto;
-  height: 1.8em;
+  height: auto;
   line-height: 1.8em;
   font-size: 0.8em;
   appearance: none;
@@ -102,8 +96,7 @@
   text-align: center;
 }
 
-@media only screen and (min-width: 480px) {
-  .keyboard fieldset:first-child { display: inline-block; }
+@media only screen and (min-width: 600px) {
   .keyboard form { justify-content: space-between; }
 }
 

diff --git a/www/layouts/shortcodes/x-keyboard.html b/www/layouts/shortcodes/x-keyboard.html
@@ -9,11 +9,11 @@
 
   <form>
     <fieldset class="layers" hidden>
-      <input type="radio" name="layers" label="typo"  value="odk" checked
+      <input type="radio" name="layers" label="Typo"  value="odk" checked
         title="caractères obtenus par la touche « Typo » (vue simplifiée)">
-      <input type="radio" name="layers" label="mix"   value="mixed"
+      <input type="radio" name="layers" label="Typo+Symboles"   value="mixed"
         title="caractères obtenus par les touches « Typo » et « Symboles »">
-      <input type="radio" name="layers" label="altgr" value="altgr"
+      <input type="radio" name="layers" label="Symboles" value="altgr"
         title="caractères obtenus par la touche « Symboles »">
     </fieldset>
     <fieldset class="geometry">