New CSS layout

README.md

@@ -1,4 +1,4 @@
-# ![](themes/dark/icons/32.png) LibreQR
+# ![](themes/libreqr/icons/32.png) LibreQR
 
 [Lire ceci en français](README_fr.md)
 

README_fr.md

@@ -1,4 +1,4 @@
-# ![](themes/dark/icons/32.png) LibreQR
+# ![](themes/libreqr/icons/32.png) LibreQR
 
 [Read this in english](README.md)
 

index.php

@@ -135,8 +135,6 @@ if (
 
     <form method="post" action="./#output">
 
-      <div id="firstWrapper">
-
       <div class="param" id="txtParam">
         <details>
           <summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
@@ -144,7 +142,7 @@ if (
             <?= $loc['help_content'] ?>
           </div>
         </details>
-          <textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
+        <textarea rows="3" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
       </div>
 
       <div id="sideParams">
@@ -198,24 +196,18 @@ if (
 
       </div>
 
-      </div>
-
       <div id="colors">
 
         <div class="param">
           <label for="bgColor"><?= $loc['label_bgColor'] ?></label>
-          <div class="inputColorContainer">
           <input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
         </div>
-        </div>
 
         <div class="param">
           <label for="mainColor"><?= $loc['label_mainColor'] ?></label>
-          <div class="inputColorContainer">
           <input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
         </div>
       </div>
-      </div>
 
       <div class="centered">
         <input class="button" type="submit" value="<?= $loc['button_create'] ?>" />
@@ -290,7 +282,7 @@ if (
         <?php } ?>
 
         <section class="metaText">
-          <?= $loc['metaText_legal'] ?>
+          <small><?= $loc['metaText_legal'] ?></small>
         </section>
 
       </footer>

locales/template.php

@@ -29,6 +29,4 @@ $loc = array(
 
   'metaText_qr' => "metaText_qr",
   'metaText_legal' => "metaText_legal",
-
-  'opensearch_description' => "opensearch_description",
 );

style.less

@@ -35,7 +35,7 @@ body {
   display: flex;
   flex-direction: column;
 
-  width: 814px;
+  max-width: 812px;
   height: 100%;
 
   margin: 0px;
@@ -103,28 +103,22 @@ code {
   }
 }
 
-#txtParam {
-  width: 100%;
-}
-
 #sideParams {
   width: 100%;
   text-align: center;
-  margin-left: 12px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  & .param {
+    max-width: 270px;
+    box-sizing: border-box;
+  }
 }
 
 summary {
   margin-left: 20px;
   cursor: help;
-
-  #sideParams & {
-    text-align: center;
-  }
-}
-
-#firstWrapper {
-  display: flex;
-  flex-direction: row;
 }
 
 #qrCode {
@@ -200,7 +194,7 @@ header {
 }
 
 #titles {
-  margin-left: 20px;
+  margin-left: 2%;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -224,7 +218,11 @@ h2 {
   flex-direction: row;
 }
 
-#showOnlyQR, #downloadQR {
+#downloadQR {
+  margin-top: 20px;
+}
+
+#showOnlyQR {
   margin-top: 30px;
 }
 
@@ -234,12 +232,6 @@ h2 {
   margin-right: 0px;
 }
 
-.inputColorContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
 ::selection {
 
   @media @light {
@@ -260,7 +252,8 @@ label[for=txt] summary {
 #colors {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: space-around;
+  flex-wrap: wrap;
   text-align: center;
 
   & .param {
@@ -268,7 +261,7 @@ label[for=txt] summary {
     display: flex;
     justify-content: center;
     flex-direction: column;
-    width: 100%;
+    align-items: center;
   }
 }
 
@@ -296,15 +289,18 @@ label[for=txt] summary {
 }
 
 footer {
-  font-size: 14px;
+  font-size: 16px;
   margin-top: auto;
+  padding-top: 10px;
   text-align: left;
 }
 
+small {
+  font-size: 14px;
+}
+
 #info {
   font-size: 16px;
-  bottom: 20px;
-  right: 20px;
   margin: 0px;
 
   & h3 {
@@ -411,9 +407,14 @@ input[type=color] {
   }
 }
 
+#txtParam {
+  display: flex;
+  flex-direction: column;
+}
+
 #txt {
   padding: 10px;
-  width: 500px;
+  width: auto;
   scrollbar-width: auto;
 
   @media @light {
@@ -451,36 +452,6 @@ input[type=submit] {
   }
 }
 
-/* Media queries */
-
-@media (max-width: 850px) {
-
-  body {
-    width: auto;
-  }
-
-  #firstWrapper {
-    flex-direction: column;
-  }
-
-  #txt {
-    width: 92%;
-  }
-
-}
-
-@media (max-width: 500px) { // Mobile version
-
-  #colors {
-    flex-direction: column;
-  }
-
-  #txt {
-    width: 85%;
-  }
-
-}
-
 a[download]::before {
   content: "💾 ";