From 2fe1794ab1334fc094ed50394e1b9e0c17970109 Mon Sep 17 00:00:00 2001
From: Dorian <interact@dorian.systems>
Date: Mon, 18 Apr 2022 17:49:45 +0200
Subject: [PATCH] start flyer, favicon and meta title & descr

---
 __pycache__/pelicanconf.cpython-38.pyc        | Bin 1743 -> 1787 bytes
 content/calendar/calendar.yaml                |  17 +-
 content/flyer/flyer.md                        |  23 ++
 content/pages/footer.md                       |   7 +-
 content/pages/footer_es.md                    |   5 +-
 content/pages/footer_fr.md                    |   7 +-
 content/pages/footer_nl.md                    |   5 +-
 content/pages/index.md                        |   4 +-
 content/pages/index_es.md                     |   4 +-
 content/pages/index_fr.md                     |   4 +-
 content/pages/index_multilang.json            |  20 +-
 content/pages/index_nl.md                     |   4 +-
 content/projects/individual-walks_es.md       |   1 +
 content/projects/moonwalks.md                 |   4 +-
 content/projects/moonwalks_fr.md              |   4 +-
 content/projects/moonwalks_nl.md              |   5 +-
 pelicanconf.py                                |   9 +-
 plugins/html-comment-sections/__init__.py     |  36 +++
 .../__pycache__/__init__.cpython-38.pyc       | Bin 0 -> 1437 bytes
 plugins/quotes-section/__init__.py            |  29 --
 .../__pycache__/__init__.cpython-38.pyc       | Bin 1279 -> 0 bytes
 theme/static/css/article.css                  |   7 +
 theme/static/css/calendar.css                 |   8 +-
 theme/static/css/flyer.css                    | 214 ++++++++++++++
 theme/static/css/gallery.css                  |  10 +-
 theme/static/css/header.css                   |  81 +++---
 theme/static/css/icon.svg                     |  10 +
 theme/static/css/layout.css                   |   7 +-
 theme/static/css/main.css                     | 160 ++++++++---
 theme/static/js/moon-calendar.js              |   9 +-
 theme/static/js/moon-watch.js                 |   3 +-
 theme/static/js/tools/css-grid-drawing.js     | 261 ++++++++++++++++++
 theme/templates/alltypo.html                  |   8 +
 theme/templates/article.html                  |  20 +-
 theme/templates/base.html                     |  32 ++-
 theme/templates/flyer.html                    | 134 +++++++++
 theme/templates/gallery.html                  |   2 +
 theme/templates/index.html                    |  16 +-
 theme/templates/inline-svg/bouleau.svg        |  15 +
 theme/templates/partials/calendar.html        |   9 +-
 theme/templates/partials/moon-watch.html      |   3 +-
 theme/templates/partials/nav-menu.html        |  73 ++---
 42 files changed, 1044 insertions(+), 226 deletions(-)
 create mode 100644 content/flyer/flyer.md
 create mode 100644 plugins/html-comment-sections/__init__.py
 create mode 100644 plugins/html-comment-sections/__pycache__/__init__.cpython-38.pyc
 delete mode 100644 plugins/quotes-section/__init__.py
 delete mode 100644 plugins/quotes-section/__pycache__/__init__.cpython-38.pyc
 create mode 100644 theme/static/css/flyer.css
 create mode 100644 theme/static/css/icon.svg
 create mode 100644 theme/static/js/tools/css-grid-drawing.js
 create mode 100644 theme/templates/flyer.html
 create mode 100644 theme/templates/inline-svg/bouleau.svg

