Fix scroll on tab change

static/style.css

@@ -78,7 +78,7 @@ nav > :nth-child(1) > img {
     margin-left: 7vw;
   }
 
-  #inputs > *:not(:nth-child(1)) {
+  #inputs > * {
     padding-left: 10%;
     padding-right: 10%;
   }
@@ -198,16 +198,14 @@ div[id^="step"]:target {
   display: block;
 }
 
-#inputs > div:first-child {
+div.randomize-button-container {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 7vw;
   border-bottom: 1px solid #dde5f1;
-}
-
-#inputs > div:first-child > button.randomize {
-  width: 60%;
+  width: 125%;
+  margin-left: -12.5%;
 }
 
 div.navButtons {
@@ -234,7 +232,7 @@ body {
     padding-bottom: 20px;
   }
 
-  #inputs > div:nth-child(1) {
+  .randomize-button-container {
     display: none !important;
   }
 
@@ -259,7 +257,7 @@ body {
     display: none;
   }
 
-  div#step3 > div {
+  div#step3 > .fontpicker {
     max-height: 150px;
     overflow-x: auto;
   }
@@ -345,12 +343,12 @@ div#step4 > div:nth-of-type(1) {
   background-size: 400%;
 }
 
-div#step3 > div:nth-of-type(1) > input[type="radio"],
+div#step3 input[type="radio"],
 div#step4 input[type="radio"] {
   display: none;
 }
 
-div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
+div#step3 input[type="radio"] + label {
   display: block;
   width: 100%;
   font-size: 2.4em;
@@ -358,7 +356,7 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
   padding-right: 20px;
 }
 
-div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label {
+div#step3 input[type="radio"]:checked + label {
   color: white;
   background-color: #497ed5;
 }

views/index.ejs

@@ -25,10 +25,10 @@
       <a class="fa fa-cogs" href="#step5"></a>
     </nav>
     <form id="inputs" action="./generate.png" target="_blank">
-      <div>
-	<a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
-      </div>
       <div id="step1">
+	<div class="randomize-button-container">
+	  <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	</div>
 	<h2 class="title-small">Choisissez 2 couleurs</h2>
 	<h2 class="title-big">Choisissez la couleur de fond</h2>
 	<div class="colorpicker">
@@ -101,6 +101,9 @@
 	</div>
       </div>
       <div id="step2">
+	<div class="randomize-button-container">
+	  <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	</div>
 	<h2>Remplissez le texte à trou</h2>
 	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" name="text" maxlength="90"></textarea>
 	<div class="navButtons">
@@ -109,8 +112,11 @@
 	</div>
       </div>
       <div id="step3">
+	<div class="randomize-button-container">
+	  <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	</div>
 	<h2>Choisissez votre police</h2>
-	<div>
+	<div class="fontpicker">
 	  <input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
 	  <input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
 	  <input type="radio" id="radio-font-3" name="font" value="boeticher" /><label for="radio-font-3" style="font-family: boeticher">Boeticher</label>
@@ -129,6 +135,9 @@
 	</div>
       </div>
       <div id="step4">
+	<div class="randomize-button-container">
+	  <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	</div>
 	<h2>Choisissez votre icône</h2>
 	<div class="iconpicker">
 	  <input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
@@ -210,6 +219,9 @@
 	</div>
       </div>
       <div id="step5">
+	<div class="randomize-button-container">
+	  <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	</div>
 	<h2>Signez votre création ! (optionnel)</h2>
 	<input type="text" id="signature" name="signature" />
 	<div class="navButtons">