Show URLs of hosted services.

Those are a big part of our identity, we should definitely show them to the world.

css/main.css

@@ -87,17 +87,22 @@ footer a {
     max-width: 150px;
 }
 #services ul li span {
-    bottom: 20px;
     color: white;
     display: block;
-    font-size: 1.1em;
-    font-weight: bold;
     position: absolute;
     text-align: center;
     text-decoration: none;
-    text-transform: uppercase;
     width: 100%;
 }
+#services ul li .name {
+    bottom: 30px;
+    font-size: 1.1em;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+#services ul li .url {
+    bottom: 5px;
+}
 
 @media (max-width: 700px) {
     #services ul li {

index.html

@@ -32,37 +32,43 @@
                 <li>
                     <a href="https://nuage.delire.party/">
                         <img src="img/owncloud.png" alt="Logo de OwnCloud" />
-                        <span>OwnCloud</span>
+                        <span class="name">OwnCloud</span>
+                        <span class="url">nuage.delire.party</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://steroids.delire.party/">
                         <img src="img/wekan.png" alt="Logo de Wekan" />
-                        <span>Wekan</span>
+                        <span class="name">Wekan</span>
+                        <span class="url">steroids.delire.party</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://tutut.delire.party/">
                         <img src="img/mastodon.png" alt="Logo de Mastodon" />
-                        <span>Mastodon</span>
+                        <span class="name">Mastodon</span>
+                        <span class="url">tutut.delire.party</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://plaisir.delire.party/">
                         <img src="img/wallabag.png" alt="Logo de Wallabag" />
-                        <span>Wallabag</span>
+                        <span class="name">Wallabag</span>
+                        <span class="url">plaisir.delire.party</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://urss.delire.party/">
                         <img src="img/freshrss.png" alt="Logo de FreshRSS" />
-                        <span>FreshRSS</span>
+                        <span class="name">FreshRSS</span>
+                        <span class="url">urss.delire.party</span>
                     </a>
                 </li>
                 <li>
                     <a href="https://colle.delire.party/">
                         <img src="img/privatebin.png" alt="Logo de PrivateBin" />
-                        <span>PrivateBin</span>
+                        <span class="name">PrivateBin</span>
+                        <span class="url">colle.delire.party</span>
                     </a>
                 </li>
             </ul>