WIP site web

3 files changed, 49 insertions, 28 deletions

diff --git a/src/_layout.pug b/src/_layout.pug
index 6dc80a1..1d0de5d 100644
--- a/src/_layout.pug
+++ b/src/_layout.pug
@@ -8,30 +8,31 @@ block root
     link(rel="stylesheet", href="/css/main.css")
     meta(name="viewport", content="width=device-width, initial-scale=1.0")
   body
-    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")
+    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")
-        +menu(root, element)
+        h1
+          a(href="/") deuxfleurs
+        nav.computer_block
+          section.center
+            img(src="/img/flower.svg", width="40")
+            | 
+            img(src="/img/flower.svg", width="40")
+          +menu(root, element)
         
     main
       block content
-    footer
+ 
     script.
       (_ => {
         const hamburger = document.getElementById('menu')
         hamburger.onclick = _ => {
-          const nav = document.querySelector('body > header > nav')
+          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 139154f..cdc1317 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -44,7 +44,7 @@ body {
  */
 
 /* Header + Menu */
-body > header {
+body > aside > header {
   color: white;
   background: rgb(125,205,141);
   background: linear-gradient(0deg, rgba(125,205,141,1) 0%, rgba(81,156,96,1) 50%, rgba(12,144,110,1) 100%); 
@@ -54,27 +54,27 @@ body > header {
   box-shadow: 0px 0px 30px rgba(31,38,103,0.2);
 }
 
-body > header > a > svg { 
+body > aside > header > a > svg { 
   fill: white; 
   display: inline;
   vertical-align: sub;
   margin-right: 1em;
 }
 
-body > header > h1 { display: inline }
-body > header a {
+body > aside > header > h1 { display: inline }
+body > aside > header a {
   color: white;
   text-decoration: none;
 }
 
-body > header > nav ul { 
+body > aside > header > nav ul { 
   list-style-type: none;
   padding-left: 1em;
 }
-body > header > nav > ul { padding-left: 0px }
-body > header > nav a:hover { text-decoration: underline }
-body > header > nav .selected { font-weight: bold }
-body > header > nav .selected::before { content: "» " }
+body > aside > header > nav > ul { padding-left: 0px }
+body > aside > header > nav a:hover { text-decoration: underline }
+body > aside > header > nav .selected { font-weight: bold }
+body > aside > header > nav .selected::before { content: "» " }
 
 body > main {
   padding: 1.5rem;
@@ -92,8 +92,10 @@ h3 { font-size: 1.75rem }
 h4 { font-size: 1.50rem }
 h5 { font-size: 1.25rem }
 h6 { font-size: 1.10rem }
+h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem }
 section, p, ul, ol { margin-bottom: 1rem }
 ul, ol { padding-left: 1.5em }
+a { color:  rgb(12,144,110)}
 img { 
   border-radius: 0.5rem;
   box-shadow: 0px 0px 30px rgba(31,38,103,0.2); 
@@ -153,7 +155,8 @@ input {
 .service-box {
   color: #000;
   text-decoration: none;
-  border: 0.2em solid #000;
+  border: 1px solid #ddd;
+  border-radius: 0.5rem;
   width: 250px;
   text-align:center;
   margin: 1em 1em 0em 0em;
@@ -165,3 +168,7 @@ input {
   color: #fff;
 }
 
+.frame {
+  border-left: 1rem solid #ddd;
+  padding-left: 1rem;
+}
diff --git a/src/index.pug b/src/index.pug
index b2704ae..380581a 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -38,14 +38,27 @@ block content
     h2 # nos valeurs
    
     section(style="padding-left:1.5rem")
-      h3 ⇨ protèger notre vie privée
-      h3 ⇨ défendre notre liberté d'expression
+      h3 ⇨ protèger la vie privée
+      h3 ⇨ défendre la liberté d'expression
       h3 ⇨ ne pas se laisser manipuler
       h3 ⇨ choisir la sobriété numérique
       h3 ⇨ prendre les décisions ensemble
       h3 ⇨ mettre en commun nos connaissances et nos infrastructures
 
   section
+    h2 # nos réflexions
+
+    article.frame
+      p.right
+        em Par Quentin, le 20 avril 2020
+      h4 
+        a(href="https://quentin.dufour.io/blog/2020-04-20/stopcovid/") StopCovid : anonymat et autorités
+      p 
+        | "StopCovid sera totalement anonyme. L'État ne pourra rien savoir sur vous." Non, c'est FAUX, l'État connaitra votre identité et pourrait vous assigner à résidence sans recours possible. Nous vous expliquons pourquoi en nous basant sur le document technique de l'application.
+        | 
+        a(href="https://quentin.dufour.io/blog/2020-04-20/stopcovid/") Lire la suite.
+
+  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. 
     p.spacing