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] =?UTF-8?q?S=C3=A9parer=20en=20deux=20parties=20les=20serv?=
 =?UTF-8?q?ices=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" />