Reorganize and write a bit

4 files changed, 87 insertions, 21 deletions

diff --git a/src/Documentation/Association/index.md b/src/Documentation/Association/index.md
index f880e73..3821b1d 100644
--- a/src/Documentation/Association/index.md
+++ b/src/Documentation/Association/index.md
@@ -1,26 +1,9 @@
-## Notre raison d'être
-
-Aujourd'hui, de grandes entreprises conçoivent des services numériques qui ont pour objectif de <a href="https://fr.wikipedia.org/wiki/%C3%89conomie_de_l%27attention">maximiser le temps</a> que nous passons dessus, de <a href="https://fr.wikipedia.org/wiki/%C3%89conomie_de_la_surveillance">collecter et recouper des données</a> à notre insu pour nous influencer, de <a href="https://www.april.org/le-parlement-europeen-valide-la-generalisation-de-la-censure-automatisee">limiter nos possibilités d'expression</a> au delà du cadre légal et de <a href="https://fr.wikipedia.org/wiki/Embrace,_extend_and_extinguish">créer de nouveaux monopoles</a>. Ces effets nous montrent que la technologie n'est pas neutre et a un réel impact sur nos vies. En choisissant et en hébergeant nos propres outils de communication, sans but lucratif ni hégémonique, nous espérons nous affranchir de ces nuisances et préserver nos libertés. 
-
-Pour en savoir plus, rendez-vous sur <a href="https://www.laquadrature.net/">La Quadrature du Net</a> et allez lire le manifeste <a href="https://chatons.org/fr/manifeste">des CHATONS</a>.
-
-
-## Nos objectifs
-
-### Des utilisateurs impliqués
-
-Que ce soit à l'école, par l'expérimentation, via un forum d'échange, lors d'un atelier, via une publicité à la télévision, un tutoriel, lors d'une discussion avec un ami, il y toujours une phase d'apprentissage en informatique. Malheureusement, dans ces conditions, dur de lutter pour des services libres face à la puissance de frappe d'une entreprise et des logiciels ayant une base d'utilisateurs immense. Nous pensons donc qu'une personne souhaitant s'héberger chez un hébergeur indépendant a besoin d'un accompagnement. C'est pourquoi les inscriptions se font par cooptation. La cooptation permet aussi un lien de confiance et ainsi de se prémunir de bon nombres d'attaques que subissent les hébergeurs.
-
-### Une architecture résiliente
-
-Les sites webs, les réseaux sociaux, les emails ne peuvent fonctionner que grâce à des ordinateurs qui restent allumés 24/24h et qui n'attendent que vous. Cependant, ces derniers sont faillibles. Une coupure d'électricité, un disque dur cassé, une mise à jour ratée, un bug dans le logiciel, les raisons ne manquent pas. Heureusement, il est possible de masquer ces pannes avec du logiciel astucieusement conçu. C'est pourquoi vous avez l'impression que Google est toujours disponible, que Dropbox ne perd pas vos données, etc. La gestion de ces pannes, c'est aussi ce qui rend la vie compliquée aux hébergeurs indépendants. Entre incompréhension des utilisateurs quand un service est hors ligne et sueurs froides pour les administrateurs, ça n'a rien de marrant. Et c'est très chronophage. Notre objectif est donc de construire des solutions d'hébergements qui peuvent résister à ces pannes.
-
-## Statuts de l'association
+### Statuts de l'association
 
 Depuis janvier 2020, Deuxfleurs est constitué en association loi 1901.
 Vous trouverez [ici](/Documentation/Association/Statuts/) les statuts de l'association.
 
-## Comptes rendus d'AG
+### Comptes rendus d'AG
 
 Les comptes-rendus d'AG sont disponibles aux liens suivants:
 
