Fix CSS layout

index.php

@@ -120,7 +120,7 @@ if (
 
         <div id="firstWrapper">
 
-          <div class="param">
+          <div class="param" id="txtParam">
             <label for="txt">
               <details>
                 <summary><?= $loc['label_content'] ?></summary>
@@ -202,6 +202,8 @@ if (
 
       </form>
 
+      <section id="output">
+
         <?php
 
         if (!empty($params['txt'])) {
@@ -219,16 +221,17 @@ if (
             hexdec(substr($params['mainColor'], -6))
           );
           ?>
-      <div class="centered">
+          <div class="centered" id="downloadQR">
             <a href="<?php echo $imagePath; ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
           </div>
 
           <div class="centered" id="showOnlyQR">
             <a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $imagePath; ?>"><img alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?= $imagePath; ?>"/></a>
           </div>
-    <?php
+
-    }
+        <?php } ?>
-      ?>
+
+        </section>
 
         <footer>
 

style.less

@@ -27,6 +27,27 @@ You should have received a copy of the GNU Affero General Public License along w
   }
 }
 
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0px;
+  font-weight: normal;
+  font-size: 20px;
+  height: 100%;
+
+  @media @light {
+    color: @text-light;
+    background-color: @bg-light;
+  }
+
+  @media @dark {
+    color: @text-dark;
+    background-color: @bg-dark;
+  }
+}
+
 a {
   text-decoration: underline;
 
@@ -43,8 +64,8 @@ a {
   }
 }
 
-p {
+p.helpText {
-  margin: 10px;
+  margin: 5px 0px 0px 0px;
 }
 
 details .helpText {
@@ -61,6 +82,11 @@ details .helpText {
   }
 }
 
+#sideParams {
+  text-align: center;
+  margin-left: 12px;
+}
+
 #sideParams summary {
   text-align: center;
   margin-left: 20px;
@@ -84,44 +110,18 @@ details .helpText {
   text-decoration: none;
 }
 
-form {
-  flex-grow: 1;
-  margin-bottom: 30px;
-}
-
 main {
   display: flex;
   flex-direction: column;
   margin-left: auto;
   margin-right: auto;
   width: 814px;
-  height: 99%;
+  height: 100%;
-}
-
-body {
-  margin: 18px;
-  font-weight: normal;
-  font-size: 20px;
-  height: 99%;
-
-  @media @light {
-    color: @text-light;
-    background-color: @bg-light;
-  }
-
-  @media @dark {
-    color: @text-dark;
-    background-color: @bg-dark;
-  }
-}
-
-html {
-  height: 97%;
 }
 
 header {
   text-align: center;
-  padding: 0px;
+  padding-top: 12px;
   margin: 0px;
   height: 64px;
 }
@@ -156,7 +156,11 @@ h2 {
   flex-direction: row;
 }
 
-#showOnlyQR {
+section#output {
+  flex-grow: 1;
+}
+
+#showOnlyQR, #downloadQR {
   margin-top: 30px;
 }
 
@@ -187,8 +191,8 @@ h2 {
   }
 }
 
-label[for=txt] {
+label[for=txt] summary {
-  padding-left: 22px;
+  margin-left: 22px;
 }
 
 #colors {
@@ -231,7 +235,7 @@ label[for=txt] {
 
 footer {
   font-size: 14px;
-  padding-top: 20px;
+  margin-top: 10px;
   text-align: left;
 }
 
@@ -252,6 +256,10 @@ header, footer {
   }
 }
 
+p.helpText {
+  width: 534px;
+}
+
 /* Inputs */
 
 #redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
@@ -304,8 +312,15 @@ header, footer {
   }
 }
 
-#redondancy, #size, #margin {
+#redondancy {
   width: 250px;
+}
+
+#size, #margin {
+  width: 234px;
+}
+
+#redondancy, #size, #margin {
   height: 40px;
   @media @light {
     background-color: @bgField-light;
@@ -384,10 +399,6 @@ input[type=color] {
     flex-direction: column;
   }
 
-  body {
-    margin: 10px;
-  }
-
   #txt {
     width: 92%;
   }