diff --git a/__pycache__/pelicanconf.cpython-38.pyc b/__pycache__/pelicanconf.cpython-38.pyc
index 6f24a8509387c619415a99fafea67f6371974f3b..72c1a36f4da517f678f9c3710b0cd9e5e564cbe5 100644
GIT binary patch
delta 343
zcmXv|%Syvg5baH3klIvjoAmui-=&o64+ysS+K7dyi$RgtNn>e~ND>jd@f%8ZBKQG<
zF1m5=2e|PY{0O`8R&Wky=FB;ZnNMjUMNcIu9AfppeQ~AAvuKWd&Dz=nZkQazaT5|4
z0~zC>U;>gTLkbm0BL^AAEMv|LK^~JPfdW%SOhF0LpkfBfn1u@FSW?A27BGoLESW1%
zLlx?5D`N$#CK+;A!}@ZX9CI2^{D?rdfr1ulHE$#AwXUsyym_Ub;SR>rh&7LqN3t&7
z=%(S(sW_b68!ioAxU(S4cNF>Bw<eu|V_AmncRXX@j~v?z_W5VhoPYBQSqt~O2YZ+O
z?#ZDxUkG*5-eNc0W&7EomVqOkqT`Nqo9^nqPLH)dJ#rlTPM?gupeIst9=KvlUM0dm
NID!Auq7b}_>Mvu}Sk(Xk

delta 298
zcmXX=%}&B#5aer1O$@~!+ESoE3lu_(`EDM(X}lUu2$#K8rZ$bWRVW9&_za{sL*gTN
z;0^SycVEN=FMb$zGPAR@$!34FPpv%GwC#c@l^tJw>x;6@J{AX~C#qnVbnKCVeKJv@
zDs-|SQBANe*nkl-vSA8sh6QS&N^Mx=phhn0)ImdRy0FoNi5A*nk$P~*6O)S$x*@xk
z(1W+>p(K+2QjQq)p^OScV=ym?r%n?8{dMM?2GhySW9fWlv1gXQN#iX)j<bimG&f|v
zQ@)?4Sui`C1(PgFlbqxiHdw7?ldbHc$6PKBO*gVW;<o`JpCg?{e!|cE%;y)Q%RE*&
VqkO3jD+>FEq{x3xRr4>^{RO~<O8fu-

diff --git a/content/calendar/calendar.yaml b/content/calendar/calendar.yaml
index 1f8acac..a9152a9 100644
--- a/content/calendar/calendar.yaml
+++ b/content/calendar/calendar.yaml
@@ -15,14 +15,13 @@
 
   calendar:
 
-    #Full moon walk on the 18.03.22
-    18-03-22:
-      start_time: "18:00"
+    #New Moon walk on the 30.04.22
+    30-04-22:
+      event_type: 
+        en: "Walk"
+        fr: "Ballade"
+        nl: "Wandelen"
+        es: "Paseos"
+      start_time: "20:00"
       start_location: "Drève du comte"
       start_location_link: "https://www.openstreetmap.org/way/14502214#map=17/50.79518/4.40096"
-
-    # New Moon walk on the 01.04.22
-    01-04-22:
-      start_time: "19:30"
-      start_location: "Drève du comte"
-      start_location_link: "https://www.openstreetmap.org/way/14502214#map=17/50.79518/4.40096"
\ No newline at end of file
diff --git a/content/flyer/flyer.md b/content/flyer/flyer.md
new file mode 100644
index 0000000..45adf2a
--- /dev/null
+++ b/content/flyer/flyer.md
@@ -0,0 +1,23 @@
+Title: flyer
+template: flyer
+status: hidden
+
+
+<!--[en]-->
+
+Walking when all the colours have disappeared from the forest is a special experience.
+You tune in to other senses. You discover silence, but you also notice movements and sounds that are absent during the day. <br/>
+Moreover, when you walk during the most intense and important moments of the lunar cycle, you can transform your intentions.
+That is what these walks invite you to do.
+
+<!--[fr]-->
+
+Se promener lorsque toutes les couleurs ont disparu de la forêt est une expérience particulière.
+Vous êtes à l'écoute d’autres sens. Vous découvrez le silence, mais vous remarquez aussi des mouvements et des sons qui sont absents pendant la journée. <br/>
+De plus, lorsque vous marchez pendant les moments les plus intenses et les plus importants du cycle lunaire, vous pouvez transformer vos intentions. C'est à cela que vous invitent ces marches.
+
+<!--[nl]-->
+
+Wandelen wanneer alle kleurtjes uit het bos verdwenen zijn, is een bijzondere ervaring.
+Je stelt in op andere zintuigen. Je ontdekt de stilte, maar je merkt ook bewegingen en geluiden op die overdag afwezig zijn. <br/>
+Wanneer je bovendien wandelt tijdens de meest intense en belangrijke momenten van de maancyclus, kan je je intenties transformeren. Dat is waartoe deze wandelingen je uitnodigen.
\ No newline at end of file
diff --git a/content/pages/footer.md b/content/pages/footer.md
index ddcbd7c..2b9cdac 100644
--- a/content/pages/footer.md
+++ b/content/pages/footer.md
@@ -1,11 +1,12 @@
 Title: Footer
 save_as:
 partial: true
+save_as: 
 
 
-The typography of this website varies slightly under the influence of the moon.
-The website color theme switch according if it's day time or night time in Brussels.
+The typography of this website varies slightly under the influence of the moon. <br/>
+The website color theme changes following day time or night time in Brussels.
 
 Font [Unoverso](https://github.com/oxomoto/Unoverso-Libre) by Oxomoto, and Inconsolata Variable by Raph Levien.
 All texts and images are published under de [CC4R license](https://constantvzw.org/wefts/cc4r.en.html), Anaïs Berck, 2022.
-Website design and development by Doriane Timmermans (OSP)
\ No newline at end of file
+Website design and development by Doriane Timmermans ([OSP](http://osp.kitchen/))
\ No newline at end of file
diff --git a/content/pages/footer_es.md b/content/pages/footer_es.md
index 331ca78..383657a 100644
--- a/content/pages/footer_es.md
+++ b/content/pages/footer_es.md
@@ -1,9 +1,10 @@
 Title: Footer
 lang: es
+save_as: 
 
-La tipografía de este sitio web varía ligeramente bajo la influencia de la luna.
+La tipografía de este sitio web varía ligeramente bajo la influencia de la luna.  <br/>
 El tema del sitio web cambia de color según sea de día o de noche en Bruselas.
 
 Fuente [Unoverso](https://github.com/oxomoto/Unoverso-Libre) de Oxomoto, e Inconsolata Variable de Raph Levien.
 Todos los textos e imágenes están publicados bajo licencia [CC4R](https://constantvzw.org/wefts/cc4r.en.html), Anaïs Berck, 2022.
-Diseño y desarrollo del sitio web por Doriane Timmermans (OSP).
\ No newline at end of file
+Diseño y desarrollo del sitio web por Doriane Timmermans ([OSP](http://osp.kitchen/)).
\ No newline at end of file
diff --git a/content/pages/footer_fr.md b/content/pages/footer_fr.md
index 4ac2faf..70fe409 100644
--- a/content/pages/footer_fr.md
+++ b/content/pages/footer_fr.md
@@ -1,9 +1,10 @@
 Title: Footer
 lang: fr
+save_as: 
 
-La typographie de ce site web varie légèrement sous l'influence de la lune.
-Le thème de couleurs de ce site web change selon qu'il fait jour ou nuit à Bruxelles.
+La typographie de ce site web varie légèrement sous l'influence de la lune. <br/>
+Le thème de couleurs de ce site web change selon s'il fait jour ou nuit à Bruxelles.
 
 Font [Unoverso](https://github.com/oxomoto/Unoverso-Libre) par Oxomoto, et Inconsolata Variable par Raph Levien.
 Tous les textes et images sont publiés sous [license CC4R](https://constantvzw.org/wefts/cc4r.en.html), Anaïs Berck, 2022.
-Conception et développement du site web par Doriane Timmermans (OSP).
\ No newline at end of file
+Conception et développement du site web par Doriane Timmermans ([OSP](http://osp.kitchen/)).
\ No newline at end of file
diff --git a/content/pages/footer_nl.md b/content/pages/footer_nl.md
index 37c67d4..d27a2f4 100644
--- a/content/pages/footer_nl.md
+++ b/content/pages/footer_nl.md
@@ -1,9 +1,10 @@
 Title: Footer
 lang: nl
+save_as: 
 
-De typografie van deze website varieert lichtjes onder invloed van de maan.
+De typografie van deze website varieert lichtjes onder invloed van de maan.  <br/>
 Het kleurenthema van de website verandert naargelang het in Brussel dag- of nachttijd is.
 
 Font [Unoverso](https://github.com/oxomoto/Unoverso-Libre) van Oxomoto, en Inconsolata Variable van Raph Levien.
 Alle teksten en beelden zijn gepubliceerd onder de [CC4R licentie](https://constantvzw.org/wefts/cc4r.en.html), Anaïs Berck, 2022.
-Website ontwerp en ontwikkeling door Doriane Timmermans (OSP).
\ No newline at end of file
+Website ontwerp en ontwikkeling door Doriane Timmermans ([OSP](http://osp.kitchen/)).
\ No newline at end of file
diff --git a/content/pages/index.md b/content/pages/index.md
index 12799f5..cae7186 100644
--- a/content/pages/index.md
+++ b/content/pages/index.md
@@ -3,6 +3,8 @@ save_as: index.html
 slug: index
 template: index
 
+<!--[intro]-->
+
 Walking when all the colours have disappeared from the forest is a special experience.
 You tune in to other senses.
 You discover silence, but you also notice movements and sounds that are absent during the day. Moreover, when you walk during the most intense and important moments of the lunar cycle, you can transform your intentions.
@@ -12,6 +14,6 @@ We will walk in silence, interspersed with some experiments to which An invites
 Each walk takes a maximum of 2 hours.
 We conclude with a cup of tea.
 
-<!--bio-->
+<!--[bio]-->
 
 The walks are an initiative of [Anaïs Berck](https://www.anaisberck.be), represented here by the thousands of trees of the Sonian forest and by artist, storyteller and nature guide An Mertens.
diff --git a/content/pages/index_es.md b/content/pages/index_es.md
index 493e1a4..67474eb 100644
--- a/content/pages/index_es.md
+++ b/content/pages/index_es.md
@@ -3,12 +3,14 @@ slug: index
 lang: es
 template: index
 
+<!--[intro]-->
+
 Caminar cuando todos los colores han desaparecido del bosque es una experiencia especial.
 Se sintoniza con otros sentidos. Descubres el silencio, pero también percibes movimientos y sonidos que son ausentes durante el día.
 Además, cuando caminas en los momentos más intensos e importantes del ciclo lunar, puedes transformar tus intenciones. A eso te invitan estos paseos.
 
 Caminaremos en silencio, intercalando algunos experimentos a los que An te invita. Cada paseo dura un máximo de 2 horas. Concluimos con un té.
 
-<!--bio-->
+<!--[bio]-->
 
 Los paseos son una iniciativa de [Anaïs Berck](https://www.anaisberck.be), representada aquí por los miles de árboles del Sonian Forest y por la artista, contadora y guía de la naturaleza An Mertens.
diff --git a/content/pages/index_fr.md b/content/pages/index_fr.md
index e03c787..b22c78f 100644
--- a/content/pages/index_fr.md
+++ b/content/pages/index_fr.md
@@ -3,12 +3,14 @@ slug: index
 lang: fr
 template: index
 
+<!--[intro]-->
+
 Se promener lorsque toutes les couleurs ont disparu de la forêt est une expérience particulière.
 Vous êtes à l'écoute d’autres sens. Vous découvrez le silence, mais vous remarquez aussi des mouvements et des sons qui sont absents pendant la journée.
 De plus, lorsque vous marchez pendant les moments les plus intenses et les plus importants du cycle lunaire, vous pouvez transformer vos intentions. C'est à cela que vous invitent ces marches.
 
 Nous marcherons en silence, entrecoupés de quelques expériences auxquelles An vous invite. Chaque promenade dure au maximum 2 heures. Nous terminons en partageant un thé.
 
-<!--bio-->
+<!--[bio]-->
 
 Les balades sont une initiative d'[Anaïs Berck](https://www.anaisberck.be), représentée ici par les milliers d'arbres de la forêt de Soignes et par l'artiste, conteuse et guide nature An Mertens.
diff --git a/content/pages/index_multilang.json b/content/pages/index_multilang.json
index a2bbcdf..2e4230b 100644
--- a/content/pages/index_multilang.json
+++ b/content/pages/index_multilang.json
@@ -48,22 +48,10 @@
         "es": "La caminata comienza a las"
     },
     "sunsetat":{
-        "en": "Sunset at",
-        "fr": "Coucher de soleil à",
-        "nl": "Zonsondergang om",
-        "es": "Puesta de sol a las"
-    },
-    "moonat":{
-        "en": "Moon event at",
-        "fr": "Événement lunaire à",
-        "nl": "Maangebeuren om",
-        "es": "Evento lunar a las"
-    },
-    "mailsubject":{
-        "en": "$ walk on the",
-        "fr": "Balade de $ le",
-        "nl": "$ wandeling op",
-        "es": "Paseo de $ el"
+        "en": "Sunset",
+        "fr": "Coucher de soleil",
+        "nl": "Zonsondergang",
+        "es": "Puesta de sol"
     },
     "more":{
         "en": "More to come",
diff --git a/content/pages/index_nl.md b/content/pages/index_nl.md
index 3e3b909..7a692ee 100644
--- a/content/pages/index_nl.md
+++ b/content/pages/index_nl.md
@@ -3,12 +3,14 @@ slug: index
 lang: nl
 template: index
 
+<!--[intro]-->
+
 Wandelen wanneer alle kleurtjes uit het bos verdwenen zijn, is een bijzondere ervaring.
 Je stelt in op andere zintuigen. Je ontdekt de stilte, maar je merkt ook bewegingen en geluiden op die overdag afwezig zijn.
 Wanneer je bovendien wandelt tijdens de meest intense en belangrijke momenten van de maancyclus, kan je je intenties transformeren. Dat is waartoe deze wandelingen je uitnodigen.
 
 We wandelen in stilte, afgewisseld met enkele experimenten waartoe An je uitnodigt. Elke wandeling duurt maximum 2 uur. We sluiten af met een kopje thee.
 
-<!--bio-->
+<!--[bio]-->
 
 De wandelingen zijn een initiatief van [Anaïs Berck](https://www.anaisberck.be), hier vertegenwoordigd door de duizenden bomen van het Zoniënwoud en door kunstenaar, verteller en natuurgids An Mertens.
diff --git a/content/projects/individual-walks_es.md b/content/projects/individual-walks_es.md
index 8a515d0..f5a9b0d 100644
--- a/content/projects/individual-walks_es.md
+++ b/content/projects/individual-walks_es.md
@@ -9,3 +9,4 @@ Como guía, An ofrece varios métodos. Se basa en sus experiencias con el reiki,
 
 ## Biodiversidad
 Una ardilla susurrando en la copa de un haya, un arrendajo volando sobre tu cabeza, las ramas cargadas de frutos del saúco llamando tu atención... El bosque es un mundo de abundancia y cada elemento puede contribuir metafóricamente a la solución de tu problema, a corto o largo plazo.
+
diff --git a/content/projects/moonwalks.md b/content/projects/moonwalks.md
index 479f6f5..9fb3dca 100644
--- a/content/projects/moonwalks.md
+++ b/content/projects/moonwalks.md
@@ -1,5 +1,7 @@
 Title: Moonwalks
 
+<!--[main]-->
+
 ## New rituals
 Botanist and Native American Indian Robin Wall Kimmerer states in her book “Braiding Sweetgrass” that the core of the climate crisis is related to losing the connection with the land. By reconnecting, a form of recovery of the land and its people can take place, as well as a sustainable caring for. The connection can be made in various ways, for example by taking responsibility for a piece of land, be it as a vegetable garden, ornamental garden or forest. Her hypothesis is that a person's physical, emotional and spiritual health improves greatly when the relationship with the land is reinstated in his/her life. She urges the creation of new rituals that promote such relationships. The moon walks try to be such a new ritual.
 
@@ -12,8 +14,8 @@ These are just two of the authors who specifically point to the end of anthropoc
 ## Full and New Moonwalks
 These and other authors inspired me to organise - as a new ritual - new and full moon walks. I have been doing this since the spring of 2021. They are walks that combine elements from forest bathing, meditation and guided nature walks.
 
-<!--quotes-->
 
+<!--[quotes]-->
 
 > I enjoyed the mixture of different ingredients: biology, fiction, politics... I also liked the silence, and the intensity of the experience. The space, for example, seemed very vast to me (I know the place well, I know we didn't walk miles and yet it seemed long, dense: a journey). I also found it very nice to see/feel the night appearing, and to realise that I was not afraid. Because I was with you? Because the trees had given me a friendly welcome?
 >
diff --git a/content/projects/moonwalks_fr.md b/content/projects/moonwalks_fr.md
index e42b259..d866e16 100644
--- a/content/projects/moonwalks_fr.md
+++ b/content/projects/moonwalks_fr.md
@@ -2,6 +2,8 @@ Title: Balades lunaires
 slug: moonwalks
 lang: fr
 
+<!--[main]-->
+
 ## Nouveaux rituels
 La botaniste et amérindienne Robin Wall Kimmerer affirme dans son livre «Les herbes sacrées» que le noyau de la crise climatique est lié à la perte du lien avec la terre. En se reconnectant, une forme de récupération de la terre et de ses habitants peut avoir lieu, ainsi qu'une prise de soin durable. Le lien peut être établi de différentes manières, par exemple en prenant la responsabilité d'un terrain, qu'il s'agisse d'un potager, d'un jardin d'ornement ou d'une forêt. Son hypothèse est que la santé physique, émotionnelle et spirituelle d'une personne s'améliore considérablement lorsque la relation avec la terre est rétablie dans sa vie. Elle préconise la création de nouveaux rituels qui favorisent ces relations. Les balades lunaires essaient d’être un nouveau rituel.
 
@@ -14,8 +16,8 @@ Ce ne sont là que deux des auteurs qui soulignent spécifiquement la fin de l'a
 ## Balades de pleine et nouvelle lune
 Ces auteurs et d'autres m'ont inspiré l'idée d'organiser - comme un nouveau rituel - des promenades à la nouvelle et à la pleine lune. Je fais ceci depuis le printemps 2021. Ce sont des promenades à mi-chemin entre le bain de forêt, la méditation et les promenades guidées dans la nature.
 
-<!--quotes-->
 
+<!--[quotes]-->
 
 > J'ai aimé le mélange entre les différents éléments de la narration: entre biologie, fiction, politique... J'ai aussi beaucoup aimé le silence, et puis la densité de l'expérience. L'espace, par exemple, m'a semblé très dilaté (je connais bien l'endroit, je sais qu'on n'a pas marché pendant des kilomètres et pourtant ça m'a paru long, dense: un voyage). J'ai aussi beaucoup aimé voir/ sentir la nuit tomber, et me rendre compte que je n'avais pas peur. Parce que j'étais avec vous? Parce que les arbres m'avaient souhaité bienvenue avec bienveillance?
 >
diff --git a/content/projects/moonwalks_nl.md b/content/projects/moonwalks_nl.md
index 055d000..d0b8350 100644
--- a/content/projects/moonwalks_nl.md
+++ b/content/projects/moonwalks_nl.md
@@ -2,6 +2,9 @@ Title: Maanwandelingen
 slug: moonwalks
 lang: nl
 
+
+<!--[main]-->
+
 ## Nieuwe rituelen
 Botaniste en Native American Indian Robin Wall Kimmerer stelt in haar boek “Braiding Sweetgrass”, dat de kern van de klimaatcrisis te maken heeft met het verliezen van de verbinding met het land. Door de verbinding weer aan te gaan, kan er ook een vorm van herstel van het land en de mensen plaatsvinden en een duurzaam zorg-dragen-voor. De verbinding kan op verschillende manieren gemaakt worden, bijvoorbeeld door de verantwoordelijkheid te nemen voor een stuk grond, zij het als moestuin, siertuin of bos. Haar hypothese is dat zowel de fysieke, de emotionele als de spirituele gezondheid van een persoon sterk verbetert als de relatie met het land weer een plaats krijgt in zijn/haar leven. Ze dringt erop aan om nieuwe rituelen in het leven te roepen, die die relaties bevorderen. De maanwandelingen proberen om zo’n nieuw ritueel te zijn.
 
@@ -14,8 +17,8 @@ Dit zijn maar twee van de auteurs die specifiek wijzen op het einde van het antr
 ## Volle en Nieuwe Maanwandelingen
 Deze en andere auteurs inspireerden me om – als een nieuw ritueel - nieuwe en volle maanwandelingen te organiseren. Ik doe dit sinds de lente van 2021. Het zijn wandelingen die het midden houden tussen bosbaden, meditatie en geleide natuurwandelingen.
 
-<!--quotes-->
 
+<!--[quotes]-->
 
 > Ik heb genoten van de mix van verschillende ingrediënten: biologie, fictie, politiek... Ik hield ook van de stilte, en de intensiteit van de ervaring. De ruimte, bijvoorbeeld, leek mij heel uitgestrekt (ik ken de plaats goed, ik weet dat wij geen kilometers hebben gelopen en toch leek het lang, intens: een reis). Ik vond het ook heel fijn om de nacht te zien/voelen verschijnen, en te beseffen dat ik niet bang was. Omdat ik bij jou was? Omdat de bomen me vriendelijk welkom hadden geheten?
 >
diff --git a/pelicanconf.py b/pelicanconf.py
index d500f61..8b18c11 100644
--- a/pelicanconf.py
+++ b/pelicanconf.py
@@ -2,7 +2,7 @@
 # -*- coding: utf-8 -*- #
 
 AUTHOR = 'Anaïs Berck'
-SITENAME = 'Moonwalks.be'
+SITENAME = 'moonwalks.be'
 SITEURL = ''
 
 PATH = 'content'
@@ -60,6 +60,7 @@ ARTICLE_LANG_SAVE_AS = '{category}/{slug}_{lang}.html'
 ARTICLE_LANG_URL = '/{category}/{slug}_{lang}.html'
 
 # pages have no category
+PAGE_PATHS = ['pages/', 'flyer/'] 
 PAGE_SAVE_AS = '{slug}.html'
 PAGE_URL = '/{slug}.html'
 PAGE_LANG_SAVE_AS = '{slug}_{lang}.html'
@@ -77,7 +78,7 @@ TAG_SAVE_AS = ''
 # DIRECT_TEMPLATES = ['index', 'authors', 'categories', 'tags', 'archives']
 # because gallery and even index is a page
 # (this allow to have translation for index_fr, index_nl, etc)
-DIRECT_TEMPLATES = ['alltypo']
+DIRECT_TEMPLATES = []
 
 # to copy every image to the output direction
 STATIC_PATHS = ['gallery']
@@ -90,7 +91,7 @@ MENUITEMS = [
 # TRANSLATION
 # ==============================================================================
 
-# only article with this lang will be listed
+# only article in this lang will be listed by default
 DEFAULT_LANG = 'en'
 # two article with same slug are considered as translation:
 # ARTICLE_TRANSLATION_ID = 'slug'
@@ -114,7 +115,7 @@ DEFAULT_DATE = 'fs'
 
 PLUGIN_PATHS = ['plugins']
 
-PLUGINS = ['quotes-section', 'data_files', 'gallery','image_process','multilang-json-page']
+PLUGINS = ['html-comment-sections', 'data_files', 'gallery','image_process','multilang-json-page']
 
 # --- quotes-sections (self made)
 # separate an article when meeting <!--quotes-->
diff --git a/plugins/html-comment-sections/__init__.py b/plugins/html-comment-sections/__init__.py
new file mode 100644
index 0000000..a6dc9e2
--- /dev/null
+++ b/plugins/html-comment-sections/__init__.py
@@ -0,0 +1,36 @@
+from readline import set_completion_display_matches_hook
+from pelican import signals
+import re
+
+
+def split_sections(generator, content):
+    """
+    Split the markdown content of an article or page into sections
+    everytime it encounter a comment of the form <!--[section-name]--> 
+    and put those in a new `sections` attribute as a dictonnary.
+
+    The `content` attribute is left intact.
+    """
+
+    html_content = content.content
+    content.sections = {}
+
+    pattern = re.compile(r"<!--\[((?:(?!\]-->).)*)\]-->((?:(?!<!--\[)[\s\S])+)")
+
+    # find all matches to groups
+    matches = pattern.finditer(html_content)
+
+    for match in matches:
+        # section name
+        section_name = match.group(1)
+        section_content = match.group(2)
+        content.sections[section_name] = section_content
+
+    if content.sections:
+        sections_names = ", ".join([section_name for section_name in content.sections.keys()])
+        print("Sections in {t}: {s}".format(t=content.title, s=sections_names))
+
+
+def register():
+    signals.article_generator_write_article.connect(split_sections)
+    signals.page_generator_write_page.connect(split_sections)
diff --git a/plugins/html-comment-sections/__pycache__/__init__.cpython-38.pyc b/plugins/html-comment-sections/__pycache__/__init__.cpython-38.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..752e76ae4f0da60c6706eeaef275517120bd525c
GIT binary patch
literal 1437
zcmZuw&2A($5VreodWK||1406=z#BNES!M<aPOB)3w7C+H1}>9C9jEO~oOIj0wuez>
zdnBaY0~Zdw!R(P&@|9Cwfdiu4+YLcr$#%J_Tt8n`{jj?`La@%CoL>AKA@sX{++P7a
zzJ_hSf`cK3OH|=G#-0w!pbF<<ONV7Nk66Uw*JvKIgbm<MSU5vjdIvvIhTSKI+q_U!
zU2-dw%$YECNpJIt+Tx0v{7R`CP#YMrkhC<%h4<aBArLX_=djIBa5VTDZ2|#zj%~0F
z8GeH|VH0knCIBjGq9b&+w~3p08#B*IS}Fu;&<x-=ZjuA^;!{uQhDF<iLENvsUA!H<
zK}YD7x0u?L4X%g49W^OSe+gds+=r0YX#MAiz?#*iu*6<*Qc-=w)Jl><Nz0`r>XJ}N
zsJ5agIZ>L_bis*`RuRJs4}xh;@E^IpwW0!<C0rJ23I8>rV5q7(L*Buq(iJ&)JRYBP
z-^Y?x{A@fvB&{7P8L5{(7-hU4ups%0ocGSo3AI*>i>2j+8jvzkSS2OZx06w8;d}6M
z-i3c(TNqOEOY38&g`Kpz>o0vMrziXS&z|l-dwlBS$R^omSxa@?w<_7msX3jUWlyp@
z47I!Sm0bs)lfu9H<(VPu8Eo?|91GN-vvh+S{A=(cnxWs2PJo>SE|`4bcDk%`k3lPF
zk3UYP6=#A@nbLyF=@GSb`t9ty={HKr6)kVfbhTPds{S>(;M2NXE`&7GD_fQ04)bvj
z+BDCF6gJN%^{pEnl)_k0sSiK$VZz9u1O;fl2fYkR{in%6sS0S~Lm>JO>-T0|(S2!N
z+Ran)(rh3bY#lbo**k8~A@9=OjteyR?5Y+ecj={&Oh9Y6c%jv@cG0yG(nUA?*0{LV
zP#u@}CZX2FR@jnfLpNM-$u+e~>s^R;zT>lmIc!_h4Qgl!uB97vW9Z_R(5csb*u~MS
z&mZ)GwWynaVAp;?-GhIl;HzcchXV~0oCKqA6r{ljkMK^A;198W1d_sw?=Rm1&tV%c
zwFss$urRgQ(@{?|=#mT{XR-F`?&EI8^1pM<R~mrIJAR9-1oT^%?gKxE|Izi#dkOjA
z-)5C+zJMZfz30R7B}aG%YXWyRa3H0u6o9dBU;vbtqM))3Og{ux>$BDVf9nU8V#|^r
Q`dKg@_8qXEhUuff0MKWNvj6}9

literal 0
HcmV?d00001

diff --git a/plugins/quotes-section/__init__.py b/plugins/quotes-section/__init__.py
deleted file mode 100644
index 8cf1bfe..0000000
--- a/plugins/quotes-section/__init__.py
+++ /dev/null
@@ -1,29 +0,0 @@
-from pelican import signals
-
-def split_to_quotes_section(article):
-    article_sections = article._content.split('<!--quotes-->');
-    article._content = article_sections[0]
-    if len(article_sections) > 1:
-        article.quotes = article_sections[1]
-
-def split_to_bio_section(article):
-    article_sections = article._content.split('<!--bio-->');
-    article._content = article_sections[0]
-    if len(article_sections) > 1:
-        article.bio = article_sections[1]
-
-def article_add_quotes(article_generator):
-    for article in article_generator.articles:
-        split_to_quotes_section(article)
-        for translation in article.translations:
-            split_to_quotes_section(translation)
-
-def page_add_bio(page_generator):
-    for page in page_generator.pages:
-        split_to_bio_section(page)
-        for translation in page.translations:
-            split_to_bio_section(translation)
-
-def register():
-    signals.article_generator_finalized.connect(article_add_quotes)
-    signals.page_generator_finalized.connect(page_add_bio)
diff --git a/plugins/quotes-section/__pycache__/__init__.cpython-38.pyc b/plugins/quotes-section/__pycache__/__init__.cpython-38.pyc
deleted file mode 100644
index 2afe00d07847b64885750497d89b8b12833dd87d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1279
zcmb_cO-~y!5VdzVn<Z@cDpf)B&>mMJY>%ykP^EIFRZ%aIs+Eb|$guGS+Xxkf6a67@
z%wO`Qho1NgJ$1&rNt3Ea9C<vR9ox_Ejq|13?GR}1er}&ViwOCJlf@Rm<UMrr77Qnx
zmSjZxloB5B@CWG!JmM`FLmu-sj1f=x3XCn@;j1vlJUt~@_Yqc;jJmdwL&ZunpcrTx
zo)JR-0NuO+Ga={Xo^tv?Z|Q{cU>70<vB8AiQ664IdLN>pkA|GU{?W-z_waSEcX?G=
zVS2qIjr%{M$s(5&gGyPUtZSKZDXj}jp<G-iPXpIx+R8yG`WuZ?7%{N2Qf5jt()0Us
zJ`!BAoL5>hl^-+9@{gyV^6N@p9E_?;U9<9{7>iO4m^wHU`MA6qN@el}P_tiN6jDiB
z6bIw)?uExv*s7?LW``mZCILfeN;}YX3jWg*)<MF~WHn<;<H1>^p$dp@p^3rtLrBpG
z$1_ozRhYW%Iey5PfnR|y%iy~ZSptv8;2B=+eQ;3iWAgRYEw!Nb9n{u@o(B*~Zv%(~
z7`fcJj8W++J;_3sG&&hijZ3X&%9PAYmWBPznT$iBgl4wV8gaSRg}i@nvo%}8IBx`5
zhc(SzIy3<(^cF;(?k;)_wu9TW#%w5zMxykF5B1kDRLtSK2<LheGq4^PR7ia$f(8|y
z!?$I`7#TocYN&u`|0Ot<oYVWjh7Z6p_!0Om^pWivVXX0iy1f}gb6CYU32#~62=3bO
z!W29jPm$YMhW|HDBc6pT_{;ceO0*bCV};&>41@K7<*#>PJjvRw-MlRi#j9TPg^JXh
ZV&?yMJ{(p2suV}~Z(#7mG)Ut5_Xm$$6iomC

diff --git a/theme/static/css/article.css b/theme/static/css/article.css
index b290d3b..0198a3a 100644
--- a/theme/static/css/article.css
+++ b/theme/static/css/article.css
@@ -28,6 +28,13 @@ nav.nav-projects li.active::after{
   font-size: var(--fs-mono); */
 }
 
+a.margin-anchor{
+  --margin: calc(var(--lh) * 6);
+  display: block;
+  margin-top: calc(-1 * var(--margin));
+  height: var(--margin);
+}
+
 
 /* QUOTES
  ========================================================================== */
diff --git a/theme/static/css/calendar.css b/theme/static/css/calendar.css
index ee7e2f3..909bab9 100644
--- a/theme/static/css/calendar.css
+++ b/theme/static/css/calendar.css
@@ -29,7 +29,7 @@
   margin-bottom: calc(var(--lh) * 0.5);
 }
 #calendar-section .calendar-content{
-  padding-left: calc(var(--lh) * 1);
+  /* padding-left: calc(var(--lh) * 1); */
 }
 #calendar-section footer{
   padding-top: calc(var(--lh) * 0.5);
@@ -68,6 +68,7 @@
 }
 
 .cal-entry__description{
+  font-size: var(--fs-up);
   margin-top: calc(var(--lh) * 0.5);
 }
 .cal-entry__data{
@@ -104,7 +105,6 @@
 }
 .cal-entry__phase h2.phase-name {
   line-height: calc(var(--lh) * 1.5);
-  text-transform: capitalize;
   white-space: nowrap;
   width: 6em;
 }
@@ -166,12 +166,12 @@
 }
 @keyframes newmoon {
   0% { font-variation-settings: "SERI"0, "slnt"0; }
-  50% { font-variation-settings: "SERI"100, "slnt"0; color: var(--clr-back);}
+  50% { font-variation-settings: "SERI"100, "slnt"0; }
   100% { font-variation-settings: "SERI"0, "slnt"0; }
 }
 @keyframes fullmoon {
   0% { font-variation-settings: "SERI"100, "slnt"0; }
-  50% { font-variation-settings: "SERI"0, "slnt"0; color: var(--clr-back);}
+  50% { font-variation-settings: "SERI"0, "slnt"0; }
   100% { font-variation-settings: "SERI"100, "slnt"0; }
 }
 
diff --git a/theme/static/css/flyer.css b/theme/static/css/flyer.css
new file mode 100644
index 0000000..846b6d4
--- /dev/null
+++ b/theme/static/css/flyer.css
@@ -0,0 +1,214 @@
+
+
+/*  RESET
+    ===================================================== */
+body{
+    background: white;
+    color: black;
+}
+
+body > header{
+    display: none;
+}
+
+body > section.grid-display > .column-fixed{
+    display: none;
+}
+
+body > section.grid-display {
+	display: block;
+	padding: 0 !important;
+}
+
+.text-content{
+    max-width: none;
+}
+
+/*  VARIABLES
+    ===================================================== */
+
+:root{
+    /* big -> bigger but mono big stay the same */
+    --fs-big: 5rem;
+    --fs-mono-big: 2.4rem;
+
+    /* reduce a bit the lh for print */
+    --lh: 1.3rem;
+
+    /* 3 lang paysage */
+    --fs-big: 5rem;
+
+    /* 3 langs paysage */
+    --fs-main: 11pt;
+
+    /* 
+    notes:
+    - 12pt is a bit too much for main text
+    */
+
+    /* variable for flyer */
+    --margin: 1cm;
+    /* A5 */
+    --page-w: 210mm;
+    --page-h: 148mm;
+}
+
+
+/*  PRINT LAYOUT
+    ===================================================== */
+.page{
+    width: var(--page-w);
+    height: var(--page-h);
+
+    box-sizing: border-box;
+    
+    position: relative;
+    overflow: visible;
+    
+    /* https://developer.mozilla.org/en-US/docs/Web/CSS/break-after */
+    break-after: page;
+    page-break-inside: avoid;
+}
+
+.container{
+    position: relative;
+}
+.layer{
+    position: absolute;
+    inset: 0;
+}
+.page-rotate{
+    width: var(--page-h);
+    height: var(--page-w);
+    position: absolute;
+    top: 100%;
+    right: 0;
+    transform-origin: top right;
+    transform: rotate(90deg);
+}
+
+@media only screen {
+    body{
+        background-color: whitesmoke;
+    }
+    .page{
+        margin: 1cm auto;
+        outline: 1px yellowgreen solid;
+        background: white;
+    }
+}
+
+/*  COMPOSITION
+    ===================================================== */
+
+html{
+    font-size: var(--fs-main);
+}
+
+.flyer h2{
+    line-height: 1;
+
+    display: inline-block;
+}
+.flyer h2:nth-of-type(3){
+    margin-left: calc(var(--lh) * 2);
+}
+
+
+.recto__text{
+    padding: var(--margin);
+
+    display: grid;
+    grid-template-rows: 1fr min-content min-content;
+}
+.verso__text{
+    padding: var(--margin);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.recto__langs{
+    display: flex;
+    gap: var(--lh);
+}
+.recto__langs > *{
+    flex: 0 1 100%;
+    gap: var(--lh);
+}
+
+.recto__lang > p{
+    margin: 0;
+}
+
+footer{
+    margin: calc(var(--lh) * 1) 0 calc(var(--lh) * 0.5);
+    display: flex;
+    /* justify-content: space-between; */
+    align-items: baseline;
+
+    gap: calc(var(--lh) * 2);
+
+    /* 3 langs paysage */
+    margin: calc(var(--lh) * 0.5) 0 calc(var(--lh) * 0);
+}
+
+.verso footer{
+    color: white;
+}
+
+/*  GRID DRAWING
+    ===================================================== */
+  
+.grid-cell{
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+.element-wrapper{
+    position: absolute;
+    inset: 0;
+
+    transform-origin: center center;
+
+    width: 100%;
+    height: 100%;
+}
+
+/* added */
+
+.drawing-back{
+    background: 
+        radial-gradient(circle closest-side, white, white 50%, transparent calc(100% -  var(--margin))),
+        linear-gradient(to bottom, white, black);
+
+    /* background-blend-mode: difference; */
+}
+
+/* .drawing-cirlce{
+    background: linear-gradient(white, black);
+} */
+
+.drawing-grid{
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+
+    /* mix-blend-mode: difference; */
+}
+
+.leaf{
+    --s: 80%;
+    box-sizing: border-box;
+    width: var(--s);
+    height: var(--s);
+    border-radius: 0 100% 0 50% / 0 50% 0 100%;
+    background: black;
+
+    /* border: var(--border);
+    background: white; */
+}
\ No newline at end of file
diff --git a/theme/static/css/gallery.css b/theme/static/css/gallery.css
index c02fafb..766285d 100644
--- a/theme/static/css/gallery.css
+++ b/theme/static/css/gallery.css
@@ -3,12 +3,12 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr) );
   grid-auto-rows: 200px;
-
+  
   box-sizing: border-box;
   border: var(--border);
   height: calc(100vh - calc(5 * var(--lh)));
   overflow: auto;
-  background: var(--c-soft);
+  background: var(--clr-soft);
 }
 .gallery-section > .image{
   position: relative;
@@ -32,12 +32,6 @@
   pointer-events: none;
 }
 
-
-/* remove the watch on gallery mode */
-body.gallery aside.moon-watch{
-  display: none;
-}
-
 body.gallery > section.grid-display{
   grid-template-columns: 1fr;
 }
\ No newline at end of file
diff --git a/theme/static/css/header.css b/theme/static/css/header.css
index d2a1b6f..b170a9f 100644
--- a/theme/static/css/header.css
+++ b/theme/static/css/header.css
@@ -58,47 +58,47 @@ nav.lang-menu #lang__es{
 
 /* NAVIGATION
  ========================================================================== */
-nav.nav-menu ul{
+
+nav.nav-menu{
   height: calc(var(--lh) * 2);
 
   display: flex;
+  justify-content: space-between;
   align-items: stretch;
+
+  background: var(--clr-soft);
   border-top: var(--border);
   border-bottom: var(--border);
   border-color: var(--clr-header);
   box-sizing: border-box;
+}
 
-  /* theme 1 */
-  background: var(--clr-soft);
+ul.nav-menu__pages{
+  flex: 1 1 0;
+  display: flex;
+  align-items: stretch;
+}
+div.nav-menu__footer{
+  flex: 1 1 0;
+  display: flex;
+  align-items: stretch;
 
-  /* theme 2 */
-  /* border-top: var(--border);
-  background: var(--clr-text);
-  border-color: var(--clr-soft);
-  color: var(--clr-soft); */
+  /* square */
+  max-width: calc(var(--lh) * 2);
 }
-nav.nav-menu li{
+
+/* ----- MAIN NAV ----- */
+
+ul.nav-menu__pages li{
   flex: 1 0 0%;
   box-sizing: border-box;
   max-width: 16rem;
   position: relative;
   border-right: var(--border);
   border-color: var(--clr-header);
-
-  /* theme 1 */
-  /* background: var(--clr-back); */
-
-  /* theme 2 */
-  /* border-color: var(--clr-soft); */
-}
-nav.nav-menu li:first-child{
-  /* border-left: var(--border); */
-
-  /* theme 2 */
-  /* border-color: var(--clr-soft); */
+  overflow: hidden;
 }
-
-nav.nav-menu a{
+ul.nav-menu__pages a{
   color: currentColor;
   display: block;
   height: 100%;
@@ -113,15 +113,23 @@ nav.nav-menu a{
   text-decoration: none;
   transition: 300ms font-variation-settings;
   font-variation-settings: "SERI" 0, "slnt" 0;
+
+  padding: 0 0.5em;
 }
-nav.nav-menu a span{
+ul.nav-menu__pages a span{
   padding-top: 0.2em;
 }
-nav.nav-menu a:hover,
-nav.nav-menu li.active a{
-  font-variation-settings: "SERI" 100, "slnt" 0;
+ul.nav-menu__pages a span{
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+/* variations */
+
+ul.nav-menu__pages a:hover,
+ul.nav-menu__pages li.active a{
+  font-variation-settings: "SERI" 100, "slnt" 0;
+}
 nav.nav-menu li.active{
   background: white;
 }
@@ -131,6 +139,7 @@ nav.nav-menu li.active{
 }
 
 /* order */
+
 nav.nav-menu #nav__index{
   order: 1;
 }
@@ -139,12 +148,18 @@ nav.nav-menu #nav__projects{
 }
 nav.nav-menu #nav__gallery{
   order: 3;
+  margin-right: calc(-1 * var(--border-width));
 }
 
-/* breaking point */
-/* 16em * 3 * 1.25*/
-@media only screen and (max-width: 60em) {
-  nav.nav-menu li#nav__gallery{
-    border-right: none;
-  }
+
+/* ----- FOOTER LINK ----- */
+
+.open-footer{
+  /* border */
+  border-left: var(--border);
+  border-color: var(--clr-header);
+
+  /* square size */
+  flex: 1 0 0;
 }
+
diff --git a/theme/static/css/icon.svg b/theme/static/css/icon.svg
new file mode 100644
index 0000000..29f2ee1
--- /dev/null
+++ b/theme/static/css/icon.svg
@@ -0,0 +1,10 @@
+
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'>
+    <defs>
+        <linearGradient id='moon-light-gradient' x1="0" x2="0" y1="0" y2="1">
+            <stop stop-color='white' offset="0%"/>
+            <stop stop-color='rgba(255,255,255,0)' offset="75%"/>
+        </linearGradient>
+    </defs>
+    <circle cx='0' cy='0' r='50' fill='url("#moon-light-gradient")'/>
+</svg>
\ No newline at end of file
diff --git a/theme/static/css/layout.css b/theme/static/css/layout.css
index ac9f8f2..876acec 100644
--- a/theme/static/css/layout.css
+++ b/theme/static/css/layout.css
@@ -10,11 +10,13 @@ body > header{
 }
 body > section.grid-display{
   display: grid;
-  grid-template-columns: 40% 60%;
+  grid-template-columns: 1fr 60%;
+  padding: var(--lh) var(--lh) 0;
+  gap: 0 calc(var(--lh) * 2);
+  box-sizing: content-box;
   position: relative;
 }
 body > section.grid-display > *{
-  padding: var(--lh);
   box-sizing: border-box;
 }
 
@@ -43,7 +45,6 @@ body.all-typo > section.grid-display{
 
   body > section.grid-display{
     grid-template-columns: 1fr !important;
-    padding: var(--lh);
   }
   
   /* remove column containers */
diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index bb2dd28..aa3230e 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -29,24 +29,19 @@ body{
   /* slitghly brown forest light, low contrast */
   --clr-text: hsl(62, 6%, 24%);
   --clr-soft-text: rgba(0,0,0,0.25);
-  --clr-header: var(--clr-text);
-
-  /* day -- colored */
-  /* --clr-soft: hsl(60, 32%, 84%);
-  --clr-back: hsl(90, 32%, 86%); */
-
-  /* day -- grey green */
-  /* --clr-soft: hsl(54, 32%, 78%);
-  --clr-back: hsl(66, 18%, 82%); */
+  --clr-header: black;
 
   --clr-soft: hsl(54, 40%, 82%);
-  --clr-back: hsl(82, 16%, 84%);
-
-  /* --clr-soft: hsl(60, 32%, 78%);
-  --clr-back: hsl(48, 24%, 82%); */
+  /* hsl(34, 44%, 69%) */
+  --clr-back: hsl(82, 24%, 84%);
 
+  /* a bit more solarized */
+  --clr-soft: hsl(48, 46%, 82%);
+  --clr-back: hsl(72, 32%, 84%);
+  
   background: var(--clr-back);
   color: var(--clr-text);
+
   
   --border-width: 1px;
   --border: var(--border-width) solid var(--clr-text);
@@ -54,17 +49,14 @@ body{
 body.night{
 
   /* slitghly cyan moon reflection, low contrast */
-  --clr-text: hsl(160, 6%, 82%);
+  --clr-text: hsl(160, 6%, 86%);
   --clr-soft-text: rgba(255,255,255,0.35);
   --clr-header: hsl(320, 4%, 12%);
-
-  /* night -- colored */
-  /* --clr-soft: hsl(340, 4%, 30%);
-  --clr-back: hsl(240, 30%, 18%); */
+  --clr-header: black;
 
   /* night -- grey purple */
-  --clr-soft: hsl(350, 3%, 42%);
-  --clr-back: hsl(252, 15%, 22%);
+  --clr-soft: hsl(290, 10%, 38%);
+  --clr-back: hsl(252, 30%, 16%);
 
 }
 
@@ -72,14 +64,18 @@ body.night{
 a,
 a:visited{
   color: currentColor;
-  /* color: yellowgreen; */
-  /* text-decoration-thickness: var(--border-width); */
-  text-decoration-thickness: 1px;
+  text-decoration-thickness: var(--border-width);
 }
 :is(a, a:visited):hover{
   text-decoration: none;
 }
 
+hr{
+  border: none;
+  border: var(--border);
+  margin: var(--lh) 0;
+}
+
 /* selection */
 *::selection{
   background: white;
@@ -98,6 +94,23 @@ a:visited{
   opacity: 1;
 }
 
+h2.phase-name {
+  text-transform: capitalize;
+}
+
+.full-moon-fvs{
+  font-variation-settings: "SERI"100, "slnt"0; 
+}
+.full-moon-slanted-fvs{
+  font-variation-settings: "SERI"100, "slnt"-100; 
+}
+.new-moon-fvs{
+  font-variation-settings: "SERI"0, "slnt"0; 
+}
+.new-moon-slanted-fvs{
+  font-variation-settings: "SERI"0, "slnt"100; 
+}
+
 /* CONSTANT VERTICAL RYTHM
  =========================================================================== */
 
@@ -187,48 +200,111 @@ section.data-section::after{
   line-height: 1.25;
 }
 
-section > a:first-of-type{
-  display: block;
-  margin-top: -200px;
-  height: 200px;
+section.data-section::after{
+  color: white;
+}
+.night section.data-section::after{
+  color: var(--clr-header);
 }
 
 /* INTRO TEXT
  =========================================================================== */
 
 /* first sentence */
-#about-section .about-box > p:first-child{
+.about-box > p:first-child{
   font-size: var(--fs-up);
   margin-bottom: 0;
   line-height: 1.1;
 }
 
-#about-section .bio-box > p:first-child{
+.bio-box{
   margin-top: calc(var(--lh) * 1);
+
+  display: grid;
+  grid-template-columns: calc(var(--lh) * 4) 1fr;
+  gap: calc(var(--lh) * 0.5);
 }
 
+/* svg */
+.bio-box__leaves > svg{
+  fill: var(--clr-text);
+  stroke:none;
+  stroke-width:0;
+  fill-opacity:1;
+  stroke-miterlimit:4;
+  stroke-dasharray:none;
+}
+.bio-box__text{
+  border-left: var(--border);
+  padding-left: calc(var(--lh) * 0.5);
+}
+
+
 /* FOOTER
  =========================================================================== */
 
-body > footer{
+button{
+  /* reset buton style */
+  border: none;
+  background-color: transparent;
+  font-family: 'Inconsolata', monospace;
+  font-size: var(--fs-mono-big);
+  font-variation-settings: var(--fvs-mono-big);
+  color: currentColor;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  /* flex centering */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+dialog.footer{
   background: var(--clr-soft);
-  font-size: 0.625rem !important;
-  border-top: var(--border);
+  border: var(--border);
   border-color: var(--clr-header);
-  
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-body > footer > *{
   padding: var(--lh);
+  color: currentColor;
+}
+
+dialog.footer .close-footer{
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: calc(var(--lh) * 2);
+  width: calc(var(--lh) * 2);
+
+  border-left: var(--border);
+  border-bottom: var(--border);
+  border-color: var(--clr-header);
+}
+
+dialog.footer p:first-of-type{
+  margin-top: 0;
+  margin-right: calc(var(--lh) * 2);
+}
+dialog.footer p:last-of-type{
+  font-family: 'Inconsolata', monospace;
+  font-variation-settings: var(--fvs-mono);
+  font-size: var(--fs-mono);
+  line-height: 1.25;
+}
+
+dialog.footer::backdrop{
+  background: black;
+  opacity: 0.25;
+}
+.night dialog.footer::backdrop{
+  background: black;
+  opacity: 0.25;
 }
 
 @media only screen and (max-width: 920px) {
-  body > footer{
-    grid-template-columns: 1fr;
-  }
-  body > footer > p:not(:last-of-type){
-    padding-bottom: 0; 
+  dialog.footer{
+    padding: var(--lh) calc(var(--lh) / 2);
+    margin: auto calc(var(--lh) / 2);
   }
 }
 
diff --git a/theme/static/js/moon-calendar.js b/theme/static/js/moon-calendar.js
index 2f912fb..5a3caa2 100644
--- a/theme/static/js/moon-calendar.js
+++ b/theme/static/js/moon-calendar.js
@@ -125,19 +125,22 @@ function addDateToCalendar(date, moon){
   if (calendar[time_id]){
     let walk_entry = calendar[time_id];
 
+    // Event type
+    let event_type = walk_entry.event_type[window.current_local.substring(0,2)];
+
     // --- add the class
     $cal_entry.addClass("confirmed");
     $cal_entry.find(".reservation .not-confirmed").remove();
 
     // --- fill infos
+    $cal_entry.find(".event-type").html(event_type);
     $cal_entry.find(".start-time").html(walk_entry.start_time);
     $cal_entry.find(".start-location a").html(walk_entry.start_location);
     $cal_entry.find(".start-location a").attr("href", walk_entry.start_location_link);
 
     // --- mail subject
     // only added if event has an entry in yaml AND not a past event
-    let mail_subject = $cal_entry.find(".reservation a").attr("data-mail-subject");
-    mail_subject = mail_subject.replace("$", phase_name) + " " + formated_date['date'];
+    let mail_subject = [event_type, phase_name, formated_date['date']].join(", ");
     let uri = "mailto:" + contact_mail + "?subject=";
     uri += encodeURIComponent(mail_subject);
     $cal_entry.find(".reservation a").attr("href", uri);
@@ -333,7 +336,7 @@ function createCalendar(months_ahead){
 
   for (var i = 0; i < months_ahead; i++) {
 
-    let lang = window.current_local.substring(0,2)
+    let lang = window.current_local.substring(0,2);
 
     // config to send to the API
     let config_month = {
diff --git a/theme/static/js/moon-watch.js b/theme/static/js/moon-watch.js
index 21a4972..5360841 100644
--- a/theme/static/js/moon-watch.js
+++ b/theme/static/js/moon-watch.js
@@ -89,7 +89,8 @@ function updateCurrentMoonTypo(date){
   let moon = getMoonStateFromDate(date, lat, long);
 
   updateAxis($(".moon-phased-typo > p"), moon["phase"], false);
-  updateAxis($(".moon-phased-typo > *:not(p)"), moon["phase"], true);
+  updateAxis($(".moon-phased-typo > blockquote"), moon["phase"], false);
+  updateAxis($(".moon-phased-typo > h2"), moon["phase"], true);
   updateAxis($("#about-section .about-box p:first-child"), moon["phase"], true);
 }
 
diff --git a/theme/static/js/tools/css-grid-drawing.js b/theme/static/js/tools/css-grid-drawing.js
new file mode 100644
index 0000000..f6936c8
--- /dev/null
+++ b/theme/static/js/tools/css-grid-drawing.js
@@ -0,0 +1,261 @@
+
+class Grid{
+  constructor(id, cell_size, mode = "STRETCH"){
+
+    this.id = id;
+    this.$grid = $("#"+id);
+
+    if (Array.isArray(cell_size)){
+      this.cell_width = cell_size[0];
+      this.cell_height = cell_size[1];
+    } else{
+      this.cell_width = cell_size;
+      this.cell_height = cell_size;
+    }
+    this.columns = 0;
+    this.rows = 0;
+
+    const possible_mode = ["STRETCH", "FIXED", "SPACE"];
+    if(possible_mode.includes(mode)){
+      this.mode = mode;
+    }
+
+    // this.init_css();
+
+    this.elements = [];
+    this.distribute = function(i,j){
+      // default distribution if there is more than one element
+      let index = j;
+      let choose = (index+(i%this.elements.length))%this.elements.length;
+      return choose;
+    }
+
+    this.mouvements = [];
+
+  }
+
+  init_css(){
+    // get the new element because pagedjs changed it
+    this.$grid = $("#"+this.id);
+
+    // compute number of cell that can fit horizontaly and verticaly
+    this.columns = String(Math.floor(this.$grid.width() / this.cell_width));
+    this.rows = String(Math.floor(this.$grid.height() / this.cell_height));
+    console.log(this.$grid.width(), this.$grid.height());
+    console.log("col-row-size", this.columns, this.rows, "(" + this.cell_width + "px", this.cell_width + "px" + ")");
+
+    // init css grid
+    this.$grid.css("display", "grid");
+    if(this.mode == "STRETCH" || this.mode == "SPACE"){
+      this.$grid.css("grid-template-columns", "repeat("+ this.columns +", 1fr");
+      this.$grid.css("grid-template-rows", "repeat("+ this.rows +", 1fr");
+    } else{
+      this.$grid.css("grid-template-columns", "repeat("+ this.columns +", "+ this.cell_width + "px");
+      this.$grid.css("grid-template-rows", "repeat("+ this.rows +", "+ this.cell_height + "px");
+    }
+  }
+
+  addElement(element_template){
+    this.elements.push(element_template);
+  }
+
+  addMouvement(grid_mouvement){
+    this.mouvements.push(grid_mouvement);
+  }
+
+  draw(){
+    // fill all the grid with it's element
+
+    this.init_css();
+
+    for (var i = 0; i < this.rows; i++) {
+      for (var j = 0; j < this.columns; j++) {
+
+        // pick the element we are going to draw
+        let pick = this.distribute(i,j);
+        let element_html = "";
+        if(pick >= 0){
+          element_html = this.elements[pick].html;
+        }
+
+        // a clone
+        let $el = $(element_html);
+
+        // wrapp it in a cell
+        let $cell = $("<div>").addClass("grid-cell");
+        let $wrapper = $("<div>").addClass("element-wrapper");
+        //so we can chain transform on it
+        // $wrapper.css("transform-origin", "center center");
+        // $wrapper.css("transform", "translate(-50%, -50%)");
+        if(this.mode == "SPACE"){
+          $wrapper.css("width", this.cell_width);
+          $wrapper.css("height", this.cell_height);
+        }
+        $cell.append($wrapper.append($el));
+
+        // iterate over all mouvement and apply them to the clone
+        this.mouvements.forEach( function(mvt){
+          mvt.apply($cell,i,j);
+        });
+
+        // get a clone with mouvement applied
+        // let $el = this.element_template.draw(i,j);
+
+
+        this.$grid.append($cell);
+      }
+    }
+  }
+
+}
+
+class GridElement{
+  // a template of grid element to clone into the grid
+  constructor(id){
+
+    //get html content string
+    // let content = $("#"+id).html();
+
+    // wrapp it in a cell
+    // let $cell = $("<div>").addClass("grid-cell");
+    // let $wrapper = $("<div>").addClass("element-wrapper");
+    // $cell.append($wrapper.append(content));
+    //
+    // this.html = $("<div>").append($cell).html().trim();
+
+    this.html = $("#"+id).html();
+
+    // this.mouvements = [];
+  }
+
+  // addMouvement(grid_mouvement){
+  //   this.mouvements.push(grid_mouvement);
+  // }
+
+  // draw(i, j){
+  //   // return the DOM element according to it's template and an i,j parameter
+  //
+  //   // a clone
+  //   let $new_el = $(this.html);
+  //
+  //   // iterate over all mouvement and apply them to the clone
+  //   this.mouvements.forEach( function(mvt){
+  //     mvt.apply($new_el,i,j);
+  //   });
+  //
+  //   return $new_el;
+  // }
+}
+
+class GridMouvement{
+
+  constructor(css_property, eval_function, selector=".element-wrapper"){
+    this.selector = selector;
+    this.property = css_property;
+    this.evaluate = eval_function;
+  }
+
+  apply($element, i, j){
+    // apply the mouvement to an element according to it's i, j position
+    // on the grid
+    let $search = $("<div>").append($element);
+    let $affected_by_mvt = $search.find(this.selector);
+    let css = this.evaluate(i,j);
+    if(this.property == "transform"){
+      let current_transform = $affected_by_mvt.css("transform");
+      css = current_transform + " " + css;
+    }
+    $affected_by_mvt.css(this.property, css);
+  }
+
+}
+
+
+// default mouvements
+
+function map_range(value, in_min, in_max, out_min, out_max) {
+  return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+}
+
+const sym2HH = new GridMouvement("transform", function(i,j){
+  let scaleY = 1;
+  if(j%2==1){ scaleY = -1; }
+  let transform = "scaleY("+scaleY+")";
+  return transform;
+});
+const sym2VV = new GridMouvement("transform", function(i,j){
+  let scaleX = 1;
+  if(i%2==1){ scaleX = -1; }
+  let transform = "scaleX("+scaleX+")";
+  return transform;
+});
+const sym4 = new GridMouvement("transform", function(i,j){
+  let scaleX = 1;
+  let scaleY = 1;
+  if(i%2==1){ scaleX = -1; }
+  if(j%2==1){ scaleY = -1; }
+  let transform = "scaleX("+scaleX+") scaleY("+scaleY+")";
+  return transform;
+});
+const sym4alt = new GridMouvement("transform", function(i,j){
+  let scaleX = 1;
+  let scaleY = 1;
+  if(i%2==1){ scaleY = -1; }
+  if(j%2==1){ scaleX = -1; }
+  let transform = "scaleX("+scaleX+") scaleY("+scaleY+")";
+  return transform;
+});
+
+const line_shift = new GridMouvement("transform", function(i,j){
+  let translate = "";
+  if(i%2==1){
+    translate = "translateX(-25%)";
+  }
+  if(i%2==0){
+    translate = "translateX(+25%)";
+  }
+  return translate;
+});
+
+
+const shrink = new GridMouvement("transform", function(i,j){
+  let factor = j/(mygrid.columns);
+  return "scale("+factor+")";
+});
+
+
+const rotation = new GridMouvement("transform", function(i,j){
+  let angle = String((j/(mygrid.columns-1))*360)+"deg";
+  let rotate = "rotate("+angle+")";
+  return rotate;
+});
+
+const random_rot = new GridMouvement("transform", function(i,j){
+  let angle = Math.random()*360;
+  let rotate = "rotate("+angle+"deg)";
+  return rotate;
+});
+
+
+const random_color = new GridMouvement("background", function(i,j){
+  let hue = map_range(Math.random(),0,1,30,100);
+  let color = "hsl("+hue+",70%,50%)";
+  return color;
+}, ".leaves");
+
+
+const scattered = new GridMouvement("transform", function(i,j){
+  let maxdecal = 120;
+  let decalx = (Math.random()*maxdecal) - (maxdecal/2);
+  let decaly = (Math.random()*maxdecal) - (maxdecal/2);
+  let transform = "translate("+decalx+"%, "+decaly+"%)";
+  return transform;
+});
+
+
+const diagonal_fontsize = new GridMouvement("font-size", function(i,j){
+  let x = j/(mygrid.columns-1);
+  let y = i/(mygrid.rows-1);
+  let fontsize = Math.max(Math.abs(x-y) * 10, 1);
+  return fontsize+"em";
+});
\ No newline at end of file
diff --git a/theme/templates/alltypo.html b/theme/templates/alltypo.html
index 9a192f7..c62dda4 100644
--- a/theme/templates/alltypo.html
+++ b/theme/templates/alltypo.html
@@ -7,3 +7,11 @@
         
     </div>
 {% endblock %}
+
+{% block js_body %}
+    {{super()}}
+
+    <script>
+        printAllMoonphases();
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/theme/templates/article.html b/theme/templates/article.html
index e01d5c8..cf4fb13 100644
--- a/theme/templates/article.html
+++ b/theme/templates/article.html
@@ -8,6 +8,8 @@
   <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/article.css" />
 {% endblock %}
 
+{% block title %}{{ super() }} &mdash; {{ multilang[article.category] }}{% endblock title %}
+
 {% block body_class %}{{ article.category }}{% endblock %}
 
 {% block fixed_content %}
@@ -20,7 +22,7 @@
 
 
 <section id="projects-section" class="data-section" data-box-title="{{ multilang.projects }}">
-    <a name="topp"></a>
+    <a name="top-art" class="margin-anchor"></a>
     <nav class="nav-projects mono">
       <ul>
         {# ---> list all the 'projects' article in the current language #}
@@ -28,13 +30,13 @@
           {% if art.category == 'projects' %}
             {% if current_lang == DEFAULT_LANG %}
               <li {% if art == article %} class="active" {% endif %}>
-                <a href="{{ art.url }}#topp">{{ art.title }}</a>
+                <a href="{{ art.url }}#top-art">{{ art.title }}</a>
               </li>
             {% else %}
               {% for translation in art.translations %}
                 {% if translation.lang == current_lang %}
                   <li {% if translation == article %} class="active" {% endif %}>
-                    <a href="{{ translation.url }}#topp" hreflang="{{ translation.lang }}">{{ translation.title }}</a>
+                    <a href="{{ translation.url }}#top-art" hreflang="{{ translation.lang }}">{{ translation.title }}</a>
                   </li>
                 {% endif %}
               {% endfor %}
@@ -47,14 +49,18 @@
 
   <section id="{{ article.title }}-section" class="data-section" data-box-title="{{ article.title }}">
     <div class="text-content moon-phased-typo">
-      {{ article.content }}
+      {% if article.sections["main"] %}
+        {{ article.sections["main"] }}
+      {% else %}
+        {{ article.content }}
+      {% endif %}
     </div>
   </section>
 
-  {% if article.quotes %}
+  {% if article.sections["quotes"] %}
     <section id="{{ article.title }}-quotes-section" class="data-section" data-box-title="{{ multilang.quotes }}">
-      <div class="text-content article-quotes">
-        {{ article.quotes }}
+      <div class="text-content article-quotes moon-phased-typo">
+        {{ article.sections["quotes"] }}
       </div>
     </section>
   {% endif %}
diff --git a/theme/templates/base.html b/theme/templates/base.html
index e15a8f6..de7e49e 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -3,11 +3,15 @@
 
 <head>
   {% block head %}
-  <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
+
   <meta charset="utf-8" />
   <meta name="generator" content="Pelican" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
+  <meta name="description" content="New Moon and Full Moon walks in the forest, an initiative by Anaïs Berck" />
+  <link rel="icon" href="{{ THEME_STATIC_DIR }}/css/icon.svg">
+
   <!-- CSS -->
   <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/reset.css" />
   <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/fonts.css" />
@@ -37,14 +41,17 @@
       {% endblock %}
     </div>
 
+    {% if (page and page.slug != 'gallery') or not page %}
     <div class="column-scroll">
       {% block scroll_content %}
       {% endblock %}
     </div>
+    {% endif %}
 
   </section>
 
-  <footer class="mono">
+  <dialog class="footer text-content">
+    <button class="close-footer">&times;</button>
     {% for p in pages %}
       {% if p.slug == "footer" %}
           {% if current_lang == DEFAULT_LANG %}
@@ -58,9 +65,23 @@
         {% endif %}
       {% endif %}
     {% endfor %}
-  </footer>
+  </dialog>
 
   {% block js_body %}
+
+    <script type="text/javascript">
+      const modal = document.querySelector("dialog.footer");
+      const open_btn = document.querySelector("button.open-footer");
+      const close_btn = document.querySelector("button.close-footer");
+
+      open_btn.addEventListener('click', () => {
+        modal.showModal();
+      });
+      close_btn.addEventListener('click', () => {
+        modal.close();
+      });
+    </script>
+
     <script type="text/javascript">
       if(!window.walk_calendar){
         {# imported from the calendar.yaml using the data_files pelican plugin (see pelicanconf.py) #}
@@ -69,9 +90,8 @@
     </script>
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-utilities.js"></script>
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-watch.js"></script>
-    <!-- <script>
-      printAllMoonphases();
-    </script> -->
+
+
   {% endblock %}
 
 </body>
diff --git a/theme/templates/flyer.html b/theme/templates/flyer.html
new file mode 100644
index 0000000..c0cf10a
--- /dev/null
+++ b/theme/templates/flyer.html
@@ -0,0 +1,134 @@
+{% extends "base.html" %}
+
+{% block head %}
+    {{ super() }}
+    <link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/flyer.css" />
+
+    <!-- GRID DRAWING
+    ------------------------------------------------------------------- -->
+    <script src="{{ THEME_STATIC_DIR }}/js/tools/css-grid-drawing.js"></script>
+
+{% endblock %}
+
+{% block scroll_content %}
+
+    <article class="flyer">
+
+        <div class="page recto">
+            <div class="layer recto__text">
+                
+                <header>
+                    <h2 class="phase-name font-big new-moon-fvs">New moon&nbsp;</h2>
+                    <h2 class="font-big new-moon-slanted-fvs">walks</h2>
+    
+                    <h2 class="phase-name font-big full-moon-fvs">Full moon&nbsp;</h2>
+                    <h2 class="font-big full-moon-slanted-fvs">walks</h2>
+                </header>
+
+                <main class="text-content recto__langs">
+                    <div class="recto__lang">
+                        <p class="font-up">en</p>
+                        <div class="progressive-fvs">
+                            {{ page.sections["en"] }}
+                        </div>
+                    </div>
+                    <div class="recto__lang">
+                        <p class="font-up">fr</p>
+                        <div class="progressive-fvs">
+                            {{ page.sections["fr"] }}
+                        </div>
+                    </div>
+                    <div class="recto__lang">
+                        <p class="font-up">nl</p>
+                        <div class="progressive-fvs">
+                            {{ page.sections["nl"] }}
+                        </div>
+                    </div>
+                </main>
+
+                <footer>
+                    <a class="mono-big" href="http://moonwalks.be">moonwalks.be</a>
+                    <p class="mono">
+                        a project by Anaïs Berck
+                    </p>
+                </footer>
+
+            </div>
+        </div>
+
+        <div class="page verso">
+
+            <div class="page-rotate">
+
+                <div class="layer drawing-back">
+                </div>
+    
+                <div id="verso-drawing" class="layer drawing-grid">
+                </div>
+    
+                <div id="verso-drawing" class="layer verso__text">
+                    <footer class="mono-big">
+                        <a href="http://moonwalks.be">moonwalks.be</a>
+                        <p class="mono">
+                            an initiative by Anaïs Berck
+                        </p>
+                    </footer>
+                </div>
+
+            </div>
+
+        </div>
+        
+    </article>
+
+    <template id="leaf-element">
+        <div class="leaf">
+        </div>
+    </template>
+
+    <script>
+        // ___ GRID INIT ___
+        const CELL_SIZE = [80,80];
+        const GRID_ID = "verso-drawing";
+        mygrid = new Grid(GRID_ID, CELL_SIZE, "STRETCH");
+    
+        // ___ ELEMENT INIT ___
+        myelement = new GridElement("leaf-element");
+        mygrid.addElement(myelement);
+    
+        // ___ CUSTOM MOUVEMENT ___
+        mygrid.addMouvement(random_rot);
+        mygrid.addMouvement(scattered);
+    
+        mygrid.draw();
+    </script>
+{% endblock %}
+
+{% block js_body %}
+    {{ super() }}
+
+    <script>
+        let prog_fvs = document.getElementsByClassName("progressive-fvs");
+
+        for (let div of prog_fvs) {
+            // separate every words in the p as a span
+            let ps = div.getElementsByTagName("p");
+
+            for (let p of ps){
+                p.innerHTML = p.innerHTML.split(" ").map(x => "<span class='prog-fvs__span'>" + x + "</span>").join(" ");
+            }
+        }
+
+        for (let div of prog_fvs) {
+            let prog_spans = div.getElementsByClassName("prog-fvs__span");
+
+            let i = 0;
+            for (let prog_span of prog_spans){
+                let value = (i / (prog_spans.length - 1)) / 2;
+                console.log(value);
+                updateAxis($(prog_span), value, secondAxis=false);
+                i = i + 1;
+            }
+        }
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/theme/templates/gallery.html b/theme/templates/gallery.html
index bcc2aec..94405cb 100644
--- a/theme/templates/gallery.html
+++ b/theme/templates/gallery.html
@@ -8,6 +8,8 @@
   <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/gallery.css" />
 {% endblock %}
 
+{% block title %}{{ super() }} &mdash; {{page.title}}{% endblock title %}
+
 {% block body_class %}gallery{% endblock %}
 
 {% block fixed_content %}
diff --git a/theme/templates/index.html b/theme/templates/index.html
index f44a328..dd3aa2a 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -8,16 +8,26 @@
   <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/calendar.css" />
 {% endblock %}
 
+{% block title %}{{ super() }} &mdash; {{page.title}}{% endblock title %}
+
 {% block body_class %}calendar{% endblock %}
 
 {% block fixed_content %}
 
   <section id="about-section" class="data-section" data-box-title="{{ page.multilang.about }}">
     <div class="text-content moon-phased-typo about-box">
-      {{ page.content }}
+      {{ page.sections["intro"] }}
     </div>
-    <div class="text-content moon-phased-typo bio-box">
-      {{ page.bio }}
+    <div class="text-content bio-box">
+
+      <div class="bio-box__leaves">
+        {% include 'inline-svg/bouleau.svg' %}
+      </div>
+
+      <div class="bio-box__text moon-phased-typo">
+        {{ page.sections["bio"] }}
+      </div>
+
     </div>
   </section>
   
diff --git a/theme/templates/inline-svg/bouleau.svg b/theme/templates/inline-svg/bouleau.svg
new file mode 100644
index 0000000..cf39ff2
--- /dev/null
+++ b/theme/templates/inline-svg/bouleau.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 204.93944 223.47271"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6" />
+  <path
+     d="M 10.153746,157.79827 C 9.590144,156.21929 11.276777,154.65702 10.336035,153.10667 C 9.770326,152.28722 9.82357,149.8561 11.240548,150.75696 C 11.662041,151.71569 12.867435,150.84544 11.784221,150.38349 C 10.72645,149.06711 13.255724,149.14797 14.060321,148.84003 C 15.076394,149.28811 16.083893,149.84455 17.097711,150.4085 C 18.739873,150.3428 19.126795,152.19355 19.901718,153.26066 C 20.32762,154.97184 21.92893,155.67179 22.877792,156.89686 C 23.053553,158.32696 24.244358,158.65663 25.342424,159.06125 C 26.000201,160.31271 27.298844,160.48502 28.460678,161.00895 C 29.71526,161.99815 31.304398,162.09169 32.815867,162.3627 C 34.42346,162.87086 36.087572,162.36847 37.705659,162.1516 C 39.091089,161.80111 40.633075,161.78597 41.865063,161.02376 C 43.058586,160.0852 44.566826,160.0765 45.992022,159.88441 C 47.342193,159.26685 48.526993,160.97849 49.760543,160.04586 C 51.224273,159.35396 52.869323,159.02641 54.092133,157.85194 C 55.919673,156.59509 57.707283,155.1272 59.933503,154.65316 C 61.690273,154.27796 63.122063,153.21006 64.654703,152.37958 C 66.351003,152.00766 67.432203,150.68334 68.611803,149.53583 C 70.091263,147.94624 71.407463,146.03822 71.815353,143.86466 C 71.848903,142.29033 72.319543,140.79294 72.689773,139.27335 C 73.230243,134.87937 71.123743,130.72923 71.039853,126.36559 C 70.957203,124.67552 70.880993,122.96835 70.671233,121.3002 C 70.098673,119.91293 68.351123,120.12626 67.128323,120.0718 C 65.204943,119.99911 63.220223,119.95387 61.462133,119.05914 C 59.553863,118.12293 57.435513,117.76083 55.345013,117.55398 C 53.830393,116.96035 52.241563,116.72382 50.624203,116.91685 C 48.844293,116.93095 47.035721,116.98505 45.277949,116.71593 C 43.008221,115.92621 41.619093,113.82452 40.491704,111.83311 C 39.482613,110.1786 37.450271,109.57737 36.474477,107.903 C 35.278989,106.51416 35.213627,104.65814 34.707852,102.9869 C 33.994394,101.33972 32.680511,99.911808 32.497117,98.061033 C 33.738851,97.302682 34.012105,95.940123 32.918185,94.912964 C 32.194871,93.630049 31.632887,91.863258 32.886716,90.734827 C 33.512894,89.481925 32.356706,87.696051 34.159665,86.990752 C 35.515173,86.022072 37.049955,86.624418 38.389839,87.197802 C 40.411305,87.333043 39.299329,85.121915 39.390896,84.019544 C 40.763189,83.074868 39.824382,81.424471 39.572078,80.145317 C 39.46811,78.794448 41.14598,77.758704 40.285867,76.381191 C 39.659231,75.140159 40.20185,73.424993 41.670311,73.163809 C 43.088333,72.823553 44.078314,71.663086 45.332196,70.985936 C 46.310418,70.504237 47.101918,69.499879 48.210373,69.448408 C 49.543493,68.873969 49.240103,67.190428 49.453333,66.029044 C 49.259673,64.174514 52.130503,65.461546 51.526403,63.606837 C 51.272663,62.17815 50.628903,60.773519 50.702573,59.316389 C 51.050653,58.243185 53.159223,59.103328 52.434213,57.423507 C 52.094853,56.264175 51.625073,54.691153 52.551853,53.700628 C 53.414913,53.645916 54.687873,54.371977 54.626493,52.834117 C 55.488313,51.769474 56.756843,50.904968 57.961473,50.3496 C 59.056013,50.551264 59.848363,52.744891 60.966723,51.220102 C 62.088533,50.266685 62.955433,53.19436 64.125643,51.795169 C 64.614883,50.941975 63.990853,48.46224 65.595503,49.005479 C 67.715793,49.699534 66.026133,46.728489 67.296873,45.963219 C 68.218313,45.656553 69.247573,45.716282 69.380103,44.393526 C 69.770673,43.190928 70.297323,41.491517 71.715053,41.253366 C 72.999783,41.894308 71.910863,44.096991 73.388613,44.84074 C 74.701323,46.047925 75.797513,44.402282 75.556033,43.109101 C 75.683133,41.879916 77.987733,43.397021 77.265643,41.762013 C 77.263523,40.408931 79.378643,40.041019 78.881723,38.412326 C 78.714793,37.248896 80.045533,34.65289 81.091693,36.451321 C 81.432173,37.39726 82.454083,39.086197 83.566703,38.0388 C 83.652213,36.761214 84.441403,35.87756 85.411553,35.059973 C 86.360783,33.311701 85.969223,31.152129 86.924693,29.4145 C 88.200833,28.114679 88.854453,30.24288 89.672533,30.713746 C 90.961463,30.300511 90.533943,28.589863 91.617773,27.828743 C 92.187953,26.837571 92.065373,25.62607 92.404373,24.548258 C 92.702893,23.329489 93.165123,21.927013 94.344833,21.307169 C 95.428553,21.112807 95.881973,23.901422 96.837283,22.198436 C 97.589993,20.677625 97.520983,18.89751 98.178103,17.327487 C 98.279823,16.181961 99.668103,15.13954 100.26239,16.569625 C 101.50416,16.844923 100.96643,14.611339 101.88852,13.979992 C 102.79971,12.890774 102.02378,11.30027 102.88325,10.23343 C 104.46248,9.259432 104.26359,11.590156 104.2663,12.512241 C 104.63152,14.384788 104.9117,16.464991 103.86891,18.181219 C 103.75585,19.471965 106.01848,20.033088 104.89974,21.528747 C 104.61397,22.834426 102.87202,24.296187 103.38772,25.458789 C 104.4324,25.483836 105.56869,25.900965 104.94358,27.18054 C 104.83276,28.618324 103.68399,29.6546 103.38076,31.011548 C 103.25331,31.871213 102.79706,34.516216 104.25358,33.017448 C 105.79729,31.791846 105.73345,34.995683 105.54205,35.900982 C 105.22464,37.435617 104.73607,38.919889 104.43937,40.459219 C 104.52033,41.553173 105.56102,42.473218 104.75654,43.667999 C 104.00571,45.411537 106.5793,45.103249 107.07187,43.973396 C 108.6115,43.011148 108.20157,45.579914 107.75444,46.360309 C 107.44638,47.597831 106.99961,48.889885 107.03025,50.131135 C 108.09455,51.140094 107.54725,52.376606 107.0693,53.515573 C 106.856,55.617478 109.5622,54.3376 109.9623,53.113137 C 110.72408,51.540704 111.97488,52.995172 111.38236,54.167027 C 111.28853,55.619778 110.59335,57.118198 110.97556,58.547436 C 111.57619,59.119496 113.08428,58.905898 112.68449,60.269147 C 112.56344,61.570269 111.47151,62.698412 111.66124,64.020289 C 112.5949,64.366484 113.55017,65.192085 112.81099,66.392331 C 111.70472,68.089959 114.25091,68.411861 115.2345,67.544996 C 116.16481,67.186971 117.87609,64.635423 118.26778,66.618252 C 117.92412,68.02996 117.17845,69.318698 116.84104,70.733644 C 116.97785,71.884322 118.20676,72.867031 117.04267,74.030867 C 116.53692,74.994741 114.97779,76.502919 116.86819,76.965008 C 117.40788,78.250779 115.7026,79.248817 114.95219,80.120746 C 114.12717,80.70101 113.46969,82.206715 114.92841,82.272416 C 116.20298,83.429008 114.51587,84.802861 113.40673,85.202801 C 112.15371,85.745521 111.03134,86.863114 110.77051,88.236769 C 110.52615,89.693391 111.50094,90.972387 111.52055,92.378645 C 110.8277,93.664787 108.74784,94.377807 109.12605,96.209031 C 109.22619,97.697421 110.78101,98.62679 110.81429,100.15734 C 111.3349,100.80983 114.09114,100.27555 112.46165,101.20286 C 112.71657,101.74398 114.98718,101.41735 114.11989,102.89598 C 113.31465,103.76509 112.63177,104.83365 112.21294,105.92158 C 112.6908,107.13558 114.61405,106.69736 115.69366,106.85013 C 116.99326,106.39736 117.28049,107.73796 116.33665,108.46332 C 115.82791,109.72071 114.18137,110.72837 114.17034,111.99558 C 114.99067,112.23488 115.73043,112.90394 114.6907,113.51824 C 113.87085,113.97784 111.59301,114.83862 113.31607,115.69227 C 113.84878,117.47072 110.93737,117.734 109.7594,118.37392 C 108.36081,118.65954 109.4051,119.46152 110.12192,119.77247 C 109.95152,121.03647 108.21917,121.47667 107.11295,121.78048 C 106.49887,122.5715 105.1779,122.29125 104.58897,122.99858 C 105.47172,124.56122 103.34158,124.76791 102.36992,125.3132 C 101.05281,125.53267 99.809373,126.05535 98.531283,126.32526 C 97.080223,126.03467 95.615803,125.80923 94.125223,125.85329 C 92.431753,126.0148 90.898953,125.18823 89.240463,125.10767 C 87.763613,125.48594 86.288023,125.10678 84.823593,124.81691 C 83.119643,124.71777 81.713353,123.67137 80.371353,122.73471 C 78.938313,122.33372 77.468923,121.69001 76.066413,121.44162 C 74.981243,122.19437 75.673643,123.67465 75.681443,124.75382 C 76.285643,128.66056 78.087423,132.27015 78.643123,136.18899 C 78.880383,137.40061 80.193583,138.18349 79.734163,139.55936 C 79.740973,141.19211 79.968683,142.87776 79.415773,144.45345 C 79.241153,146.0551 79.161393,147.68132 79.268163,149.27942 C 79.053503,150.271 78.612503,152.38316 80.316873,151.5633 C 82.817283,150.94641 85.212903,149.9692 87.639393,149.11818 C 91.010333,147.68062 94.777273,146.75406 98.420313,147.65848 C 100.17993,148.01058 101.83135,148.73897 103.42963,149.51389 C 105.198,150.03185 104.79242,147.58703 105.62515,146.70226 C 107.02321,144.52449 109.09024,142.68394 109.74006,140.08483 C 110.11216,138.15493 110.45655,136.10506 111.77436,134.5651 C 112.37208,133.4484 113.29259,132.506 114.27676,131.74015 C 115.90049,131.54636 116.34898,130.11383 116.92478,128.83492 C 117.82825,127.66503 118.80927,126.62036 119.21787,125.15352 C 119.54041,123.56006 121.70175,124.36157 122.13053,122.8621 C 122.81822,121.64881 123.96873,120.86197 125.37794,121.19446 C 126.76907,120.68387 127.97887,119.54092 129.5438,119.61653 C 130.97074,119.58131 130.54122,120.87931 129.90701,121.53785 C 129.8115,123.11307 131.38661,122.3781 131.89461,121.54001 C 133.31417,120.57112 135.06646,118.74218 136.68507,120.34496 C 138.09498,119.90698 139.58315,119.57856 141.09285,119.56779 C 143.03328,119.67591 140.38722,122.2542 142.1289,122.41461 C 143.87305,122.50442 145.49911,121.70919 147.21378,121.56489 C 148.58257,121.31443 149.87395,122.53083 148.61022,123.61315 C 148.43927,124.95191 150.75056,123.70607 151.5619,124.15281 C 152.68974,124.40048 154.44179,124.5564 154.80674,125.84709 C 153.41122,127.25626 155.69649,127.47341 156.43981,128.23768 C 157.45214,129.26518 159.82265,128.27745 160.17268,129.79323 C 159.38997,130.858 157.76876,130.87213 156.77686,131.75903 C 156.25622,132.72867 155.43071,133.54035 155.20902,134.6266 C 155.93365,135.69323 157.75506,135.28755 158.49053,136.42195 C 158.41833,137.05735 157.20156,138.72654 158.92566,138.63642 C 160.14204,138.89964 161.33535,139.22313 162.55064,139.46216 C 163.75903,139.7056 165.86236,140.4903 164.24277,141.74783 C 165.21452,142.87504 167.37751,141.99893 168.5034,143.149 C 168.75597,143.6278 167.48754,144.55838 168.81429,144.69852 C 170.83297,146.13515 173.31939,146.67849 175.41144,147.96824 C 176.38369,149.30003 173.83451,148.95022 173.07515,149.31589 C 171.42393,149.34805 170.14759,150.59082 168.74548,151.32053 C 168.20273,152.11575 170.19888,153.55282 168.47559,153.74392 C 167.44254,155.38437 171.2115,155.0715 170.37722,156.84383 C 170.04371,158.29496 172.16129,158.04022 172.96263,158.78889 C 173.89376,159.2881 174.76248,159.91568 175.48656,160.68806 C 174.98761,161.23261 174.41807,161.96494 175.48578,162.19643 C 176.29787,163.40494 177.21539,164.51678 178.14578,165.5684 C 178.59709,166.88582 177.81064,168.34978 176.52574,168.82087 C 175.19697,169.15225 174.56673,170.56138 176.23441,170.94405 C 177.45661,171.58139 177.15437,172.83427 176.54312,173.7743 C 177.28412,174.48591 179.09952,175.13269 178.88062,176.3544 C 178.34326,177.87263 180.41433,178.61762 180.98001,179.83234 C 182.25684,180.41075 182.31757,182.62538 180.5701,182.06808 C 179.00476,181.37825 178.24208,183.07307 179.73768,183.84799 C 180.81036,184.56074 182.17701,185.16143 181.24382,186.65354 C 181.90942,188.18892 183.65844,189.318 184.65515,190.78199 C 186.02929,191.50318 185.38268,193.10765 183.94966,192.49735 C 182.10431,192.06604 183.57417,194.21515 184.14269,194.8574 C 184.53854,196.30949 185.97914,197.02853 186.63398,198.32212 C 187.76564,199.83053 188.32371,201.80765 189.89789,202.94175 C 191.15423,203.69461 192.57328,204.64263 192.11008,206.31321 C 192.73852,207.45804 194.2796,207.95762 194.83291,209.24664 C 195.48504,211.06915 192.96638,210.37904 192.07136,209.93828 C 190.87599,209.35835 189.56552,209.2224 188.35773,208.8332 C 187.20842,207.95712 186.17852,208.97929 184.943,208.77811 C 183.6974,209.20661 182.7269,208.24594 182.0817,207.30974 C 181.30062,206.29186 180.32463,205.16408 178.93079,205.14335 C 178.29342,205.00995 176.55347,203.18299 176.72136,204.54732 C 177.40389,206.69785 174.51626,206.0246 173.57488,205.15103 C 172.36187,204.58424 171.11735,203.26392 169.78428,204.27337 C 168.58236,204.64881 167.83832,202.54428 166.64714,203.24881 C 165.55955,204.40887 166.89193,205.71756 167.15261,206.85166 C 166.51572,208.30867 164.60858,206.83214 163.71599,206.29177 C 162.58485,204.98533 160.81944,205.72164 159.56706,204.79174 C 158.36204,203.80217 157.26016,206.0022 156.06972,204.58323 C 154.70412,203.51602 154.47344,205.48283 153.29179,205.79732 C 152.59834,207.11007 153.95728,208.81364 153.56869,210.08648 C 152.37066,209.58345 151.03648,210.99588 150.10731,209.57591 C 149.26364,208.58596 148.01524,208.04267 146.82343,207.59208 C 146.02362,207.49115 145.22858,208.68164 144.48917,207.52453 C 143.3826,206.9053 142.88939,205.04291 141.5429,205.08789 C 140.78195,206.90662 139.31564,205.34136 138.1708,205.03038 C 137.67795,205.87073 136.84981,206.12122 136.16303,206.45619 C 135.44066,207.62368 134.9221,209.15573 135.38255,210.50639 C 136.15516,211.51161 136.79835,213.1296 134.94857,213.32453 C 133.30724,213.89025 131.87331,212.72776 130.7562,211.66715 C 129.78562,210.76374 128.13001,210.39118 126.97364,211.15632 C 125.06605,211.3654 124.74223,208.52334 122.88984,208.53484 C 121.43501,208.9776 120.13883,208.34277 119.75467,206.83318 C 119.18433,206.04165 119.11712,203.71167 117.85289,204.16122 C 118.12695,205.75232 116.08505,205.97242 115.59666,204.60153 C 114.6274,203.81509 113.59066,202.5028 112.42558,202.32544 C 111.84156,203.04592 111.66894,204.35119 110.40338,203.85705 C 108.97297,204.44745 108.54745,206.22334 107.26854,207.06556 C 106.19661,208.11677 104.72862,207.55673 103.69706,206.78667 C 102.40537,206.06026 101.35847,204.93453 100.8294,203.54341 C 100.41208,202.03002 99.186083,201.16463 97.676683,201.2146 C 96.501173,200.15224 96.114213,198.47128 95.308293,197.1348 C 94.708963,195.85377 94.278593,194.5935 92.751493,194.59617 C 91.620243,194.11614 90.502403,193.49328 90.493043,192.09115 C 90.084493,189.20802 91.114583,186.37647 91.568683,183.55719 C 92.069493,179.74224 92.996283,175.98896 93.295343,172.1477 C 93.579903,169.63568 93.070273,166.79573 94.705363,164.64463 C 95.752343,163.12337 96.848783,161.36032 96.429233,159.42549 C 95.922083,157.60572 97.261523,156.32621 98.070043,154.93927 C 98.690873,152.89515 96.306133,151.99591 94.753733,151.61202 C 93.017253,150.89764 91.083743,150.65999 89.425463,151.73457 C 87.433363,152.3999 85.531903,153.33322 83.503093,153.88996 C 82.057783,154.22071 80.674063,154.80377 79.200863,155.02818 C 78.132543,155.91482 77.111373,157.02192 75.572083,156.84038 C 74.061833,157.16815 72.306063,156.44818 71.028503,157.49079 C 69.097843,158.68977 66.675833,159.21919 65.285633,161.15306 C 64.609843,162.53044 63.424353,163.32911 62.228133,164.2331 C 61.153673,165.08933 59.641773,165.1856 58.629843,166.18317 C 57.503203,167.02941 56.112903,167.38307 54.747363,167.56715 C 53.202793,168.60054 51.614533,169.43406 49.722183,169.26711 C 48.415403,169.91983 47.008033,170.19489 45.562709,170.31639 C 43.834033,170.47847 42.126417,170.86317 40.406018,171.02495 C 38.688128,170.66874 37.08583,171.23677 35.457239,171.58728 C 33.861695,171.45485 32.297035,170.89967 30.696772,171.38596 C 28.895325,171.55611 27.27895,170.44212 25.474988,170.39123 C 23.383952,170.32636 21.81875,168.84184 20.030579,167.97391 C 18.145222,167.1608 16.744311,165.59616 14.997966,164.56699 C 13.597216,163.41226 12.472537,161.9532 11.371083,160.52276 C 10.818046,159.69091 10.386839,158.77185 10.153746,157.79827 Z M 76.145083,156.56091 C 76.433383,156.29306 75.785003,156.52784 76.145083,156.56091 Z M 41.196688,161.18786 C 41.540995,160.62474 41.389155,161.60998 41.196688,161.18786 Z"
+     id="path1366" />
+</svg>
diff --git a/theme/templates/partials/calendar.html b/theme/templates/partials/calendar.html
index bc58266..7712fd0 100644
--- a/theme/templates/partials/calendar.html
+++ b/theme/templates/partials/calendar.html
@@ -7,7 +7,7 @@
 -->
 
 <header class="date-time-info mono">
-  {{ page.multilang.datetime }} <span></span>
+  {{ page.multilang.datetime }} <span class="timezone"></span>
 </header>
 
 <div class="calendar-content">
@@ -38,8 +38,7 @@
       <div class="cal-entry__reservation">
         <div class="reservation font-up">
 
-          <a class="signup" data-mail-subject="{{ page.multilang.mailsubject }}">
-            {# <span class="picto mono-big">&rarr;</span> #}
+          <a class="signup">
             {{ page.multilang.signup }}
           </a>
 
@@ -51,7 +50,7 @@
       </div>
 
       <div class="cal-entry__description">
-        {{ page.multilang.start }}
+        <span class="event-type"></span>,
         <time class="start-time" datetime=""></time>,
         <span class="start-location"><a target="_blank"></a></span>
       </div>
@@ -61,7 +60,7 @@
           {{ page.multilang.sunsetat }} <span class="sunset-time"></span>
         </div>
         <div>
-          {{ page.multilang.moonat }} <span class="moon-time"></span>
+          <span class="phase-name"></span> <span class="moon-time"></span>
         </div>
       </div>
 
diff --git a/theme/templates/partials/moon-watch.html b/theme/templates/partials/moon-watch.html
index dfc155a..1d50200 100644
--- a/theme/templates/partials/moon-watch.html
+++ b/theme/templates/partials/moon-watch.html
@@ -6,8 +6,7 @@
   </div> -->
 
   <div class="watch__phase">
-    <h2 class="phase-name"
-        title="The typography of this website varies slightly under the influence of the moon">
+    <h2 class="phase-name">
     </h2>
   </div>
 
diff --git a/theme/templates/partials/nav-menu.html b/theme/templates/partials/nav-menu.html
index 5777300..2ccdca4 100644
--- a/theme/templates/partials/nav-menu.html
+++ b/theme/templates/partials/nav-menu.html
@@ -47,42 +47,47 @@
 </div>
 
 <nav class="nav-menu">
-  <ul>
 
-    {% for cat, arts in categories %}
-      <li id="nav__{{ cat }}" {% if category and cat == category %} class="active" {% endif %}>
-        {% if current_lang == DEFAULT_LANG %}
-          {# take the last dated article #}
-          <a href="{{ arts[0].url }}"><span>{{ multilang[cat] }}</span></a>
-        {% else %}
-          {% for translation in arts[0].translations %}
-            {% if translation.lang == current_lang %}
-              <a href="{{ translation.url }}">
-                <span>{{ multilang[cat] }}</span>
-              </a>
-            {% endif %}
-          {% endfor %}
-        {% endif %}
-      </li>
-    {% endfor %}
+    <ul class="nav-menu__pages">
 
-    {% for p in pages %}
-      {% if not p.partial %}
-        <li id="nav__{{ p.slug }}" {% if page and p.slug == page.slug %} class="active"{% endif %}>
-        {% if current_lang == DEFAULT_LANG %}
-          <a href="{{ p.url }}"><span>{{ p.title }}</span></a>
-        {% else %}
-          {% for translation in p.translations %}
-            {% if translation.lang == current_lang %}
-              <a href="{{ translation.url }}">
-                <span>{{ translation.title }}</span>
-              </a>
-            {% endif %}
-          {% endfor %}
-        {% endif %}
+      {% for cat, arts in categories %}
+        <li id="nav__{{ cat }}" {% if category and cat == category %} class="active" {% endif %}>
+          {% if current_lang == DEFAULT_LANG %}
+            {# take the last dated article #}
+            <a href="{{ arts[0].url }}"><span>{{ multilang[cat] }}</span></a>
+          {% else %}
+            {% for translation in arts[0].translations %}
+              {% if translation.lang == current_lang %}
+                <a href="{{ translation.url }}">
+                  <span>{{ multilang[cat] }}</span>
+                </a>
+              {% endif %}
+            {% endfor %}
+          {% endif %}
         </li>
-      {% endif %}
-    {% endfor %}
-  </ul>
+      {% endfor %}
+
+      {% for p in pages %}
+        {% if not p.partial %}
+          <li id="nav__{{ p.slug }}" {% if page and p.slug == page.slug %} class="active"{% endif %}>
+          {% if current_lang == DEFAULT_LANG %}
+            <a href="{{ p.url }}"><span>{{ p.title }}</span></a>
+          {% else %}
+            {% for translation in p.translations %}
+              {% if translation.lang == current_lang %}
+                <a href="{{ translation.url }}">
+                  <span>{{ translation.title }}</span>
+                </a>
+              {% endif %}
+            {% endfor %}
+          {% endif %}
+          </li>
+        {% endif %}
+      {% endfor %}
+    </ul>
+
+    <div class="nav-menu__footer">
+      <button class="open-footer">?</button>
+    </div>
 
 </nav>