diff --git a/src/Documentation/Technique/index.md b/src/Documentation/Technique/index.md
index e69de29..8aea90f 100644
--- a/src/Documentation/Technique/index.md
+++ b/src/Documentation/Technique/index.md
@@ -0,0 +1,22 @@
+Deuxfleurs utilise les composants suivants dans son infrastructure:
+
+- Ansible (configuration des noeuds)
+- Docker (conteneurs)
+- Nomad (orchestration des conteneurs)
+- Consul (stockage clef/valeur distribué, découverte de services)
+- Glusterfs (système de fichiers distribué)
+- Stolon (système de réplication pour PostgreSQL)
+
+Les services proposés sont les suivants:
+
+- Chat via Matrix (Synapse, Riot)
+- Email (Postfix, Dovecot, SoGo)
+- Stockage (Seafile)
+
+Par ailleurs, nous avons développés nous-même un certain nombre d'outils pour compléter la stack:
+
+- [Bottin](https://bottin.eu), un serveur LDAP (gestion des comptes utilisateurs) basé sur le stockage clef/valeur de Consul
+- [Guichet](https://git.deuxfleurs.fr/Deuxfleurs/Guichet/), une interface web de gestion des utilisateurs
+- [Easybridge](https://git.deuxfleurs.fr/lx/Easybridge/), un bridge entre Matrix et d'autres réseaux
+
+Le code de l'infrastructure [est publiquement disponible](https://git.deuxfleurs.fr/Deuxfleurs/deuxfleurs.fr/).
diff --git a/src/Documentation/index.md b/src/Documentation/index.md
index cd99fca..57ee2cc 100644
--- a/src/Documentation/index.md
+++ b/src/Documentation/index.md
@@ -1 +1,54 @@
-# hello !
+### Notre raison d'être
+
+Aujourd'hui, de grandes entreprises conçoivent des services numériques qui ont
+pour objectif de
+<a href="https://fr.wikipedia.org/wiki/%C3%89conomie_de_l%27attention">maximiser le temps</a>
+que nous passons dessus, de
+<a href="https://fr.wikipedia.org/wiki/%C3%89conomie_de_la_surveillance">collecter et recouper des données</a>
+à notre insu pour nous influencer, de
+<a href="https://www.april.org/le-parlement-europeen-valide-la-generalisation-de-la-censure-automatisee">limiter nos possibilités d'expression</a>
+au delà du cadre légal et de
+<a href="https://fr.wikipedia.org/wiki/Embrace,_extend_and_extinguish">créer de nouveaux monopoles</a>.
+Ces effets nous montrent que la technologie n'est pas
+neutre et a un réel impact sur nos vies. En choisissant et en hébergeant nos
+propres outils de communication, sans but lucratif ni hégémonique, nous
+espérons nous affranchir de ces nuisances et préserver nos libertés. 
+
+Pour en savoir plus, rendez-vous sur
+<a href="https://www.laquadrature.net/">La Quadrature du Net</a>
+et allez lire le manifeste <a href="https://chatons.org/fr/manifeste">des CHATONS</a>.
+
+
+### Nos objectifs
+
+#### Des utilisateurs impliqués
+
+Que ce soit à l'école, par l'expérimentation, via un forum d'échange, lors d'un
+atelier, via une publicité à la télévision, un tutoriel, lors d'une discussion
+avec un ami, il y toujours une phase d'apprentissage en informatique.
+Malheureusement, dans ces conditions, dur de lutter pour des services libres
+face à la puissance de frappe d'une entreprise et des logiciels ayant une base
+d'utilisateurs immense. Nous pensons donc qu'une personne souhaitant s'héberger
+chez un hébergeur indépendant a besoin d'un accompagnement. C'est pourquoi les
+inscriptions se font par cooptation. La cooptation permet aussi un lien de
+confiance et ainsi de se prémunir de bon nombres d'attaques que subissent les
+hébergeurs.
+
+<p class="center"><a href="/Documentation/Association/">En savoir plus sur l'association</a></p>
+
+#### Une architecture résiliente
+
+Les sites webs, les réseaux sociaux, les emails ne peuvent fonctionner que
+grâce à des ordinateurs qui restent allumés 24/24h et qui n'attendent que vous.
+Cependant, ces derniers sont faillibles. Une coupure d'électricité, un disque
+dur cassé, une mise à jour ratée, un bug dans le logiciel, les raisons ne
+manquent pas. Heureusement, il est possible de masquer ces pannes avec du
+logiciel astucieusement conçu. C'est pourquoi vous avez l'impression que Google
+est toujours disponible, que Dropbox ne perd pas vos données, etc. La gestion
+de ces pannes, c'est aussi ce qui rend la vie compliquée aux hébergeurs
+indépendants. Entre incompréhension des utilisateurs quand un service est hors
+ligne et sueurs froides pour les administrateurs, ça n'a rien de marrant. Et
+c'est très chronophage. Notre objectif est donc de construire des solutions
+d'hébergements qui peuvent résister à ces pannes.
+
+<p class="center"><a href="/Documentation/Technique/">En savoir plus sur l'aspect technique</a></p>
diff --git a/src/css/main.css b/src/css/main.css
index 7a09598..2ba7418 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -38,10 +38,10 @@ p {
 }
 
 ul {
+    margin-left: 42px;
 }
 
 li {
-    margin-left: 42px;
     padding-top: 4px;
     padding-bottom: 4px;
 }
@@ -93,6 +93,14 @@ header > .container > .menu-item > a,span {
   color: #fff;
 }
 
+.service-box h3 {
+    font-size: 1.15em;
+}
+
 .list > br {
   clear: both;
 }
+
+.center {
+    text-align: center;
+}