Descriptions courtes pour chacun des services;

css/main.css

@@ -50,20 +50,25 @@ footer a {
     color: #f5f5f5;
 }
 
+.services h1 {
+    font-size: 2em;
+}
 .services h2 {
     border-bottom: 2px solid black;
     margin-bottom: .5em;
 }
+
 .services ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     padding: 0;
 }
+
 .services ul li {
+    display: flex;
+    flex-direction: column;
     background-color: #5c6bc0;
-    position: relative;
-    height: 230px;
     list-style: none;
     margin-bottom: .5em;
     text-align: center;
@@ -90,27 +95,27 @@ footer a {
 .services ul li a {
     display: block;
     height: 100%;
+    margin: 0 0.5em 0.5em 0.5em;
+    text-decoration: none;
 }
 .services ul li img {
-    margin: 1em;
+    margin: 1em 1em 0 1em;
     max-width: 150px;
 }
 .services ul li span {
     color: white;
     display: block;
-    position: absolute;
     text-align: center;
-    text-decoration: none;
     width: 100%;
 }
 .services ul li .name {
-    bottom: 30px;
     font-size: 1.1em;
     font-weight: bold;
     text-transform: uppercase;
 }
-.services ul li .url {
+.services ul li .subtitle {
-    bottom: 5px;
+    font-size: 0.8em;
+    font-style: oblique;
 }
 
 @media (max-width: 700px) {

index.html

@@ -43,37 +43,44 @@
             </p>
         </section>
 
-        <h1>Services</h1>
-
         <section class="services">
+            <h1>Services</h1>
             <h2>Proposés en accès libre</h2>
             <ul>
                 <li>
                     <a href="https://steroids.delire.party/">
                         <img src="img/wekan.png" alt="Logo de Wekan" />
                         <span class="name">Wekan</span>
-                        <span class="url">steroids.delire.party</span>
+                        <span>steroids.delire.party</span>
+                        <span class="subtitle">Pour mettre votre productivité
+                            sous stéroïdes, un tableau Kanban.</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://plaisir.delire.party/">
                         <img src="img/wallabag.png" alt="Logo de Wallabag" />
                         <span class="name">Wallabag</span>
-                        <span class="url">plaisir.delire.party</span>
+                        <span>plaisir.delire.party</span>
+                        <span class="subtitle">Parce que c'est toujours un
+                            plaisir de lire... plus tard.</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://urss.delire.party/">
                         <img src="img/freshrss.png" alt="Logo de FreshRSS" />
                         <span class="name">FreshRSS</span>
-                        <span class="url">urss.delire.party</span>
+                        <span>urss.delire.party</span>
+                        <span class="subtitle">Pour lire vos fl'URSS, euh, vos
+                        flux RSS.</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://colle.delire.party/">
                         <img src="img/privatebin.png" alt="Logo de PrivateBin" />
                         <span class="name">PrivateBin</span>
-                        <span class="url">colle.delire.party</span>
+                        <span>colle.delire.party</span>
+                        <span class="subtitle">Partager des textes courts et
+                            sniffer de la colle, toujours aussi délire.</span>
                     </a>
                 </li>
             </ul>
@@ -86,28 +93,36 @@
                     <a href="https://tutut.delire.party/">
                         <img src="img/mastodon.png" alt="Logo de Mastodon" />
                         <span class="name">Mastodon</span>
-                        <span class="url">tutut.delire.party</span>
+                        <span>tutut.delire.party</span>
+                        <span class="subtitle">Une instance du média social de
+                            micro-blogging, pour faire toot-toot, les
+                            rageux.</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://nuage.delire.party/">
                         <img src="img/nextcloud.png" alt="Logo de NextCloud" />
                         <span class="name">NextCloud</span>
-                        <span class="url">nuage.delire.party</span>
+                        <span>nuage.delire.party</span>
+                        <span class="subtitle">J'ai la tête dans le cloud.</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://osef.delire.party/">
                         <img src="img/mattermost.png" alt="Logo de Mattermost" />
                         <span class="name">Mattermost</span>
-                        <span class="url">osef.delire.party</span>
+                        <span>osef.delire.party</span>
+                        <span class="subtitle">What does matter most? Pouvoir
+                        discuter ensemble et dire osef.</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://vip.delire.party/">
                         <img src="img/thelounge.png" alt="Logo de The Lounge" />
                         <span class="name">The Lounge</span>
-                        <span class="url">vip.delire.party</span>
+                        <span>vip.delire.party</span>
+                        <span class="subtitle">Un bouncer IRC très select, pour
+                            les nostalgiques des années 70.</span>
                     </a>
                 </li>
             </ul>