50 files changed, 455 insertions, 685 deletions
diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..cf18521
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": ["@babel/env"],
+  "plugins": [
+    ["@babel/plugin-proposal-object-rest-spread"]
+  ]
+}
diff --git a/article/_liste b/article/_liste
deleted file mode 100755
index f2a81a1..0000000
--- a/article/_liste
+++ /dev/null
@@ -1 +0,0 @@
-article/duckduckgo.txt
diff --git a/article/article.txt b/article/article.txt
deleted file mode 100755
index 16b6829..0000000
--- a/article/article.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-Premier billet|06/09/11|svg|http://ache.nyan.at/perso/ache[200*200].svg
-<div id="intro">Voilà ! C'est fait quelques temps que je souhaitais remetre à jour ce site/blog/portofolio ... Désormais ça c'est fait.</div>
-
-<p>
-Je suis @che, un lycéen de 15 ans. Depuis quelques temps, l'informatique me passionne et notamment la programmation. J'ai débuté en apprenant le langage C et possède quelques connaissances en d'autres langages comme le C++ ou le Python. Ce site a pour but de présenter mes divers projets ainsi que mon activité sur le Web. Pour plus d'informations je vous invite à visiter l'article <strong>"<a href="index.cgi?article=1">Qui suis-je"</a></strong> ou encore <a style="color: #944040" href="/projet">mes réalisations</a>.
-</p>
-
-<h3>À propos de ce site</h3>
-
-<p>Voila, j'ai remis à jour tout le site. Pour ceux qui se souviennent de l'ancien site statique en HTML, vous pouvez oublier. Le site est désormais en C. Oui, oui en langage C grâce au <acronyme value="Common Gateway Interface">CGI</acronyme>. Le C me permet de manipuler le code de la page (un peu comme le PHP). Sinon, ce site utilise l'HTML5 et CSS3 et le JavaScript en Client-side. Tout le design est réalisé sans image. Le logo de cet article est en SVG.</p>
-
-
diff --git a/article/leC.txt b/article/leC.txt
deleted file mode 100755
index d66df07..0000000
--- a/article/leC.txt
+++ /dev/null
@@ -1,87 +0,0 @@
-Les pratiques m&eacute;connues du C|12/04/12|svg|http://ache.nyan.at/perso/ache[200*200].svg
-<div id="intro">Le C est un langage proche de la machine, on parle de langage bas-niveau. Conçu dans les années 70, initalement pour le système d'exploitation Unix. C'est désormais l'un des langages les plus popululaire malgrès son certain âge.</div>
-
-<p>
-  Le C est très complet et a énormément de subtilités, même après des années d'apprentissage et de pratique, la maîtrise totale de C langage n'est pas assurée. De plus, c'est un langage qui évolue, tous les 10 ans environ, la norme change, la dernière à ce jour est la norme C11, sortie en décembre dernier. Chaque norme apporte son lot de pratiques nouvelles et celle-ci ne sont pas toujours suivit ou enseignées. Même les normes nouvelles ne sont pas toujours suivit par les compilateurs. Pourtant, certaines pratiques permises par le langage C sont très utiles et méconnue.
-Voyons rapidement quelques'une de ces pratiques.
-</p>
-
-<h3>Le C de base</h3>
-<div id="intro">Depuis le C K&R, ces pratiques n'ont pas beaucoup évoluées mais sont pourtant méconues.</div>
-<h4>L'Opérateur virgule</h4>
-
-<p>  Très peu utilisé en pratique, mais peu s'avérer utile de temps à autre. La virgule est souvent utiliser pour constituer des listes de déclarations ou pour une liste de paramètre/argument à transmettre/récupérer à/par une fonction, mais ce n'est pas l'opérateur virgule. L'opérateur virgule lui permet d'associés 2 expressions. L'opérateur virgule s'entoure d'un couple d'expression, la première étant évalué comme de type void. Le résultat de l'opération est celui de la deuxième expression (même type donc).
-Exemple d'utilisation :
-  a = i*=5, b+5;
-Comme l'opération se lit de droite à gauche, le première expression est i*=5 et la deuxième est b+5. À la fin de l'opération, la variable b n'est pas modifiée, a prend la valeur de b + 5 et i est égale à 5 fois sa valeur initiale. L'utilité de l'opérateur virgule peu semblé limité car on aurait put décomposer cette instruction en 2 :
-  i *= 5;
-  a = b + 5;
-C'est pour cela que l'opérateur virgule n'est pas souvent utilisé. On la retrouve courrament cependant dans les for ou les conditions sur 2 lignes (afin de ne pas mettre de crochets).
-  for(int i = 0; b >= i; --b, ++i);
-  if( b == i)
-    b = 0,
-    i = 0;
-
-Ne soyez pas surpris si vous en croisé dans un code ;) .
-</p>
-
-<h4>Les opérateurs # et ##</h4>
-
-<p>  Le croisillon et le double croisillon sont 2 opérateurs de processeurs rarement utilisés. Pourtant leurs applications sont multiples. L'opérateur # tout d'abord permet de transformer son opérande en chaine de caractère, c'est pratique pour débugger par exemple.
-  Exemple :
-    #define WTF_WITH( x ) puts( #x " %i - %s", x, __LINE__ )
-Comment ça marche ?
-Avant la compilation, le préprocesseur transphorme WTF_WITH( var ) par printf( "var" " %i - " __LINE__ "\n", var).
-Ici, on a 3 expressions littérales succéssives. Elles sont donc rassemblée en une "var %i - LaLigne\n".
-
-   Maintenant, l'opérateur ## lui concatène 2 marqueurs de position. Pas très explicite voyons tout de suite en pratique :
-   Exemple :
-      #define WTF_WITH( x, y ) x ##y // equivalent à x ## y ou x##y
-Ici, printf("%d", WTF_WITH( var, 2)); donnera après passage du préprocesseur, printf("%d", var2); . Là encore bien pratique pour le debuggage.
-
-Seulement les possibilités de ces 2 opérateurs ne se limites pas au debuggage de code ....
-</p>
-
-<h4>Les unions</h4>
-<p>
-  Vous connaissez les structures ? Et bien les unions, c'est une structure donc vous ne pouvez utiliser que un seul des champs à la fois. L'utilité ?
-  L'optimisation de la taille. En effet, la taille d'une union est égale à celle de son champ le plus lourd. Elle sert également à mieu organiser son code.
-   union ID {
-     char* name;
-     char   ID;
-   };
-Ici, l'union ID fait sizeof(char*) bytes. On l'utilise comme une structure.
-Les Unions sont utilisées par exemple par la SDL ...
-</p>
-
-<h3>Et depuis C89 et C99 ?</h3>
-<p>
-  Les normes C89 et C99 ont ajoutés beaucoup de nouveautés. Très peux sont courrament utilisées, et certaines ne sont carrément pas implémentées par les compilateurs. On peut pensée aux nombres complexes par exemple.
-</p>
-<h4>L'initialisation des tableaux</h4>
-<p>
-Depuis C89, on peut initialiser un tableau avec des crochets. Comme ceci :
- int tab[] = { [0] = 0, [1] = 1, [5] = 4};
- Ainsi, on peut initialiser le 1000ième éléments dès sa déclaration. 
- On peut également utiliser cette syntaxe afin de créer un tableau de associatif (ou de correspondance).
- C'est par exemple une méthode très pratique pour convertir une chaine en Base64.
-</p>
-<h4>L'initialisation des structures</h4>
-<p>Personellement, j'ai du mal à voir l'utilité. Depuis C99, il est possible d'initiliser un structure champ par champ.
-  struct coord pointA = {.x = 10, .y = 20};
-</p>
-<h3>Et depuis C11 ?</h3>
-
-<h3>En matière d'obfuscation</h3>
-
-<p>L'obsucation est le fait rendre un code illisible par un humain en complexifiant la lecture d'un code tout en  ...</p>
-
-"Hj"[4];
-Les Trigraphes
-La conpressions des chaines littérales
-assert()
-sélection générique C11 http://www.siteduzero.com/forum-83-635220-p4-la-poo-et-le-c.html#r6283122
-stdbool.h
-stdint.h
-Les composés litéraux
-
diff --git a/article/article.m4 b/articles/article.m4
index 72c1965..e468b2c 100644
--- a/article/article.m4
+++ b/articles/article.m4
@@ -13,6 +13,6 @@ include(tmpFileNameArticle)
 </section>
 </article>
 
