From 292e02e079909debe456378f9eb769e6246ae546 Mon Sep 17 00:00:00 2001
From: Benjamin Bouvier <public@benj.me>
Date: Mon, 4 Jun 2018 12:14:55 +0200
Subject: [PATCH 1/5] =?UTF-8?q?S=C3=A9parer=20en=20deux=20parties=20les=20?=
 =?UTF-8?q?services=20libres=20d'acc=C3=A8s=20et=20les=20autres;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/main.css | 32 ++++++++++++++++----------------
 index.html   | 40 ++++++++++++++++++++++++----------------
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/css/main.css b/css/main.css
index dd49aca..97addbf 100644
--- a/css/main.css
+++ b/css/main.css
@@ -50,17 +50,17 @@ footer a {
     color: #f5f5f5;
 }
 
-#services h2 {
+.services h2 {
     border-bottom: 2px solid black;
     margin-bottom: .5em;
 }
-#services ul {
+.services ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     padding: 0;
 }
-#services ul li {
+.services ul li {
     background-color: #5c6bc0;
     position: relative;
     height: 230px;
@@ -69,33 +69,33 @@ footer a {
     text-align: center;
     width: 33%;
 }
-#services ul li:hover {
+.services ul li:hover {
     box-shadow: 1px 1px 4px black;
 }
-#services ul li:nth-child(6n+2) {
+.services ul li:nth-child(6n+2) {
     background-color: #e84e40;
 }
-#services ul li:nth-child(6n+3) {
+.services ul li:nth-child(6n+3) {
     background-color: #ec407a;
 }
-#services ul li:nth-child(6n+4) {
+.services ul li:nth-child(6n+4) {
     background-color: #ab47bc;
 }
-#services ul li:nth-child(6n+5) {
+.services ul li:nth-child(6n+5) {
     background-color: #7e57c2;
 }
-#services ul li:nth-child(6n+6) {
+.services ul li:nth-child(6n+6) {
     background-color: #738ffe;
 }
-#services ul li a {
+.services ul li a {
     display: block;
     height: 100%;
 }
-#services ul li img {
+.services ul li img {
     margin: 1em;
     max-width: 150px;
 }
-#services ul li span {
+.services ul li span {
     color: white;
     display: block;
     position: absolute;
@@ -103,23 +103,23 @@ footer a {
     text-decoration: none;
     width: 100%;
 }
-#services ul li .name {
+.services ul li .name {
     bottom: 30px;
     font-size: 1.1em;
     font-weight: bold;
     text-transform: uppercase;
 }
-#services ul li .url {
+.services ul li .url {
     bottom: 5px;
 }
 
 @media (max-width: 700px) {
-    #services ul li {
+    .services ul li {
         width: 49%;
     }
 }
 @media (max-width: 399px) {
-    #services ul li {
+    .services ul li {
         width: 100%;
     }
 }
diff --git a/index.html b/index.html
index 9ac3b56..71c6c15 100644
--- a/index.html
+++ b/index.html
@@ -43,16 +43,11 @@
             </p>
         </section>
 
-        <section id="services">
-            <h2>Services proposés</h2>
+        <h1>Services</h1>
+
+        <section class="services">
+            <h2>Proposés en accès libre</h2>
             <ul>
-                <li>
-                    <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>
-                    </a>
-                </li>
                 <li>
                     <a href="https://steroids.delire.party/">
                         <img src="img/wekan.png" alt="Logo de Wekan" />
@@ -60,13 +55,6 @@
                         <span class="url">steroids.delire.party</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>
-                    </a>
-                </li>
                 <li>
                     <a href="https://plaisir.delire.party/">
                         <img src="img/wallabag.png" alt="Logo de Wallabag" />
@@ -88,6 +76,26 @@
                         <span class="url">colle.delire.party</span>
                     </a>
                 </li>
+            </ul>
+        </section>
+
+        <section class="services">
+            <h2>Restreints (nous demander pour l'inscription)</h2>
+            <ul>
+                <li>
+                    <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>
+                    </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>
+                    </a>
+                </li>
                 <li>
                     <a href="https://osef.delire.party/">
                         <img src="img/mattermost.png" alt="Logo de Mattermost" />

From 839cb9dbea881cac18aae75829aeba33907c03aa Mon Sep 17 00:00:00 2001
From: Benjamin Bouvier <public@benj.me>
Date: Mon, 4 Jun 2018 14:57:21 +0200
Subject: [PATCH 2/5] Descriptions courtes pour chacun des services;

---
 css/main.css | 21 +++++++++++++--------
 index.html   | 35 +++++++++++++++++++++++++----------
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/css/main.css b/css/main.css
index 97addbf..919e941 100644
--- a/css/main.css
+++ b/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 {
-    bottom: 5px;
+.services ul li .subtitle {
+    font-size: 0.8em;
+    font-style: oblique;
 }
 
 @media (max-width: 700px) {
diff --git a/index.html b/index.html
index 71c6c15..ae716a2 100644
--- a/index.html
+++ b/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>

From 5ad8691f3b5f6c999259dea00b5525c093b74151 Mon Sep 17 00:00:00 2001
From: Benjamin Bouvier <public@benj.me>
Date: Mon, 4 Jun 2018 15:01:30 +0200
Subject: [PATCH 3/5] Fixes #3: Ajouter PeerTube;

---
 css/main.css     |   2 +
 img/peertube.svg | 118 +++++++++++++++++++++++++++++++++++++++++++++++
 index.html       |   9 ++++
 3 files changed, 129 insertions(+)
 create mode 100644 img/peertube.svg

diff --git a/css/main.css b/css/main.css
index 919e941..18b155c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -101,6 +101,8 @@ footer a {
 .services ul li img {
     margin: 1em 1em 0 1em;
     max-width: 150px;
+    width: 150px;
+    max-height: 150px;
 }
 .services ul li span {
     color: white;
diff --git a/img/peertube.svg b/img/peertube.svg
new file mode 100644
index 0000000..38992a5
--- /dev/null
+++ b/img/peertube.svg
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="2799 -911 16 22"
+   version="1.1"
+   id="svg13"
+   sodipodi:docname="logo.svg"
+   width="16"
+   height="22"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata17">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1916"
+     inkscape:window-height="1040"
+     id="namedview15"
+     showgrid="false"
+     inkscape:zoom="29.790476"
+     inkscape:cx="-1.1827326"
+     inkscape:cy="12.088"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg13" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">
+      .cls-3 {
+        fill: #211f20;
+      }
+
+      .cls-4 {
+        fill: #737373;
+      }
+
+      .cls-5 {
+        fill: #f1680d;
+      }
+
+      .cls-6 {
+        fill: rgba(255, 255, 255, 0);
+      }
+    </style>
+  </defs>
+  <g
+     id="Artboard_1"
+     data-name="Artboard – 1"
+     class="cls-1"
+     transform="translate(0.03356777,-1.9929667)">
+    <g
+       id="Symbol_3_1"
+       data-name="Symbol 3 – 1"
+       transform="translate(2759,-975)">
+      <g
+         id="Group_44"
+         data-name="Group 44"
+         transform="translate(0,2.333)">
+        <path
+           id="Path_4"
+           data-name="Path 4"
+           class="cls-3"
+           d="m -949,-500 v 10.667 l 8,-5.333"
+           transform="translate(989,564)"
+           inkscape:connector-curvature="0"
+           style="fill:#211f20" />
+        <path
+           id="Path_5"
+           data-name="Path 5"
+           class="cls-4"
+           d="m -949,-500 v 10.667 l 8,-5.333"
+           transform="translate(989,574.667)"
+           inkscape:connector-curvature="0"
+           style="fill:#737373" />
+        <path
+           id="Path_6"
+           data-name="Path 6"
+           class="cls-5"
+           d="m -949,-500 v 10.667 l 8,-5.333"
+           transform="translate(997,569.333)"
+           inkscape:connector-curvature="0"
+           style="fill:#f1680d" />
+        <path
+           id="Path_7"
+           data-name="Path 7"
+           class="cls-6"
+           d="M 0,0 V 10.667 L 8,5.333 Z"
+           transform="rotate(180,24,40)"
+           inkscape:connector-curvature="0"
+           style="fill:rgba(255,255,255,0)" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/index.html b/index.html
index ae716a2..3262d28 100644
--- a/index.html
+++ b/index.html
@@ -89,6 +89,15 @@
         <section class="services">
             <h2>Restreints (nous demander pour l'inscription)</h2>
             <ul>
+                <li>
+                    <a href="https://meilleurtube.delire.party/">
+                        <img src="img/peertube.svg" alt="Logo de PeerTube" />
+                        <span class="name">PeerTube</span>
+                        <span>meilleurtube.delire.party</span>
+                        <span class="subtitle">Le meilleur du Peer (to peer), pour
+                            partager des vidéos complètement délires.</span>
+                    </a>
+                </li>
                 <li>
                     <a href="https://tutut.delire.party/">
                         <img src="img/mastodon.png" alt="Logo de Mastodon" />

From 5f5432908757d8b2fcfd5e0af23f0a1618208da5 Mon Sep 17 00:00:00 2001
From: Benjamin Bouvier <public@benj.me>
Date: Mon, 4 Jun 2018 15:20:09 +0200
Subject: [PATCH 4/5] Tweak descriptions;

---
 css/main.css |  4 ++--
 index.html   | 55 ++++++++++++++++++++++++++++++++--------------------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/css/main.css b/css/main.css
index 18b155c..b0f1866 100644
--- a/css/main.css
+++ b/css/main.css
@@ -30,7 +30,7 @@ header h1 {
     text-align: center;
 }
 
-section .summary {
+section .description {
     margin-bottom: 2em;
 }
 
@@ -50,7 +50,7 @@ footer a {
     color: #f5f5f5;
 }
 
-.services h1 {
+h1 {
     font-size: 2em;
 }
 .services h2 {
diff --git a/index.html b/index.html
index 3262d28..f214f95 100644
--- a/index.html
+++ b/index.html
@@ -15,30 +15,43 @@
             <h1>Le Délire !</h1>
         </header>
 
-        <section id="summary">
+        <section class="description">
+            <h1>Kewa ?</h1>
             <p>
-                <strong>Bienvenue chez Le Délire</strong> !
-                Nous sommes un collectif hébergeant un ensemble de services libres,
-                et proposons l'utilisation à prix libre de ces services à des
-                personnes de notre entourage, en qui nous faisons confiance
-                pour qu'elles en fassent un usage responsable. En échange de
-                cela, nous leur demandons de nous faire confiance dans la
-                maintenance de ces services et de notre respect de leurs
-                données privées.
+                <strong>Bienvenue sur Le Délire</strong> !
+                Nous sommes un collectif hébergeant un ensemble de services
+                libres, et proposons l'utilisation à prix libre de ces services
+                à tout.e.s. Nous faisons confiance à ces personnes pour
+                qu'elles en fassent un usage responsable ; en échange de cela,
+                nous leur demandons de nous faire confiance dans la maintenance
+                de ces services et de notre respect de leurs données privées.
+            </p>
+        </section>
+
+        <section class="description">
+            <h1>Comment y avoir accès ?</h1>
+            <p>
+                Certains services sont en accès libre ; d'autres demandant
+                notre intervention pour vous y créer un compte. Vous pouvez
+                voir la liste des différents services ci-dessous. Si vous
+                souhaitez <strong>bénéficier des services restreints</strong>
+                que nous hébergeons, vous pouvez nous contacter via Mastodon
+                (<a href="https://tutut.delire.party/@adngdb">@adngdb</a> et <a
+                href="https://tutut.delire.party/@bnjbvr">@bnjbvr</a>) ou sur
+            notre <a
+                href="https://osef.delire.party/signup_user_complete/?id=zr5n6uedapfh5e8ghpmw3fgjfy">canal
+                Mattermost</a>.  Dans tous les cas, contactez-nous : ceci est
+            avant tout une aventure humaine !
             </p>
             <p>
-                Si vous souhaitez <strong>bénéficier des services</strong> que nous
-                hébergeons, vous pouvez nous contacter via Mastodon
-                (<a href="https://tutut.delire.party/@adngdb">@adngdb</a> et
-                <a href="https://tutut.delire.party/@bnjbvr">@bnjbvr</a>) ou sur notre
-                <a href="https://osef.delire.party/delire/channels/town-square">canal Mattermost</a>.
-                Certains services sont en accès libre, d'autres demandent notre
-                intervention pour vous y créer un compte. Dans tous les cas,
-                contactez-nous : ceci est avant tout une aventure humaine !
-            </p>
-            <p>
-                Et bien entendu, si vous voulez <strong>soutenir financièrement</strong>
-                la mise en place et l'entretien des services du Délire, nous acceptons les dons
+                Mettre en place ces services et en prendre soin prend du temps
+                dans la durée, comme en témoigne notre <a href="https://tutut.delire.party/@admin">activité
+                d'administration</a> (mises à jour des différents services, mise en place de sauvegardes
+                automatiques). Si vous appréciez l'utilisation de ces services, ou voulez simplement aider dans la <a
+                href="https://degooglisons-internet.org/">dégooglisation
+                d'Internet</a>,
+                vous pouvez <strong>soutenir financièrement</strong> l'équipe
+                d'administration du Délire : nous acceptons les dons
                 réguliers <a href="https://liberapay.com/Le_Delire/">via la plateforme Liberapay</a> !
             </p>
         </section>

From 019880b766ad7d7a2cf1b3f41a554e6707cd3f11 Mon Sep 17 00:00:00 2001
From: Benjamin Bouvier <public@benj.me>
Date: Wed, 6 Jun 2018 09:58:01 +0200
Subject: [PATCH 5/5] Review;

---
 css/main.css | 5 +++++
 index.html   | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/css/main.css b/css/main.css
index b0f1866..ee9c1d0 100644
--- a/css/main.css
+++ b/css/main.css
@@ -116,6 +116,11 @@ h1 {
     text-transform: uppercase;
 }
 .services ul li .subtitle {
+    border-top: 1px solid gray;
+    width: 80%;
+    margin: auto;
+    margin-top: 3px;
+    padding-top: 3px;
     font-size: 0.8em;
     font-style: oblique;
 }
diff --git a/index.html b/index.html
index f214f95..455e566 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
         <section class="description">
             <h1>Comment y avoir accès ?</h1>
             <p>
-                Certains services sont en accès libre ; d'autres demandant
+                Certains services sont en accès libre ; d'autres demandent
                 notre intervention pour vous y créer un compte. Vous pouvez
                 voir la liste des différents services ci-dessous. Si vous
                 souhaitez <strong>bénéficier des services restreints</strong>
@@ -58,7 +58,7 @@
 
         <section class="services">
             <h1>Services</h1>
-            <h2>Proposés en accès libre</h2>
+            <h2>En accès libre</h2>
             <ul>
                 <li>
                     <a href="https://steroids.delire.party/">
@@ -134,7 +134,7 @@
                         <img src="img/mattermost.png" alt="Logo de Mattermost" />
                         <span class="name">Mattermost</span>
                         <span>osef.delire.party</span>
-                        <span class="subtitle">What does matter most? Pouvoir
+                        <span class="subtitle">What matters most? Pouvoir
                         discuter ensemble et dire osef.</span>
                     </a>
                 </li>
@@ -143,7 +143,7 @@
                         <img src="img/thelounge.png" alt="Logo de The Lounge" />
                         <span class="name">The Lounge</span>
                         <span>vip.delire.party</span>
-                        <span class="subtitle">Un bouncer IRC très select, pour
+                        <span class="subtitle">Un bouncer IRC très sélect, pour
                             les nostalgiques des années 70.</span>
                     </a>
                 </li>