explorer.html

@@ -41,7 +41,11 @@
         Le symbole &#8252;&#xFE0E; dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.<br>
         Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la &#x25B6;&#xFE0E; flèche pour la faire réapparaître.</p>
 
-        <h2 class="active">Configuration&nbsp;</h2>
+        <div class="style-container">
+            <h2 class="active">Configuration&nbsp;</h2>
+            <img class="style-select frame" src="styles/icons/frame.svg">
+            <img class="style-select list" src="styles/icons/list.svg">
+        </div>
         <form name="explorer" action="" onsubmit="onSubmit();">
             <div class="container">
                 <div class="box photos active">
@@ -185,10 +189,6 @@
             <input type="submit" value="Générer">
         </form>
         <p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
-        <div id="style-container">
-            <img class="style-select frame" src="styles/icons/frame.svg">
-            <img class="style-select list" src="styles/icons/list.svg">
-        </div>
         <div id="gallery"></div>
         <table>
             <thead>

styles/main.css

@@ -390,20 +390,14 @@ article.explorer h2.active::after {
     transform:rotate(0);
 }
 
-article.explorer #style-container {
+article.explorer img.style-select {
     display:block;
     text-align:right;
-    margin-bottom:0;
-}
-
-article.explorer img.style-select {
-    display:inline;
     max-height:2rem;
-    max-width:2rem;
     margin:0;
     margin-bottom:0.25rem;
-    margin-right:0.4rem;
-    margin-left:0.4rem;
+    margin-right:0.5rem;
+    margin-left:0.5rem;
     cursor:pointer;
 }
 
@@ -497,6 +491,7 @@ article.explorer table {
     border-collapse:separate;
     border-spacing:0;
     width:100%;
+    margin-top:1rem;
     margin-bottom:1rem;
     overflow-x:auto;
 }