-include(left.htm)
+include(tmp/left.htm)
 
 </body></html>
diff --git a/article/bizarrerie-du-langage-c.md b/articles/bizarrerie-du-langage-c.md
index db5c2f5..db5c2f5 100644
--- a/article/bizarrerie-du-langage-c.md
+++ b/articles/bizarrerie-du-langage-c.md
diff --git a/article/des.txt b/articles/des.txt
index 60f902b..60f902b 100755
--- a/article/des.txt
+++ b/articles/des.txt
diff --git a/article/duckduckgo-google-en-mieux.md b/articles/duckduckgo-google-en-mieux.md
index 3195467..3195467 100644
--- a/article/duckduckgo-google-en-mieux.md
+++ b/articles/duckduckgo-google-en-mieux.md
diff --git a/article/intro.m4 b/articles/intro.m4
index 187de13..187de13 100644
--- a/article/intro.m4
+++ b/articles/intro.m4
diff --git a/article/res/DuckDuckGo_Logo.png b/articles/res/DuckDuckGo_Logo.png
index 780a444..780a444 100644
--- a/article/res/DuckDuckGo_Logo.png
+++ b/articles/res/DuckDuckGo_Logo.png
diff --git a/article/res/DuckDuckGo_Logo.svg b/articles/res/DuckDuckGo_Logo.svg
index 4b53b6e..4b53b6e 100644
--- a/article/res/DuckDuckGo_Logo.svg
+++ b/articles/res/DuckDuckGo_Logo.svg
diff --git a/article/res/c_language.svg b/articles/res/c_language.svg
index 5bf705d..5bf705d 100644
--- a/article/res/c_language.svg
+++ b/articles/res/c_language.svg
diff --git a/article/res/digraphe_c.png b/articles/res/digraphe_c.png
index ffb7fd2..ffb7fd2 100644
--- a/article/res/digraphe_c.png
+++ b/articles/res/digraphe_c.png
diff --git a/article/res/trigraphe_c.png b/articles/res/trigraphe_c.png
index 7d3dd82..7d3dd82 100644
--- a/article/res/trigraphe_c.png
+++ b/articles/res/trigraphe_c.png
diff --git a/article/res/zeroClickBox1.png b/articles/res/zeroClickBox1.png
index db92266..db92266 100755
--- a/article/res/zeroClickBox1.png
+++ b/articles/res/zeroClickBox1.png
diff --git a/design/cloud.svg b/design/cloud.svg
deleted file mode 100755
index 5bace14..0000000
--- a/design/cloud.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-  
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1169 160" xml:space="preserve">
-
-  <title>SVG Animation - A New Cloud</title>
-  <g id="screen" transform="translate(0, 0)">
-      <linearGradient id="degrade" gradientUnits="userSpaceOnUse" x1="585" x2="585" y1="0" y2="175">
-        <stop offset="0%" stop-color="#FFF" />
-        <stop offset="100%" stop-color="#888" />
-      </linearGradient>
-  <path d="M0,75 Q30,90 52,118Q61,119 68,124Q90,95 118,90Q140,51 188,68Q265,-20 340,75Q375,80 375,110Q395,115 408,128Q440,110 470,122Q535,64 608,113Q620,112 630,110Q650,70 700,88Q780,30 853,97L867,100Q879,60 917,68Q943,20 988,45Q1066,-20 1140,55Q1160,50 1170,75L1170,175L0,175L0,175"
-        fill="none" stroke="grey" stroke-width="1" style="fill:url(#degrade)" /> 
-         </g>
-
-</svg>
-
diff --git a/design/commentaire.css b/design/commentaire.css
deleted file mode 100755
index 5c8bdec..0000000
--- a/design/commentaire.css
+++ /dev/null
@@ -1,47 +0,0 @@
-#commentaires
-{
-    background-color: #c9cbce;
-   -moz-border-radius: 10px;
-   -webkit-border-radius: 10px;
-    border-radius: 10px;
-    width: 90%; height: auto;
-    margin: auto;
-    padding-bottom: 10px;
-}
-#c_intro
-{
-    font-style: oblique;
-    padding-top: 10px;
-    line-height: 250%;
-    padding-left: 25px;
-    text-indent: 10px;
-    font-size: 0.95em;
-    color: #944040;
-}
-#c_contenu
-{
-    text-indent: 100px;
-    font-size: 0.67em; 
-    width: 70%;  height: auto; 
-    padding-left: 15px;
-}
-#c_contenu:after
-{
-    color: #FFF;
-    content: "_______________";
-}
-#c_post
-{
-    width: 70%;  height: auto; 
-    padding-left: 15px;
-}
-#c_post p
-{
-    font-size: 0.7em; 
-    padding-left: 25px;
-
-}
-#c_titre
-{
-    color: #6b633e;
-}
diff --git a/design/confirmation.css b/design/confirmation.css
deleted file mode 100755
index d7e1f97..0000000
--- a/design/confirmation.css
+++ /dev/null
@@ -1,96 +0,0 @@
-#boutons
-{
-  float: right;
-  margin: 2px 2px 2px 2px;
-}
-#bouton
-{
-   position: relative;
-   width: 20px; height: 16px;
-   background-color: #819fbc;
-   border: 1px solid #4a6a8b;
-  -moz-border-radius: 2px;
-}
-#bouton:hover
-{
- -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
- -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
-  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
-}
-#reduire
-{
-   position: relative;
-   margin: 1px 0px 0px 1px;
-   width: 18px; height: 14px;
-   background-color: #5a81a8;
-}
-#reduire div
-{
-   position: absolute;
-   margin: 9px 0px 0px 2px; 
-   width: 14px; height: 2px; 
-   background-color: #dfe5ed;
-  -moz-border-radius: 1px;
-}
-#close
-{
-   position: relative;
-   margin: 1px 0px 0px 1px;
-   width: 18px; height: 14px;
-   background-color: #5a81a8;
-}
-#close div
-{
-   border: 1px solid #486480;
-  -moz-border-radius: 1px;
-  -webkit-border-radius: 1px;
-   background-color: #dfe5ed;
-   position: absolute;
-   margin: 5px 0px 0px 1px; 
-   width: 14px; height: 2px; 
-}
-#close div:first-child
-{
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-   transform: rotate(45deg);
-}
-#close div:last-child
-{
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-   transform: rotate(-45deg);
-}
-#confirmation
-{
-   margin: auto;
-   width: 600px; height: 250px; 
-   background-color: #517aa3;
-   border: 1px solid #8ba7c2;
-  -moz-border-radius: 10px;
-}
-#confirmation_mes
-{
-   width: 594px; height: 222px; 
-   border: 1px solid #395572;
-   background-color: #e7e7e7;
-   margin: 23px 0px 0px 2px;
-  -moz-border-radius: 10px;
-}
-/*
-  <div id="confirmation">
-     <div id="boutons">
-        <div id="bouton">
-            <div id="close"><div></div><div></div></div>
-        </div>
-     </div>
-     <div id="boutons">
-        <div id="bouton">
-            <div id="reduire"><div></div></div>
-        </div>
-     </div>
-     <div id="confirmation_mes"><br/>
-     Voulez confirmez l'envoye de ce commentaire ? 
-     </div>
-  </div>
-*/
diff --git a/design/design.css b/design/design.css
deleted file mode 100755
index 36c29d0..0000000
--- a/design/design.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@import url("contenu.css");
-@import url("sommaire.css");
-@import url("confirmation.css");
-@import url("commentaire.css");
-@import url("style.css");
-@import url("rainbow.css");
-
-body
-{
-  font-family: 'Noto Serif', Verdana, sans-serif;
-  margin: 0px;
-  background: #f1f1f1;
-  color: #333333;
-
-}
-#body_c
-{
-  background-repeat:no-repeat;
-  background-position:top left;
-}
-.fl
-{
-  float: left;
-}
-ache {
-  margin-left: auto;
-  margin-right: auto;
-}
-img {
-  display: block;
-  margin: 0 auto;
-  max-width: 100%;
-}
-.suite {
-    color: #888888;
-    outline: none;
-    text-decoration: none;
-    font-size: 0.6em;
-    font-weight: bold;
-    font-family: monospace, serif;
-    text-shadow: 0 1px 0 #DDD;
-}
-
diff --git a/design/style.css b/design/style.css
deleted file mode 100644
index 2b6ae40..0000000
--- a/design/style.css
+++ /dev/null
@@ -1,164 +0,0 @@
-body { font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; line-height: 1.6; word-wrap: break-word; padding: 30px; font-size: 16px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin: 5%;}
-
-.directory {
-    cursor: pointer;
-    list-style-type: disc;
-}
-.file {
-    list-style: circle;
-}
-.file a {
-    padding-top: 5px;
-    padding-bottom: 5px;
-}
-
-.qcm_item p { margin: 0; padding: 0; display:inline;}
-.qcm_check { padding-left: 32px;}
-.qcm_radio { padding-left: 32px;} 
-
-blockquote {
-    color: #777;
-    padding: 1px 2%;
-    border-left: 5px solid #ccc;
-}
-
-.special-box {
-    background: #eee7da;
-    margin: 12.5px 12.5px;
-    padding: 10px 0 10px 95px; 
-    color: #424242;
-    min-height: 60px;
-}
-.special-box::before{
-    content: "";
-    display: block;
-    width: 48px;
-    height: 48px;
-    background-repeat: no-repeat;
-    margin: 0px 0 -48px -70px;
-}
-.information{
-    background: #daeaee;
-}
-.information::before{
-    background-image: url("/img/ic_info_black_48px.svg"); 
-}
-.comment{
-    background: #eea;
-}
-.comment::before{
-    background-image: url("/img/ic_comment_black_48px.svg"); 
-}
-.attention{
-    background: #eee7da;
-}
-.attention::before{
-    background-image: url("/img/ic_error_black_48px.svg"); 
-}
-.question{
-    background: #e2daee;
-}
-.question::before{
-    background-image: url("/img/ic_help_black_48px.svg"); 
-}
-.good{
-    background: #aea;
-}
-.good::before{
-    background-image: url("/img/ic_good_black_48px.svg"); 
-}
-.bad{
-    background: #eaa;
-}
-.bad::before{
-    background-image: url("/img/ic_bad_black_48px.svg"); 
-}
-.secret {
-    background: #eee;
-    padding: 10px 0 10px 15px;
-    min-height: 20px;
-}
-.hiden_block_quote {
-    display: none;
-}
-table {
-  border-collapse: collapse;
-  padding: 7px 13px;
-}
-
-table, th, td {
-    border: 1px solid #dfe2e5;
-    padding: 7px 13px;
-}
-.special-box-content {
-    margin-top: 5px;
-}
-kbd {
-    background-color: #f8f6ea;
-    padding: 2px 6px;
-    border-radius: 3px;
-    border: 1px solid #e0dab6;
-    border-bottom-width: 3px;
-    text-shadow: 0 1px 0 #fff;
-    color: #5e551f;
-}
-.view {
-    position: relative;
-}
-.raw_button {
-    position: absolute;
-    top:10px;
-    right:0;
-
-  margin      : 0;
-  padding     : 0;
-  border      : 0;
-  background  : transparent;
-  font-family : inherit;
-  font-size   : 1em;
-  cursor      : pointer;
-}
-.raw_button > div {
-  width       : 40px;
-  height      : 24px;
-  background  : rgb(192,192,192) url('image.png') no-repeat center center;
-  line-height : 24px;
-  border        : 1px solid rgba(27, 31, 35, 0.2);
-  border-radius : 3px;
-  font-size: 12px;
-
-  color: #24292e;
-  background-color: #eff3f6;
-  background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.raw_button > div > div {
-    font-weight: bold;
-}
-
-.no-style {
- text-decoration: none;
-}
-.valid {
-    border: 2px solid #c0392b;
-    border-radius: 2px;
-    outline: none;
-    border-color: #9f9;
-    box-shadow: 0 0 5px #9f9;
-}
-.invalid {
-
-    border: 2px solid #c0392b;
-    border-radius: 2px;
-    outline: none;
-    border-color: #f99;
-    box-shadow: 0 0 5px #f99;
-}
-.glowing {
-    border: 2px solid #c0392b;
-    border-radius: 2px;
-    outline: none;
-    border-color: #99f;
-    box-shadow: 0 0 5px #99f;
-}
diff --git a/headers.m4 b/headers.m4
index 9f0927a..52b7492 100644
--- a/headers.m4
+++ b/headers.m4
@@ -3,8 +3,8 @@
     <title>TITLE_TITLE</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="canonical" href="CANONIC"/>
-    <link rel="shortcut icon" type="image/svg" href="/res/ache.ico" />
-    <style>@import url("/design/design.css");</style>
-    <script src="/res/zen.js" defer></script>
+    <link rel="shortcut icon" type="image/svg" href="/s/img/ache.ico" />
+    <style>@import url("/s/css/style.css");</style>
+    <script src="/s/js/main.js" defer></script>
     <meta name= "description" content="Site d'ache : Articles et présentation de mes projets" />
 </head>
diff --git a/index.m4 b/index.m4
index b429399..cf3f47e 100644
--- a/index.m4
+++ b/index.m4
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html> 
+<html>
 
     <!-- HEADERS -->
-include(headers_index.htm)
-        
+include(tmp/headers.htm)
         <body>
             <!-- Article -->
-include(articles.htm)
+include(tmp/articles.htm)
             <!-- aside left column -->
-include(left.htm)
+include(tmp/left.htm)
   </body></html>
diff --git a/left.m4 b/left.m4
index 7f8ed44..1ea2e4e 100644
--- a/left.m4
+++ b/left.m4
@@ -1,18 +1,17 @@
 <aside id="side-bar">
-include(res/acheLogo.svg)
-
+include(s/img/acheLogo.svg)
     <h2> Ache </h2>
     <div id="desc">  Étudiant en Math-Info <br />  <span id="about">GNU\Linux, C, C++, Python, Math, ... <br /> </span></div>
     <nav>
       <ul>
         <li class="about_bar"><a href="https://twitter.com/arobase_che">
-include(res/twitterLogo.svg)
+include(s/img/twitterLogo.svg)
         </a></li>
         <li class="about_bar"><a href="http://git.ache.one">
-include(res/gitLogo.svg)
+include(s/img/gitLogo.svg)
         </a></li>
         <li class="about_bar"><a href="https://mastodon.xyz/@ache">
-include(res/mastoLogo.svg)
+include(s/img/mastoLogo.svg)
         </a></li>
       </ul>
     </nav>
diff --git a/makefile b/makefile
index 7bdcc0c..f8906dc 100644
--- a/makefile
+++ b/makefile
@@ -1,62 +1,122 @@
 
 MD_CMD=remark --rc-path remarkrc
 CATCH_CMD=pup
-BASE_HTML=left.htm headers.htm
-ALL_ARTICLES=$(wildcard article/*.md)
+HTML_MINIFIER_CMD=htmlmin
+BASE_HTML=tmp/left.htm tmp/headers.htm
+ALL_ARTICLES=$(wildcard articles/*.md)
 ALL_ARTICLES_OUT=$(ALL_ARTICLES:.md=.html)
-ALL_ARTICLES_INTRO_OUT=$(ALL_ARTICLES:.md=_intro.html)
-
-all: $(ALL_ARTICLES_OUT) $(BASE_HTML) index.html contact/index.html
-
-article/%.html: article/%.md $(BASE_HTML)
-	cat $< | ${MD_CMD} > ${@:.html=.htm}
-	m4 -D TITLE_TITLE="`echo Licornes, hérissons et renards`" headers.m4  > ${basename $@}_header.html
-	m4 -D tmpFileNameArticle=${@:.html=.htm} -D linkFileNameArticle=${<:.md=} -D HEADER_HEADER=${basename $@}_header.html -D CANONIC="/$@" article/article.m4 > $@
-
-article/%_intro.html: article/%.html
-	cat $< | ${CATCH_CMD} "h1" > ${@:.html=.htm}
-	cat $< | ${CATCH_CMD} "h1 + p" | sed 's/res\//article\/res\//' >> ${@:.html=.htm}
-	cat $< | ${CATCH_CMD} "h1 + p + p" >> ${@:.html=.htm}
-	m4 -D tmpFileNameArticle=${@:.html=.htm} -D linkFileNameArticle=${<:.html=} article/intro.m4 > $@
-
-articles.htm: $(ALL_ARTICLES_INTRO_OUT)
+ALL_ARTICLES_INTRO_OUT=$(addprefix articles/tmp/,$(notdir $(ALL_ARTICLES:.md=_intro.html)))
+
+SCRIPT_JS=s/js/main.js
+SHEET_CSS=s/css/style.css
+
+
+# Creation des articles, puis des bases et enfin de l'index
+# 	Les bases en premiers
+# 	Puis les articles
+# 	Et enfin index (qui possède une liste des introductions des articles)
+all: $(ALL_ARTICLES_OUT) $(BASE_HTML) index.html contact/index.html $(SHEET_CSS) $(SCRIPT_JS)
+
+
+# > Création des articles depuis le markdown
+# 	On compile le fichier md vers html (tmp/%.htm)
+# 	On rajoute les headers (tmp/%_header.htm)
+# 	On fini d'ajouter le squelette HTML (articles/%.html
+articles/%.html: articles/%.md $(BASE_HTML)
+	@echo "> Création des articles"
+	mkdir -p articles/tmp
+	cat $< | $(MD_CMD) > $(addprefix articles/tmp/,$(notdir $(@:.html=.htm)))
+	m4 -D TITLE_TITLE="`echo Licornes, hérissons et renards`" headers.m4  > $(addprefix articles/tmp/,$(notdir $(basename $@)_header.htm))
+	m4 -D tmpFileNameArticle=$(addprefix articles/tmp/,$(notdir $(@:.html=.htm))) -D linkFileNameArticle=$(<:.md=) -D HEADER_HEADER=$(addprefix articles/tmp/,$(notdir $(basename $@)_header.htm)) -D CANONIC="/$@" articles/article.m4 | $(HTML_MINIFIER_CMD) > $@
+
+# > Création des introductions des articles
+# 	On conserve le titre principale (dans tmp/%_intro.htm)
+# 	On y ajoute les deux premiers paragraphe (tmp/%_intro.html)
+#
+articles/tmp/%_intro.html: articles/%.html
+	@echo "> Création des introductions d'articles"
+	mkdir -p articles/tmp
+	cat $< | $(CATCH_CMD) "h1" > $(@:.html=.htm)
+	cat $< | $(CATCH_CMD) "h1 + p" | sed 's/res\//articles\/res\//' >> $(@:.html=.htm)
+	cat $< | $(CATCH_CMD) "h1 + p + p" >> $(@:.html=.htm)
+	m4 -D tmpFileNameArticle=$(@:.html=.htm) -D linkFileNameArticle=$(<:.html=) articles/intro.m4 > $@
+
+
+# > Création de la liste des introductions d'articles pour la page principale
+# 	On assemble juste les introductions d'articles ensemble
+tmp/articles.htm: $(ALL_ARTICLES_INTRO_OUT)
+	@echo "> Création de la liste des introductions d'articles"
+	mkdir -p tmp
 	cat $(ALL_ARTICLES_INTRO_OUT) > $@
 
 
-headers_index.htm:
-	m4 -D TITLE_TITLE="Licornes, hérissons et renards" -D CANONIC="/" headers.m4  > $@
+# > Création de la page principale
+# 	On se sert du menu de gauche, du header, et de la liste des introductions
+# 		d'articles
+index.html: index.m4 $(BASE_HTML) tmp/articles.htm
+	@echo "> Création de la page principale"
+	m4 $< | $(HTML_MINIFIER_CMD) > $@
 
-index.html: index.m4 $(BASE_HTML) headers_index.htm articles.htm
-	m4 $< > $@
 
+# > Création de la page de contact
+# 	On compile le markdown en html (contact.htm)
+# 	On ajoute l'entête avec m4 (contact_header.html)
+# 	On ajoute le reste du squelette avec m4 (contact.html)
 contact/index.html: contact/index.md
-	${MD_CMD} $< > ${@:.html=.htm}
-	m4 -D TITLE_TITLE="`grep h1 ${@:.html=.htm} | cut -d'>' -f 2 | cut -d'<' -f 1`" headers.m4  > ${basename $@}_header.html
-	m4 -D tmpFileNameArticle=${@:.html=.htm} -D linkFileNameArticle=${<:.md=} -D HEADER_HEADER=${basename $@}_header.html -D CANONIC="/contact" article/article.m4 > $@
-
-left.htm: res/twitterLogo.svg res/mastoLogo.svg res/gitLogo.svg res/acheLogo.svg left.m4
-	m4 left.m4 > left.htm
-
-headers.htm: headers.m4
-	m4 headers.m4 > headers.htm
-
+	@echo "> Création de la page de contact"
+	$(MD_CMD) $< > $(@:.html=.htm)
+	m4 -D TITLE_TITLE="`grep h1 $(@:.html=.htm) | cut -d'>' -f 2 | cut -d'<' -f 1`" headers.m4  > $(basename $@)_header.html
+	m4 -D tmpFileNameArticle=$(@:.html=.htm) -D linkFileNameArticle=$(<:.md=) -D HEADER_HEADER=$(basename $@)_header.html -D CANONIC="/contact" articles/article.m4 | $(HTML_MINIFIER_CMD) > $@
+
+
+# > Création du menu de gauche
+# 	En se servant des logo dans s/img, on assemble le tout avec m4.
+tmp/left.htm: s/img/twitterLogo.svg s/img/mastoLogo.svg s/img/gitLogo.svg s/img/acheLogo.svg left.m4
+	@echo "> Création du menu de gauche"
+	mkdir -p tmp
+	m4 left.m4 > $@
+
+
+# > Création de l'entête principale
+# 	Tout est fait par le fichier headers.m4. On définit simplement le titre.
+tmp/headers.htm: headers.m4
+	@echo "> Création de l'entête principale"
+	m4 -D TITLE_TITLE="Licornes, hérissons et renards - 🦄 🦔 🦊" -D CANONIC="/" headers.m4  > $@
+
+# > Création du fichier principale JavaScript
+# 	À partir du script `prepare` de npm.
+# 	En utilisant babel puis uglify-js
+$(SCRIPT_JS): src/js/*
+	npm run-script prepare
+
+# > Création du fichier principale CSS
+# 	À partir de sassc, un compilateur SCSS écrit en C.
+$(SHEET_CSS): src/css/*
+	sassc -t compressed src/css/design.scss > s/css/style.css
+
+
+# > Fonctions de nettoyage
+# .PHONY sert à indiquer une commande (sinon un fichier clean poserait problème)
+# Un tiret devant une commande indique d'ignorer une éventuelle erreur.
+.PHONY: clean
 clean:
-	rm -f $(BASE_HTML)
-	rm -f articles.htm
-	rm -f $(ALL_ARTICLES:.md=_intro.htm)
-	rm -f $(ALL_ARTICLES:.md=.htm)
-	rm -f article/*.htm
-	rm -f article/*_header.html
-	rm -f contact/*.htm
-	rm -f contact/*_header.html
-	rm -f headers_index.htm
-
-mrproper: clean
-	rm -f index.html
-	rm -f $(ALL_ARTICLES_OUT)
-	rm -f $(ALL_ARTICLES_INTRO_OUT)
-	rm -f contact/index.html
-
-
-
+	@echo "Clean"
+	-rm -f $(BASE_HTML)
+	-rm -f articles.htm
+	-rm -f $(ALL_ARTICLES:.md=_intro.htm)
+	-rm -f $(ALL_ARTICLES:.md=.htm)
+	-rm -f articles/*.htm
+	-rm -f articles/*_header.html
+	-rm -f contact/*.htm
+	-rm -f contact/*_header.html
+	-rm -rf tmp/
+
+.PHONY: mrclean
+mrclean: clean
+	-rm -f index.html
+	-rm -f $(ALL_ARTICLES_OUT)
+	-rm -f $(ALL_ARTICLES_INTRO_OUT)
+	-rm -f $(SHEET_CSS)
+	-rm -f $(SCRIPT_JS)
+	-rm -f contact/index.html
 
diff --git a/package.json b/package.json
index 1fb0321..28018d2 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,10 @@
 {
   "name": "ache.one",
+  "description": "Ache's personal website",
+  "scripts": {
+    "pretest": "xo",
+    "prepare": "del-cli tmp/dist && cross-env BABEL_ENV=production babel src/js --out-dir tmp/dist;uglifyjs tmp/dist/*.js -mangle --mangle-top-level -c toplevel -o s/js/main.js"
+  },
   "dependencies": {
     "rehype-format": "^2.2.0",
     "rehype-katex": "^1.0.0",
@@ -12,14 +17,32 @@
     "remark-kbd": "^1.0.6",
     "remark-line-input": "git+http://git.ache.one/remark-line-input/",
     "remark-math": "^1.0.0",
-    "remark-mermaid-simple": "git+http://git.ache.one/remark-mermaid-simple/",
     "remark-multiple-choice": "git+http://git.ache.one/remark-multiple-choice",
     "remark-parse": "^5.0.0",
     "remark-preset-lint-markdown-style-guide": "^2.1.1",
     "remark-rehype": "^3.0.0",
-    "remark-select": "git+http://git.ache.one/remark-select/",
     "remark-special-box": "git+http://git.ache.one/remark-special-box/",
     "remark-text-input": "git+http://git.ache.one/remark-text-input/"
   },
-  "author": "ache"
+  "devDependencies": {
+    "@babel/cli": "^7.1.5",
+    "@babel/core": "^7.1.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.1.5",
+    "cross-env": "^5.2.0",
+    "del-cli": "^1.1.0",
+    "xo": "^0.23.0"
+  },
+  "xo": {
+    "space": true,
+    "rules": {
+      "comma-dangle": [
+        "error",
+        "always-multiline"
+      ]
+    },
+    "envs": ["browser"]
+  },
+  "author": "ache <ache@ache.one>",
+  "license": "GPL-3.0-or-later"
 }
diff --git a/res/twitterLogo.svg b/res/twitterLogo.svg
deleted file mode 100644
index 80a1615..0000000
--- a/res/twitterLogo.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-  <desc>Twitter Logo</desc>
-              <g  transform="translate(-16,-16)scale(0.053)">
-              <path d="
-              M 630, 425
-              A 195, 195 0 0 1 331, 600
-              A 142, 142 0 0 0 428, 570
-              A 70, 70 0 0 1 370, 523
-              A 70, 70 0 0 0 401, 521
-              A 70, 70 0 0 1 344, 455
-              A 70, 70 0 0 0 372, 460
-              A 70, 70 0 0 1 354, 370
-              A 195, 195 0 0 0 495, 442
-              A 67, 67 0 0 1 611, 380
-              A 117, 117 0 0 0 654, 363
-              A 65, 65 0 0 1 623, 401
-              A 117, 117 0 0 0 662, 390
-              A 65, 65 0 0 1 630, 425
-              Z" style="fill:#777;"/></g></svg>
diff --git a/res/zen.js b/res/zen.js
deleted file mode 100644
index a61bf79..0000000
--- a/res/zen.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-window.addEventListener("scroll", () => {
-  const articles = document.getElementsByTagName('article');
-  const header = document.getElementById('side-bar');
-
-  if(window.pageYOffset >= 500){
-    if( header ) {
-      header.classList.add('hidden');
-    }
-    if( articles ) {
-      console.log(articles);
-      Array.from(articles).forEach( (e) => {
-        console.log(e);
-        e.classList.add('zen-mode');
-      });
-    }
-  } else {
-    if( header ) {
-      header.classList.remove('hidden');
-    }
-    if( articles ) {
-      Array.from(articles).forEach( (e) => {
-        e.classList.remove('zen-mode');
-      });
-    }
-  }
-});
diff --git a/403.html b/s/err/403.html
index cd218bd..cd218bd 100644
--- a/403.html
+++ b/s/err/403.html
diff --git a/404.html b/s/err/404.html
index 21abcf1..21abcf1 100644
--- a/404.html
+++ b/s/err/404.html
diff --git a/res/ache.ico b/s/img/ache.ico
index ba2b618..ba2b618 100644
--- a/res/ache.ico
+++ b/s/img/ache.ico
diff --git a/res/acheLogo.svg b/s/img/acheLogo.svg
index a77efe5..a77efe5 100644
--- a/res/acheLogo.svg
+++ b/s/img/acheLogo.svg
diff --git a/img/favicon.ico b/s/img/favicon.ico
index ba2b618..ba2b618 100644
--- a/img/favicon.ico
+++ b/s/img/favicon.ico
diff --git a/res/gitLogo.svg b/s/img/gitLogo.svg
index 9fc2998..9fc2998 100644
--- a/res/gitLogo.svg
+++ b/s/img/gitLogo.svg
diff --git a/img/ic_bad_black_48px.svg b/s/img/ic_bad_black_48px.svg
index 0b02d88..0b02d88 100644
--- a/img/ic_bad_black_48px.svg
+++ b/s/img/ic_bad_black_48px.svg
diff --git a/img/ic_comment_black_48px.svg b/s/img/ic_comment_black_48px.svg
index e0d89e2..e0d89e2 100644
--- a/img/ic_comment_black_48px.svg
+++ b/s/img/ic_comment_black_48px.svg
diff --git a/img/ic_error_black_48px.svg b/s/img/ic_error_black_48px.svg
index d8eb238..d8eb238 100644
--- a/img/ic_error_black_48px.svg
+++ b/s/img/ic_error_black_48px.svg
diff --git a/img/ic_good_black_48px.svg b/s/img/ic_good_black_48px.svg
index 0995688..0995688 100644
--- a/img/ic_good_black_48px.svg
+++ b/s/img/ic_good_black_48px.svg
diff --git a/img/ic_help_black_48px.svg b/s/img/ic_help_black_48px.svg
index c92b2ad..c92b2ad 100644
--- a/img/ic_help_black_48px.svg
+++ b/s/img/ic_help_black_48px.svg
diff --git a/img/ic_info_black_48px.svg b/s/img/ic_info_black_48px.svg
index 266453e..266453e 100644
--- a/img/ic_info_black_48px.svg
+++ b/s/img/ic_info_black_48px.svg
diff --git a/res/mastoLogo.svg b/s/img/mastoLogo.svg
index 1e057ad..1e057ad 100644
--- a/res/mastoLogo.svg
+++ b/s/img/mastoLogo.svg
diff --git a/res/rss.svg b/s/img/rss.svg
index e6827b1..e6827b1 100755
--- a/res/rss.svg
+++ b/s/img/rss.svg
diff --git a/s/img/twitterLogo.svg b/s/img/twitterLogo.svg
new file mode 100644
index 0000000..dbe3c14
--- /dev/null
+++ b/s/img/twitterLogo.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+<desc>Twitter Logo</desc>
+<g  transform="translate(-16,-16)scale(0.053)">
+<path d="M 630, 425 A 195, 195 0 0 1 331, 600 A 142, 142 0 0 0 428, 570 A 70, 70 0 0 1 370, 523 A 70, 70 0 0 0 401, 521 A 70, 70 0 0 1 344, 455 A 70, 70 0 0 0 372, 460 A 70, 70 0 0 1 354, 370 A 195, 195 0 0 0 495, 442 A 67, 67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363 A 65, 65 0 0 1 623, 401 A 117, 117 0 0 0 662, 390 A 65, 65 0 0 1 630, 425
+Z" style="fill:#777;"/></g></svg>
diff --git a/design/.design.css.swp b/src/css/.design.css.swp
index 89e9e74..89e9e74 100755
--- a/design/.design.css.swp
+++ b/src/css/.design.css.swp
diff --git a/design/.sommaire.css.swp b/src/css/.sommaire.css.swp
index 7a61c4d..7a61c4d 100755
--- a/design/.sommaire.css.swp
+++ b/src/css/.sommaire.css.swp
diff --git a/design/contenu.css b/src/css/_contenu.scss
index 8f0e10d..267d51a 100755
--- a/design/contenu.css
+++ b/src/css/_contenu.scss
@@ -1,49 +1,55 @@
-article h1 {
+article {
+  h1 {
     font-size:2em;
     color: #A5B;
-}
-article h2 {
+  }
+  h2 {
     font-size:1.5em;
     color: #BB8;
-}
-article h3 {
+  }
+  h3 {
     font-size:1.25em;
     color: #AC4;
+  }
+  h2:before {
+    content: "# ";
+    color: #ABB;
+    font: bold  0.95em arial, sans-serif;
+  }
+  h3:before {
+    content: "## ";
+    color: #ABB;
+    font: bold  0.95em arial, sans-serif;
+  }
+  h4:before {
+    content: "### ";
+    color: #ABB;
+    font: bold  1em arial, sans-serif;
+  }
 }
-article h2:before {
-  content: "# ";
-  color: #ABB;
-  font: bold  0.95em arial, sans-serif;
-}
-article h3:before {
-  content: "## ";
-  color: #ABB;
-  font: bold  0.95em arial, sans-serif;
-}
-article h4:before {
-  content: "### ";
-  color: #ABB;
-  font: bold  1em arial, sans-serif;
-}
-section > p:nth-of-type(1) {
-}
-section > p:nth-of-type(1):after {
+section {
+  > p:nth-of-type(1) {
+  }
+  > p:nth-of-type(1):after {
     content: " ";
     display: table;
     clear: both;
-}
-section > p:nth-of-type(1) > img {
+  }
+  > p:nth-of-type(1) > img {
     height:150px;
     float:right;
+  }
+
+  @media #{$gt-gsm} {
+    > p:first-of-type {
+        margin-top: 2.5%;
+        margin-bottom: 2.5%;
+        padding-left: 6%;
+        color: #944040;
+    }
+  }
 }
-article code {
-    color: #a00;
-    background: #eee;
-    border: 1px solid #ccc;
-    padding: 0 5px;
-}
-article
-{
+article {
   margin-right: 2%;
   margin-left: 3%;
   float: left;
@@ -54,10 +60,15 @@ article
   padding-left:0%;
   padding: 1.6em 1.6em;
   font-family: Merriweather, "Liberation Serif", "Segoe UI";
-}
 
-@media only screen and (min-width: 768px) {
-  article {
+  code {
+    color: #a00;
+    background: #eee;
+    border: 1px solid #ccc;
+    padding: 0 5px;
+  }
+
+  @media #{$gt-gsm} {
     float: none;
     margin-right: 7%;
     margin-left: 300px;
@@ -73,25 +84,11 @@ article
     border-color: #eaeaea !important;
     margin-top: 50px;
     margin-bottom: 50px;
-  }
-  article.zen-mode {
-    margin-left: 7%;
-    transition: margin-left 0.5s ease-out 0.25s;
-  }
-}
 
-@media only screen and (min-width: 768px) {
-    section > p:first-of-type {
-        margin-top: 2.5%;
-        margin-bottom: 2.5%;
-        padding-left: 6%;
-        color: #944040;
+    &.zen-mode {
+      margin-left: 7%;
+      transition: margin-left 0.5s ease-out 0.25s;
     }
+  }
 }
 
-.miniature
-{
-    float:left;
-    width:100px;
-    height:100px;
-}
diff --git a/design/rainbow.css b/src/css/_rainbow.scss
index 905eb8e..905eb8e 100644
--- a/design/rainbow.css
+++ b/src/css/_rainbow.scss
diff --git a/design/sommaire.css b/src/css/_sommaire.scss
index 8fe78b7..c4e002a 100755
--- a/design/sommaire.css
+++ b/src/css/_sommaire.scss
@@ -1,17 +1,12 @@
-#sommaire
-{
-     height: 40px; 
-     width: auto;
-    text-align: center;
-}
-@media only screen and (min-width: 768px) {
-  #sommaire {
+#sommaire {
+  height: 40px; 
+  width: auto;
+  text-align: center;
+  @media #{$gt-gsm} {
     padding-left: 290px;
   }
-
 }
-.sommaire_blien
-{
+.sommaire_blien {
    display: inline-block;
    width: 33%;
    text-align: left;
@@ -20,36 +15,42 @@
    font-weight: bold;
    font-family:  monospace, serif;
    text-shadow: 0 1px 0 #DDD;
-    color: #888888;
-}
-.sommaire_blien:before {
-  content: "/";
-}
-.sommaire_blien a
-{
-    color: #888888;
-    outline: none;
-    text-decoration: none;
-}
-.sommaire_blien a:hover
-{
-    color: #BBAABB;
+   color: #888888;
+   &:before {
+     content: "/";
+   }
+   a {
+     color: #888888;
+     outline: none;
+     text-decoration: none;
+   }
+   a:hover {
+     color: #BBAABB;
+   }
 }
 
-  #side-bar{
-    text-align:center;
+#side-bar {
+  text-align:center;
+  display: block;
+  width:100%;
+  height:auto;
+  text-rendering: optimizelegibility;
+  box-sizing: border-box;
+  background:#F5F6F5;
+  padding-top: 10px;
+
+  h1 {
+    font-family:  monospace, "Helvetica Neue", Arial, sans-serif;
+    /*font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+     */
+  }
+  svg { 
+    margin: 0 auto;
     display: block;
-    /*background: none repeat scroll 0% 0% #F5F6F5;*/
-    width:100%;
-    height:auto;
-    text-rendering: optimizelegibility;
-    box-sizing: border-box;
-    background:#F5F6F5;
-    padding-top: 10px;
   }
 
-@media screen and (min-width: 768px) {
-  #side-bar {
+
+  @media #{$gt-gsm} {
     position: fixed;
     top: 0px;
     bottom: 0px;
@@ -61,17 +62,13 @@
     /*background: none repeat scroll 0% 0% #F5F6F5;*/
     background:#FFF;
     border-right: 3px solid rgba(51, 51, 51, 0.1);
-  }
-  #side-bar.hidden {
-    left: -290px;
-    transition: left 0.5s ease-out 0.15s;
+
+    &.hidden {
+      left: -290px;
+      transition: left 0.5s ease-out 0.15s;
+    }
   }
 }
