Improve alignment of buttons on very small screens

static/noscript.css

+/* very small devices < 600px */
+@media (max-width: 600px) {
+  div#actionButtons > * {
+    min-width: 14vw;
+    height: 14vw;
+  }
+
+  div#actionButtons > noscript {
+    margin-right: initial;
+  }
+}
\ No newline at end of file

static/style.css

@@ -396,6 +396,25 @@ textarea, input[type="text"] {
     width: 50px !important;
     height: 50px !important;
   }
+
+  div#actionButtons {
+    justify-content: space-between;
+    align-content: space-between;
+  }
+
+  div#actionButtons > * {
+    min-width: 16vw;
+    height: 16vw;
+  }
+
+  div#actionButtons button {
+    margin-left: initial;
+  }
+
+  div#actionButtons > noscript > button {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 /* Fonts */

views/index.pug

@@ -19,6 +19,8 @@ html(lang=locale)
     link(rel="shotcut icon" type="image/png" href="./imgs/favicon.png")
     link(rel="stylesheet" href="./font-awesome.min.css")
     link(rel="stylesheet" href="./style.css")
+    noscript
+      link(rel="stylesheet" href="./noscript.css")
     title
       =_('Soutenez La Quadrature du Net !')
   body
@@ -122,7 +124,7 @@ html(lang=locale)
                 span.text
                   =_('Actualiser') + ' '
                 span.fa.fa-refresh
-            button(type="submit" name="target" value="randomize" formaction="" formtarget="_self").randomize.white-button
+            button(type="submit" name="target" value="randomize" formaction="" formtarget="_self").randomize.white-button.share-button
               span.fa.fa-random
             button(type="submit" name="target" value="mastodon").blue-button.share-button
               img(src="./imgs/mastodon.svg" width="20" height="20" alt="mamot")