Add plateform name on each download button

index.html.tpl

@@ -61,10 +61,22 @@ li {
 img.app, img.store {
     max-height: 40px;
 }
-#downloads a div {
+#downloads a > div {
     display: flex;
     justify-content: space-between;
     align-items: center;
+}
+#downloads a > div > div {
+    width: 130px;;
+}
+#downloads span {
+    display: block;
+    text-align: left;
+}
+#downloads span.store {
+    color: black;
+    font-size: smaller;
+    text-align: right;
 }
     </style>
 </head>
@@ -77,14 +89,16 @@ img.app, img.store {
         <p>Je suis désormais joignable pour tchatter sur le réseau indépendant Jabber/XMPP.</p>
         <p>Mon adresse XMPP&nbsp;: <strong>{{username}}@chapril.org</strong></p>
         <u>Pour me joindre&nbsp;:</u><br/>
-        <div>1) Installe une appli Jabber/XMPP et crée-toi un compte</div>
+        <p>1) Installe une appli Jabber/XMPP et crée-toi un compte</p>
-        <div>
             <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">
                             <img class="app" src="assets/logo_blabber_64px.png" />
+                            <div>
                                 <span>Blabber.im</span>
+                                <span class="store">sur Play Store</span>
+                            </div>
                             <img class="store" src="assets/google-play.svg" />
                         </div>
                     </a>
@@ -93,7 +107,10 @@ img.app, img.store {
                     <a href="https://apps.apple.com/fr/app/tigase-messenger/id1153516838" title="Siskin IM sur Apple Store">
                         <div class="appbutton">
                             <img class="app" src="assets/logo_siskin_64px.png" />
+                            <div>
                                 <span>Siskin IM</span>
+                                <span class="store">sur iOS</span>
+                            </div>
                             <img class="store" src="assets/apple.svg" />
                         </div>
                     </a>
@@ -102,7 +119,10 @@ img.app, img.store {
                     <a href="https://f-droid.org/fr/packages/eu.siacs.conversations/" title="Conversations sur F-Droid">
                         <div class="appbutton">
                             <img class="app" src="assets/logo_conversations_64px.png" />
+                            <div>
                                 <span>Conversations</span>
+                                <span class="store">sur F-Droid</span>
+                            </div>
                             <img class="store" src="assets/fdroid_black.svg" />
                         </div>
                     </a>
@@ -111,7 +131,10 @@ img.app, img.store {
                     <a href="https://gajim.org/fr/download/" title="Gajim sur windows">
                         <div class="appbutton">
                             <img class="app" src="assets/logo_gajim_64px.png" />
+                            <div>
                                 <span>Gajim</span>
+                                <span class="store">sous Windows</span>
+                            </div>
                             <img class="store" src="assets/windows.svg" />
                         </div>
                     </a>
@@ -120,21 +143,23 @@ img.app, img.store {
                     <a href="https://dino.im/" title="Dino sur Linux">
                         <div class="appbutton">
                             <img class="app" src="assets/logo_dino_custom_64px.png" />
+                            <div>
                                 <span>Dino</span>
+                                <span class="store">sous Linux</span>
+                            </div>
                             <img class="store" src="assets/linux.svg" />
                         </div>
                     </a>
                 </li>
             </ul>
-        </div>
 <!--
         <div>
             <a href="https://chapril.org/XMPP">... autres applis</a>
         </div>
 -->
-        <div>2) Puis ajoute mon adresse à ta liste de contacts&nbsp;:
+        <p>2) Puis ajoute mon adresse à ta liste de contacts&nbsp;:
             <a href="xmpp:{{username}}@chapril.org"><button class="button"><strong>{{username}}@chapril.org</strong></button></a>
-        </div>
+        </p>
     </article>
 </body>
 </html>