-#side-bar h1 {
-   font-family:  monospace, "Helvetica Neue", Arial, sans-serif;
-  /*font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-*/
-}
 #desc {
   font-size: 90%;
   margin-top: 15px;
@@ -79,7 +76,6 @@
 #about {
    font-size: 0.8em;
    color: #666;
-  
 }
 .about_bar {
    display: inline-block;
@@ -92,10 +88,6 @@
    text-shadow: 0 1px 0 #DDD;
    margin:auto;
 }
-.side-bar svg {  margin: 0 auto;
-  display:block;
-}
-
 /*
   <div id="sommaire">
      <div id="sommaire_blien">Accueil</div>
diff --git a/src/css/_style.scss b/src/css/_style.scss
new file mode 100644
index 0000000..196ad46
--- /dev/null
+++ b/src/css/_style.scss
@@ -0,0 +1,124 @@
+.directory {
+    cursor: pointer;
+    list-style-type: disc;
+}
+.file {
+  list-style: circle;
+  a {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+
+.qcm_item p {margin: 0; padding: 0; display:inline;}
+.qcm_check, .qcm_radio {padding-left: 32px;}
+
+blockquote {
+    color: #777;
+    padding: 1px 2%;
+    border-left: 5px solid #ccc;
+}
+
+.special-box {
+    background: #eee7da;
+    margin: 12.5px 12.5px;
+    padding: 10px 0 10px 95px; 
+    color: #424242;
+    min-height: 60px;
+}
+.special-box::before{
+    content: "";
+    display: block;
+    width: 48px;
+    height: 48px;
+    background-repeat: no-repeat;
+    margin: 0px 0 -48px -70px;
+}
+@mixin box($name, $bg) {
+  #{$name} {
+    background: $bg;
+    &::before {
+      background-image: url("/s/img/ic_" + $bg + "_black_48px.svg");
+    }
+  }
+}
+@include box('information', #daeaee);
+@include box('comment', #eea);
+@include box('attention', #eee7da);
+@include box('question', #e2daee);
+@include box('good', #aea);
+@include box('bad', #eaa);
+
+.secret {
+    background: #eee;
+    padding: 10px 0 10px 15px;
+    min-height: 20px;
+}
+.hiden_block_quote {
+    display: none;
+}
+.special-box-content {
+    margin-top: 5px;
+}
+kbd {
+    background-color: #f8f6ea;
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1px solid #e0dab6;
+    border-bottom-width: 3px;
+    text-shadow: 0 1px 0 #fff;
+    color: #5e551f;
+}
+.view {
+    position: relative;
+}
+.raw_button {
+  position: absolute;
+  top:10px;
+  right:0;
+
+  margin      : 0;
+  padding     : 0;
+  border      : 0;
+  background  : transparent;
+  font-family : inherit;
+  font-size   : 1em;
+  cursor      : pointer;
+  > div {
+    width       : 40px;
+    height      : 24px;
+    background  : #c0c0c0 url('image.png') no-repeat center center;
+    line-height : 24px;
+    border        : 1px solid rgba(27, 31, 35, 0.2);
+    border-radius : 3px;
+    font-size: 12px;
+
+    color: #24292e;
+    background-color: #eff3f6;
+    background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+  > div > div {
+    font-weight: bold;
+  }
+}
+.no-style {
+  text-decoration: none;
+}
+
+@mixin state($border, $border-c) {
+  border: 2px solid $border;
+  border-radius: 2px;
+  outline: none;
+  border-color: $border-c;
+  box-shadow: 0 0 5px $border-c;
+}
+.valid {
+  @include state(#c0392b, #9F9);
+}
+.invalid {
+  @include state(#c0392b, #f99);
+}
+.glowing {
+  @include state(#c0392b, #99F);
+}
diff --git a/src/css/design.scss b/src/css/design.scss
new file mode 100755
index 0000000..fc53bfb
--- /dev/null
+++ b/src/css/design.scss
@@ -0,0 +1,52 @@
+$gsm:     "screen and (max-width: 768px)";
+$tab:     "screen and (max-width: 1024px)";
+$gt-gsm:  "screen and (min-width: 768px)";
+
+@import 'contenu';
+@import 'sommaire';
+@import 'style';
+@import 'rainbow';
+
+body {
+  font-family: 'Noto Serif', Verdana, "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+  margin: 0px;
+  background: #f1f1f1;
+  line-height: 1.6;
+  color: #333333;
+  word-wrap: break-word;
+  font-size: 16px;
+}
+#body_c {
+  background-repeat:no-repeat;
+  background-position:top left;
+}
+.fl {
+  float: left;
+}
+ache {
+  margin-left: auto;
+  margin-right: auto;
+}
+img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+}
+table {
+  border-collapse: collapse;
+  padding: 7px 13px;
+}
+table, th, td {
+    border: 1px solid #dfe2e5;
+    padding: 7px 13px;
+}
+.suite {
+    color: #888888;
+    outline: none;
+    text-decoration: none;
+    font-size: 0.6em;
+    font-weight: bold;
+    font-family: monospace, serif;
+    text-shadow: 0 1px 0 #DDD;
+}
+
diff --git a/src/js/zen.js b/src/js/zen.js
new file mode 100644
index 0000000..4dca729
--- /dev/null
+++ b/src/js/zen.js
@@ -0,0 +1,27 @@
+'use strict';
+
+window.addEventListener('scroll', () => {
+  const articles = document.getElementsByTagName('article');
+  const header = document.getElementById('side-bar');
+
+  if (window.pageYOffset >= 500) {
+    if (header && !header.classList.contains('hidden')) {
+      console.log('Hide');
+      header.classList.add('hidden');
+
+      if (articles) {
+        [...articles].forEach(e => {
+          e.classList.add('zen-mode');
+        });
+      }
+    }
+  } else if (header && header.classList.contains('hidden')) {
+    console.log('Show');
+    header.classList.remove('hidden');
+    if (articles) {
+      [...articles].forEach(e => {
+        e.classList.remove('zen-mode');
+      });
+    }
+  }
+});