From f3b564322ea75108c320f38fbcb2aefa4ed1a4d0 Mon Sep 17 00:00:00 2001
From: pitchum <pitchum@users.noreply.chapril.org>
Date: Sun, 11 Jul 2021 12:23:16 +0200
Subject: [PATCH] Make buttons responsive using FlexBox CSS

cf. this great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
---
 index.html.tpl | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/index.html.tpl b/index.html.tpl
index a1f0fe6..3ea3e70 100644
--- a/index.html.tpl
+++ b/index.html.tpl
@@ -32,6 +32,11 @@ a:hover { color: #aaa; text-decoration: none; }
     background-color: #fbae6e;
     color: #fff;
 }
+#downloads {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
 ul {
     padding: 0;
 }
@@ -40,11 +45,18 @@ li {
     margin: 0.2rem;
 }
 .appbutton {
-    background-color: #222;
+    background-color: #444;
     border-radius: 0.2rem;
+    width: 220px;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 }
 img.app, img.store {
     max-height: 40px;
+}
+#downloads a div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
     </style>
 </head>
@@ -56,7 +68,7 @@ img.app, img.store {
         <u>Pour me joindre&nbsp;:</u><br/>
         <div>1) Installe une appli Jabber/XMPP et crée-toi un compte</div>
         <div>
-            <ul>
+            <ul id="downloads">
                 <li>
                     <a href="https://play.google.com/store/apps/details?id=im.blabber.messenger" title="Blabber.im sur Google Play">
                         <div class="appbutton">
@@ -85,9 +97,10 @@ img.app, img.store {
                 </li>
 -->
             </ul>
-            <div>
-                <a href="https://chapril.org/XMPP">... autres plateformes</a>
-            </div>
+        </div>
+        <div>
+            <a href="https://chapril.org/XMPP">... autres applis</a>
+        </div>
         <div>2) Puis ajoute <a href="xmpp:{{username}}@chapril.org"><button class="button"><strong>{{username}}@chapril.org</strong></button></a> à ta liste de contacts</div>
     </article>
 </body>