Updates CHATONS site web

3 files changed, 102 insertions, 76 deletions

diff --git a/src/_layout.pug b/src/_layout.pug
index 5a7bb16..e185bcc 100644
--- a/src/_layout.pug
+++ b/src/_layout.pug
@@ -1,47 +1,48 @@
 include _mixin/menu.pug
-
+  
 block root
   doctype html
-  head
-    meta(charset='utf-8')
-    title 💮💮 deuxfleurs - #{title}
-    link(rel="stylesheet", href="/css/main.css")
-    meta(name="viewport", content="width=device-width, initial-scale=1.0")
-  body
-    aside
-      header
-        a#menu(href="#").mobile_inline
-          svg(viewBox="0 0 100 80", width="40", height="40")
-            rect(width="100", height="20")
-            rect(y="30" width="100" height="20")
-            rect(y="60" width="100" height="20")
-
-        h1
-          a(href="/") deuxfleurs
-        nav.computer_block
-          section.center
-            img(src="/img/flower.svg", width="40")
-            | 
-            img(src="/img/flower.svg", width="40")
-          ul
-            li
-              a(href="https://plume.deuxfleurs.fr/timeline/1") Actualités
-            li
-              a(href="https://wiki.deuxfleurs.fr") Wiki
-            li
-              a(href="https://guichet.deuxfleurs.fr") Mon compte
-          hr
-          +menu(root, element)
-        
-    main
-      block content
- 
-    script.
-      (_ => {
-        const hamburger = document.getElementById('menu')
-        hamburger.onclick = _ => {
-          const nav = document.querySelector('body > aside > header > nav')
-          console.log(nav.style.display)
-          nav.style.display = nav.style.display != 'block' ? 'block' : 'none'
-        }
-      })()
+  html(lang="fr")
+    head
+      meta(charset='utf-8')
+      title 💮💮 deuxfleurs - #{title}
+      link(rel="stylesheet", href="/css/main.css")
+      meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    body
+      aside
+        header
+          a#menu(href="#").mobile_inline
+            svg(viewBox="0 0 100 80", width="40", height="40")
+              rect(width="100", height="20")
+              rect(y="30" width="100" height="20")
+              rect(y="60" width="100" height="20")
+  
+          h1
+            a(href="/") deuxfleurs
+          nav.computer_block
+            section.center
+              img(alt="emoji fleur", src="/img/flower.svg", width="40")
+              | 
+              img(alt="emoji fleur", src="/img/flower.svg", width="40")
+            ul
+              li
+                a(href="https://plume.deuxfleurs.fr/timeline/1") Actualités
+              li
+                a(href="https://wiki.deuxfleurs.fr") Wiki
+              li
+                a(href="https://guichet.deuxfleurs.fr") Mon compte
+            hr
+            +menu(root, element)
+          
+      main
+        block content
+   
+      script.
+        (_ => {
+          const hamburger = document.getElementById('menu')
+          hamburger.onclick = _ => {
+            const nav = document.querySelector('body > aside > header > nav')
+            console.log(nav.style.display)
+            nav.style.display = nav.style.display != 'block' ? 'block' : 'none'
+          }
+        })()
diff --git a/src/css/main.css b/src/css/main.css
index 342901a..e80bdc2 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -166,7 +166,7 @@ ol {
 }
 
 a {
-  color: rgb(12, 144, 110)
+  color: #08634c;
 }
 
 table {
@@ -296,4 +296,28 @@ input {
 .frame {
   border-left: 1rem solid #ddd;
   padding-left: 1rem;
-}
\ No newline at end of file
+}
+
+img.hero {
+  width: 100%; 
+  margin:-0.5rem;
+}
+
+h1.slogan {
+  text-align:center; 
+  font-size:2rem; 
+  padding: 2rem 0rem;
+}
+
+.icon {
+  font-size: 80px; 
+  height: 120px;
+}
+
+section.list {
+  padding-left:1.5rem;
+}
+
+p.fill {
+  margin: 2rem 0rem;
+}
diff --git a/src/index.pug b/src/index.pug
index dcbf36a..f109918 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -5,40 +5,40 @@ prepend root
 
 block content
   section
-    img(style="width: 100%; margin:-0.5rem;", src="/img/flower.png")
+    img.hero(alt="Photo d'illustration d'un parterre de fleurs en noir et blanc avec un effet tramage.", src="/img/flower.png")
 
   section
-    h1(style="text-align:center; font-size:2rem; padding: 2rem 0rem;") fabriquons un internet convivial
+    h1.slogan fabriquons un internet convivial
 
   section 
     h2 avec des outils sobres
     section
-      a.service-box.left(href='https://wikijs.deuxfleurs.fr/fr/Guide/Discussion')
-        div(style='font-size: 80px; height: 120px') 💬
+      a.service-box.left(href='https://man.deuxfleurs.fr/prise_en_main/matrix/')
+        .icon 💬
         h5 discussion
-      a.service-box.left(href='https://wikijs.deuxfleurs.fr/fr/Guide/Visioconf%C3%A9rence')
-        div(style='font-size: 80px; height: 120px') 📞
+      a.service-box.left(href='https://man.deuxfleurs.fr/prise_en_main/jitsi/')
+        .icon 📞
         h5 visioconférence
-      a.service-box.left(href='https://wikijs.deuxfleurs.fr/fr/Guide/SiteWeb')
-        div(style='font-size: 80px; height: 120px') 🌐
+      a.service-box.left(href='https://man.deuxfleurs.fr/prise_en_main/web/')
+        .icon 🌐
         h5 sites web
-      a.service-box.left(href='https://wikijs.deuxfleurs.fr/fr/Guide/Email')
-        div(style='font-size: 80px; height: 120px') 📨
-        h5 emails
-      a.service-box.left(href='https://pad.deuxfleurs.fr')
-        div(style='font-size: 80px; height: 120px') 📄
+      a.service-box.left(href='https://man.deuxfleurs.fr/prise_en_main/emails/')
+        .icon 📨
+        h5 emails (beta)
+      a.service-box.left(href='https://man.deuxfleurs.fr/prise_en_main/cryptpad/')
+        .icon 📄
         h5 collaboration
-      a.service-box.left(href='https://plume.deuxfleurs.fr')
-        div(style='font-size: 80px; height: 120px') ✍️
+      a.service-box.left(href='https://man.deuxfleurs.fr/prise_en_main/plume/')
+        .icon ✍️
         h5 blog
 
-    p ⚠️  À part pour la visioconférence, vous devez avoir un compte pour utiliser ces outils.  Faisons connaissance d'abord 👇
+    p ⚠️  À part pour la visioconférence et le pad, vous devez avoir un compte pour utiliser ces outils.  Faisons connaissance d'abord 👇
 
   section 
     h2 avec notre propre infrastructure résiliente
 
-    p(style="margin: 2rem 0rem") 
-      img(style="width: 100%; margin:-0.5rem;", src="/img/servers.jpg")
+    p.fill
+      img.hero(alt="Une photo en noir et blanc de nos différents serveurs hébergés à domicile.", src="/img/servers.jpg")
 
     p
       | Pour fournir nos outils, nous ne faisons pas appel à des services cloud ni ne louons de serveurs en datacenter.
@@ -54,22 +54,23 @@ block content
   section
     h2 avec des valeurs fortes
    
-    section(style="padding-left:1.5rem")
-      div ⇨ protèger la vie privée
-      div ⇨ défendre la liberté d'expression
-      div ⇨ ne pas se laisser manipuler
-      div ⇨ choisir la sobriété numérique
-      div ⇨ prendre les décisions ensemble
-      div ⇨ mettre en commun nos connaissances et nos infrastructures
+    section.list
+      div ⇨ <b>la coopération</b> - eg. promouvoir l'intéropérabilité, les communs, le libre, et les formats de données ouverts
+      div ⇨ <b>l'autonomie</b> - eg. gérer nos propres moyens de communications, prendre nos propres décisions
+      div ⇨ <b>la solidarité</b> - eg. partager le savoir, partager les ressources informatiques, s'entraider pour la gestion des services
+      div ⇨ <b>la liberté</b> - eg. permettre à toutes et tous de s'exprimer, respecter la vie privée
 
     p
-      a(href="https://plume.deuxfleurs.fr/timeline/1") Suivez notre actualité, réflexions et analyses sur notre outil Plume</a> 
+      a(href="https://plume.deuxfleurs.fr/timeline/1") Suivez notre actualité, réflexions et analyses sur notre blog Plume</a> 
 
   section
-    h2 faisons connaissance !
-    p.spacing Nous fonctionnons actuellement selon un mode de cooptation qui nous permet d'une part de mieux contrôler l'utilisation des ressources et éviter les abus, et d'autre part de créer et garder un contact humain avec nos utilisateurs. 
+    h2 rejoignez-nous !
+    p.spacing L'accès à nos services est à <b>prix libre</b>, se fait <b>sur demande</b> directement à un membre ou par email et est conditionné par <b>les ressources disponibles</b>, à la fois matérielles et humaines.
+
+    p.spacing Nous encourageons nos usager·es ainsi que toute personne souhaitant collaborer à <b>rejoindre l'association</b> afin de participer à sa gestion. L'admission se fait par <b>cooptation</b>, soit parce que vous connaissez déjà un membre, soit en prenant contact avec nous par email. La cotisation est de <b>10 euros par an</b>.
+
     p.spacing
-      | Si vous connaissez un membre de l'association, contactez le directement pour qu'il vous créer un compte.  
+      | Si vous connaissez un membre de l'association, contactez le directement !
       br
-      | Sinon, vous pouvez nous écrire à coucou<img class="simple" src="img/arobase.png" height="15"/>deuxfleurs.fr ou nous rejoindre sur notre salon Matrix #deuxfleurs:deuxfleurs.fr.
+      | Sinon, vous pouvez nous écrire à <b>coucou</b><img class="simple" alt="arobase" src="img/arobase.png" height="15"/><b>deuxfleurs.fr</b> ou nous rejoindre sur notre salon Matrix #deuxfleurs:deuxfleurs.fr pour un premier contact.