From 6fc080f92950f4d07062df7c70d03b8f483c1dfe Mon Sep 17 00:00:00 2001
From: Nicolas Doby <nicolas.doby@itsonus.fr>
Date: Mon, 17 Oct 2022 17:57:48 +0200
Subject: [PATCH] feat: work on style

---
 _includes/layouts/base.njk |  92 ++++++++++-------
 _includes/layouts/post.njk |  10 +-
 _includes/other_links.njk  |   7 ++
 _includes/tagslist.njk     |   7 ++
 eleventy.config.js         |   2 +-
 fr/404.md                  |   6 +-
 fr/about/index.md          |  11 --
 fr/all_articles.njk        |  11 ++
 fr/blog/exemple.md         |  51 ++++++++++
 fr/blog/exemple_2.md       |  50 +++++++++
 fr/blog/exemple_3.md       |  49 +++++++++
 fr/blog/fourthpost.md      |  15 ---
 fr/blog/new_post.md        |  42 --------
 fr/blog/nouveau_post.md    |  27 -----
 fr/blog/nouveau_post2.md   |  27 -----
 fr/blog/secondpost.md      |  18 ----
 fr/blog/thirdpost.md       |  27 -----
 fr/index.njk               |  19 ++--
 fr/tags-list.njk           |  12 ---
 fr/tags.njk                |   2 -
 i18n.js                    |   2 +-
 public/css/index.css       | 201 +++++++++++++++++++++++++++++--------
 22 files changed, 407 insertions(+), 281 deletions(-)
 create mode 100644 _includes/other_links.njk
 create mode 100644 _includes/tagslist.njk
 delete mode 100644 fr/about/index.md
 create mode 100644 fr/all_articles.njk
 create mode 100644 fr/blog/exemple.md
 create mode 100644 fr/blog/exemple_2.md
 create mode 100644 fr/blog/exemple_3.md
 delete mode 100644 fr/blog/fourthpost.md
 delete mode 100644 fr/blog/new_post.md
 delete mode 100644 fr/blog/nouveau_post.md
 delete mode 100644 fr/blog/nouveau_post2.md
 delete mode 100644 fr/blog/secondpost.md
 delete mode 100644 fr/blog/thirdpost.md
 delete mode 100644 fr/tags-list.njk
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index cf1778c..2b71c2e 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -1,50 +1,68 @@
 <!doctype html>
 <html lang="{{ lang or metadata.language }}">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title or metadata.title }}</title>
-    <meta name="description" content="{{ description or metadata.description }}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ title or metadata.title }}</title>
+  <meta name="description" content="{{ description or metadata.description }}">
 
-    {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
-    <meta name="generator" content="{{ eleventy.generator }}">
+  {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
+  <meta name="generator" content="{{ eleventy.generator }}">
 
-    <link rel="stylesheet" href="/css/prism-theme.css">
-    <link rel="stylesheet" href="/css/prism-diff.css">
-    <link rel="stylesheet" href="/css/index.css">
-    <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
-    <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
-    <link rel="icon" href="/img/favicon.svg">
+  <link rel="stylesheet" href="/css/prism-theme.css">
+  <link rel="stylesheet" href="/css/prism-diff.css">
+  <link rel="stylesheet" href="/css/index.css">
+  <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
+  <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
+  <link rel="icon" href="/img/favicon.svg">
 
-    {%- set alternateUrls = page.url | locale_links %}
-    {% if alternateUrls.length %}
+  {%- set alternateUrls = page.url | locale_links %}
+  {% if alternateUrls.length %}
     <link rel="alternate" hreflang="{{ lang or metadata.language }}" href="{{ page.url | htmlBaseUrl(metadata.url) }}">
     {%- for link in alternateUrls %}
-    <link rel="alternate" hreflang="{{ link.lang }}" href="{{ link.url | htmlBaseUrl(metadata.url) }}">
+      <link rel="alternate" hreflang="{{ link.lang }}" href="{{ link.url | htmlBaseUrl(metadata.url) }}">
     {%- endfor %}
-    {%- endif %}
-  </head>
-  <body>
-    <header class="main-header">
-      <div>
-        <a class="main-header-logo" href="/"><img src="/img/logo.svg" alt="{{ metadata.title }}" width="165" height="33">Blog</a>
-        {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
-        <nav class="main-menu">
-          <ul class="nav">
-            {%- for entry in collections.all | eleventyNavigation %}
-              <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url }}">{{ entry.title | i18n }}</a></li>
-            {%- endfor %}
-          </ul>
-        </nav>
-      </div>
-    </header>
+  {%- endif %}
+</head>
+<body class="container">
+  <header class="main-header">
+    <div>
+      <a class="main-header-logo" href="/"><img src="/img/logo.svg" alt="{{ metadata.title }}" width="165" height="33">Blog</a>
+      {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
+{#      <nav class="main-menu">#}
+{#        <ul class="nav">#}
+{#          {%- for entry in collections.all | eleventyNavigation %}#}
+{#            <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a#}
+{#                href="{{ entry.url }}">{{ entry.title | i18n }}</a></li>#}
+{#          {%- endfor %}#}
+{#        </ul>#}
+{#      </nav>#}
+    </div>
+  </header>
 
-    <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
+  <main>
+    <div class="main-content">
       {{ content | safe }}
-    </main>
+    </div>
+    <nav class="right-side">
+      {% include "tagslist.njk" %}
+      {% include "other_links.njk" %}
+    </nav>
+  </main>
 
-    <footer></footer>
+  <footer class="main-footer">
+    <div class="footer-contact">
+      <div>
+        <p class="footer-contact-title">IT's on us</p>
+        <p>Copyright © 2022</p>
+      </div>
+      <div><p><a rel="noopener" href="https://www.linkedin.com/company/itsonus" target="_blank"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Linkedin"><title>Accéder à la page LinkedIn de IT's on us</title><path d="M12.6041 20.6838H9.74213V12.0046H12.6041V20.6838ZM11.1716 10.8207C10.2566 10.8207 9.51416 10.1068 9.51416 9.245C9.51416 8.38317 10.2566 7.68384 11.1716 7.68384C12.0865 7.68384 12.8289 8.38317 12.8289 9.245C12.8289 10.1068 12.0865 10.8207 11.1716 10.8207ZM23.3155 20.6838H20.4597V16.4588C20.4597 15.4519 20.4382 14.1606 18.9718 14.1606C17.4838 14.1606 17.2559 15.2546 17.2559 16.3863V20.6838H14.397V12.0046H17.1419V13.1885H17.1819C17.5639 12.5066 18.4974 11.787 19.8898 11.787C22.7856 11.787 23.3186 13.5832 23.3186 15.9162V20.6838H23.3155Z" fill="white"></path><path d="M30.2071 16.1838C30.2071 8.1624 23.799 1.68384 15.9236 1.68384C8.04829 1.68384 1.64014 8.1624 1.64014 16.1838C1.64014 24.2053 8.04829 30.6838 15.9236 30.6838C23.799 30.6838 30.2071 24.2053 30.2071 16.1838Z" stroke="white" stroke-width="2"></path></svg></a></p></div>
+    </div>
+    <div class="footer-center">
+      Ceci est le blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.
+    </div>
+  </footer>
 
-{#    <!-- Current page: {{ page.url | htmlBaseUrl }} -->#}
-  </body>
+{#    <!-- Current page: {{ page.url | htmlBaseUrl }} --> #}
+</body>
 </html>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index b4049d7..bb17091 100644
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@@ -34,9 +34,11 @@ templateClass: tmpl-post
 {%- set previousPost = collections.posts | getPreviousCollectionItem %}
 {%- set nextPost = collections.posts | getNextCollectionItem %}
 {%- if nextPost or previousPost %}
-<ul>
-  {%- if previousPost %}<li>{{ "i18n.previous" | i18n }}: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
-  {%- if nextPost %}<li>{{ "i18n.next" | i18n }}: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
-</ul>
+  <nav class="post-nav">
+    <ul>
+      {%- if previousPost %}<li class="previous">{{ "i18n.previous" | i18n }}: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+      {%- if nextPost %}<li class="next">{{ "i18n.next" | i18n }}: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+    </ul>
+  </nav>
 {%- endif %}
 {%- endif %}
diff --git a/_includes/other_links.njk b/_includes/other_links.njk
new file mode 100644
index 0000000..8df82d4
--- /dev/null
+++ b/_includes/other_links.njk
@@ -0,0 +1,7 @@
+<div class="title">Autres liens</div>
+<ul class="links">
+  {%- for entry in collections.all | eleventyNavigation %}
+    <li><a
+        href="{{ entry.url }}">{{ entry.title | i18n }}</a></li>
+  {%- endfor %}
+</ul>
diff --git a/_includes/tagslist.njk b/_includes/tagslist.njk
new file mode 100644
index 0000000..07d813d
--- /dev/null
+++ b/_includes/tagslist.njk
@@ -0,0 +1,7 @@
+<div class="title">Catégories</div>
+<ul class="tags">
+  {% for tag in collections.all | getAllTags | filterTagList %}
+    {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+    <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a></li>
+  {% endfor %}
+</ul>
diff --git a/eleventy.config.js b/eleventy.config.js
index 28a142e..2105548 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -61,7 +61,7 @@ module.exports = function(eleventyConfig) {
     for(let item of collection) {
       (item.data.tags || []).forEach(tag => tagSet.add(tag));
     }
-    return Array.from(tagSet);
+    return Array.from(tagSet).sort();
   });
 
   eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
diff --git a/fr/404.md b/fr/404.md
index bbedc2e..9a37322 100644
--- a/fr/404.md
+++ b/fr/404.md
@@ -3,9 +3,11 @@ layout: layouts/home.njk
 permalink: 404.html
 eleventyExcludeFromCollections: true
 ---
-# Content not found.
+# Cette page n'existe pas !
 
-Go <a href="/">home</a>.
+Vous avez fait fausse route ¯\_(ツ)_/¯
+
+[Aller à la page d’accueil](/)
 
 {#
 Read more: https://www.11ty.dev/docs/quicktips/not-found/
diff --git a/fr/about/index.md b/fr/about/index.md
deleted file mode 100644
index a48155e..0000000
--- a/fr/about/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: layouts/base.njk
-title: À propos
-templateClass: tmpl-post
-eleventyNavigation:
-  key: nav.about
-  order: 3
----
-# {{ title }}
-
-Visitez notre site [IT's on us](https://www.itsonus.fr).
diff --git a/fr/all_articles.njk b/fr/all_articles.njk
new file mode 100644
index 0000000..e6f233d
--- /dev/null
+++ b/fr/all_articles.njk
@@ -0,0 +1,11 @@
+---
+layout: layouts/home.njk
+eleventyNavigation:
+  key: nav.all
+  order: 3
+---
+<ul class="post-list">
+  {%- for post in collections.posts | reverse %}
+    <li><a href="{{ post.url }}">{{ post.data.title }}</a><time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | htmlDateString }}</time></li>
+  {%- endfor %}
+</ul>
diff --git a/fr/blog/exemple.md b/fr/blog/exemple.md
new file mode 100644
index 0000000..f80b0df
--- /dev/null
+++ b/fr/blog/exemple.md
@@ -0,0 +1,51 @@
+---
+title: Exemple d'article
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+date: 2022-10-14
+tags:
+  - ACV
+  - EFC
+  - écoconception
+layout: layouts/post.njk
+---
+
+## Introduction
+Leverage agile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+## Partie une
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+```diff-js
+ // this is a command
+ function myCommand() {
++  let counter = 0;
+-  let counter = 1;
+   counter++;
+ }
+
+ // Test with a line break above this line.
+ console.log('Test');
+```
+
+## Partie deux
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+```js
+// this is a command
+function myCommand() {
+	let counter = 0;
+	counter++;
+}
+
+// Test with a line break above this line.
+console.log('Test');
+```
+
+## Conclusion
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
diff --git a/fr/blog/exemple_2.md b/fr/blog/exemple_2.md
new file mode 100644
index 0000000..b497184
--- /dev/null
+++ b/fr/blog/exemple_2.md
@@ -0,0 +1,50 @@
+---
+title: Second exemple d'article
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+date: 2022-10-17
+tags:
+  - accessibilité
+  - écoconception
+layout: layouts/post.njk
+---
+
+## Introduction
+Leverage agile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+## Partie une
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+```diff-js
+ // this is a command
+ function myCommand() {
++  let counter = 0;
+-  let counter = 1;
+   counter++;
+ }
+
+ // Test with a line break above this line.
+ console.log('Test');
+```
+
+## Partie deux
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+```js
+// this is a command
+function myCommand() {
+	let counter = 0;
+	counter++;
+}
+
+// Test with a line break above this line.
+console.log('Test');
+```
+
+## Conclusion
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
diff --git a/fr/blog/exemple_3.md b/fr/blog/exemple_3.md
new file mode 100644
index 0000000..62519b2
--- /dev/null
+++ b/fr/blog/exemple_3.md
@@ -0,0 +1,49 @@
+---
+title: Troisième exemple d'article
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+date: 2022-10-17
+tags:
+  - écoconception
+layout: layouts/post.njk
+---
+
+## Introduction
+Leverage agile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+## Partie une
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+```diff-js
+ // this is a command
+ function myCommand() {
++  let counter = 0;
+-  let counter = 1;
+   counter++;
+ }
+
+ // Test with a line break above this line.
+ console.log('Test');
+```
+
+## Partie deux
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
+
+```js
+// this is a command
+function myCommand() {
+	let counter = 0;
+	counter++;
+}
+
+// Test with a line break above this line.
+console.log('Test');
+```
+
+## Conclusion
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
diff --git a/fr/blog/fourthpost.md b/fr/blog/fourthpost.md
deleted file mode 100644
index d1db37a..0000000
--- a/fr/blog/fourthpost.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: This is my fourth post
-description: This is a post on My Blog about touchpoints and circling wagons.
-date: 2018-09-30
-tags: second tag
-layout: layouts/post.njk
----
-Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
-
-Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
-## Section Header
-
-Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
-
diff --git a/fr/blog/new_post.md b/fr/blog/new_post.md
deleted file mode 100644
index 5556bc6..0000000
--- a/fr/blog/new_post.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Tout premier post
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-date: 2022-10-14
-tags:
-  - demo
-  - easy
-layout: layouts/post.njk
----
-
-## Introduction
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Habitant morbi tristique senectus et netus. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Orci porta non pulvinar neque laoreet suspendisse interdum. Cursus risus at ultrices mi tempus. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Nibh tellus molestie nunc non blandit massa. Amet mattis vulputate enim nulla. Gravida cum sociis natoque penatibus. At tellus at urna condimentum. Commodo sed egestas egestas fringilla. Turpis in eu mi bibendum neque egestas congue. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Aliquam malesuada bibendum arcu vitae elementum curabitur.
-
-Massa eget egestas purus viverra. Sit amet commodo nulla facilisi. Risus sed vulputate odio ut enim blandit volutpat. Amet facilisis magna etiam tempor orci eu. Aenean sed adipiscing diam donec adipiscing tristique. Ut ornare lectus sit amet est placerat. Nulla facilisi etiam dignissim diam quis. Volutpat blandit aliquam etiam erat velit. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Cursus euismod quis viverra nibh.
-
-Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Aliquam sem fringilla ut morbi tincidunt. Tincidunt arcu non sodales neque sodales ut etiam sit. Lacinia quis vel eros donec ac odio tempor orci dapibus. Nunc mattis enim ut tellus. Eu lobortis elementum nibh tellus molestie nunc non. Mollis aliquam ut porttitor leo a diam. Vulputate odio ut enim blandit volutpat maecenas volutpat. Gravida quis blandit turpis cursus in. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Enim facilisis gravida neque convallis a. Gravida in fermentum et sollicitudin ac orci. Bibendum at varius vel pharetra vel. Pharetra vel turpis nunc eget lorem dolor sed. Mauris pharetra et ultrices neque ornare aenean.
-
-Risus sed vulputate odio ut enim blandit. Et ultrices neque ornare aenean euismod elementum. Vitae sapien
-pellentesque habitant morbi tristique senectus. Pretium vulputate sapien nec sagittis aliquam malesuada. Neque
-volutpat ac tincidunt vitae semper quis lectus nulla. Consequat mauris nunc congue nisi vitae suscipit tellus
-mauris. Tincidunt augue interdum velit euismod in pellentesque. Malesuada fames ac turpis egestas integer eget
-aliquet. Hendrerit dolor magna eget est lorem ipsum dolor. Porttitor lacus luctus accumsan tortor posuere ac ut.
-Gravida neque convallis a cras semper auctor neque vitae. Auctor urna nunc id cursus metus aliquam eleifend mi. Ut
-etiam sit amet nisl purus in. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Lacus sed
-turpis tincidunt id. At volutpat diam ut venenatis tellus. Tellus orci ac auctor augue mauris.
-
-## Exemple de code
-
-```diff-js
- // this is a command
- function myCommand() {
-+  let counter = 0;
--  let counter = 1;
-   counter++;
- }
-
- // Test with a line break above this line.
- console.log('Test');
-```
diff --git a/fr/blog/nouveau_post.md b/fr/blog/nouveau_post.md
deleted file mode 100644
index 0837bbc..0000000
--- a/fr/blog/nouveau_post.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: This is my first post
-description: This is a post on My Blog about agile frameworks.
-date: 2022-10-14
-tags:
-  - écoconception
-layout: layouts/post.njk
----
-Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
-
-Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
-## Section Header
-
-Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
-
-```diff-js
- // this is a command
- function myCommand() {
-+  let counter = 0;
--  let counter = 1;
-   counter++;
- }
-
- // Test with a line break above this line.
- console.log('Test');
-```
diff --git a/fr/blog/nouveau_post2.md b/fr/blog/nouveau_post2.md
deleted file mode 100644
index 419769c..0000000
--- a/fr/blog/nouveau_post2.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Nouveau post 2
-description: This is a post on My Blog about agile frameworks.
-date: 2022-10-14
-tags:
-  - écoconception
-layout: layouts/post.njk
----
-Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
-
-Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
-## Section Header
-
-Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
-
-```diff-js
- // this is a command
- function myCommand() {
-+  let counter = 0;
--  let counter = 1;
-   counter++;
- }
-
- // Test with a line break above this line.
- console.log('Test');
-```
diff --git a/fr/blog/secondpost.md b/fr/blog/secondpost.md
deleted file mode 100644
index bb31a09..0000000
--- a/fr/blog/secondpost.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: This is my second post with a much longer title
-description: This is a post on My Blog about leveraging agile frameworks.
-date: 2018-07-04
-tags:
-  - intretien
-layout: layouts/post.njk
----
-Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
-
-## Section Header
-
-<a href="/blog/firstpost/">First post</a>
-<a href="/blog/thirdpost/">Third post</a>
-
-Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
-Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
diff --git a/fr/blog/thirdpost.md b/fr/blog/thirdpost.md
deleted file mode 100644
index 199ad47..0000000
--- a/fr/blog/thirdpost.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: This is my third post
-description: This is a post on My Blog about win-win survival strategies.
-date: 2018-08-24
-tags:
-  - second tag
-  - posts with two tags
-layout: layouts/post.njk
----
-Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
-
-```js
-// this is a command
-function myCommand() {
-	let counter = 0;
-	counter++;
-}
-
-// Test with a line break above this line.
-console.log('Test');
-```
-
-Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
-## Section Header
-
-Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
diff --git a/fr/index.njk b/fr/index.njk
index c3e63e5..5ba8031 100644
--- a/fr/index.njk
+++ b/fr/index.njk
@@ -5,18 +5,15 @@ eleventyNavigation:
   order: 1
 ---
 {% set maxPosts = collections.posts.length | min(5) %}
-<h1>{% if maxPosts == 1 %}Article{% else %}Derniers articles{% endif %}</h1>
-
+{#<h1>{% if maxPosts == 1 %}Article{% else %}Derniers articles{% endif %}</h1>#}
+<h1>Blog IT's on us</h1>
 {% set postslist = collections.posts | head(-5) %}
 {% set postslistCounter = collections.posts | length %}
 {% include "postslist.njk" %}
 
-<p>Consulter plus d'articles dans <a href="/blog/">les archives</a>.</p>
-
-{# List all of the pages in the project
-<ul>
-  {%- for entry in collections.all %}
-  <li><a href="{{ entry.url }}"><code>{{ entry.url }}</code></a></li>
-  {%- endfor %}
-</ul>
-#}
+{#List all of the pages in the project#}
+{#<ul>#}
+{#  {%- for entry in collections.all %}#}
+{#  <li><a href="{{ entry.url }}"><code>{{ entry.url }}</code></a></li>#}
+{#  {%- endfor %}#}
+{#</ul>#}
diff --git a/fr/tags-list.njk b/fr/tags-list.njk
deleted file mode 100644
index 5893fea..0000000
--- a/fr/tags-list.njk
+++ /dev/null
@@ -1,12 +0,0 @@
----
-permalink: /tags/
-layout: layouts/home.njk
----
-<h1>Tags</h1>
-
-<ul>
-{% for tag in collections.all | getAllTags | filterTagList %}
-  {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-  <li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
-{% endfor %}
-</ul>
diff --git a/fr/tags.njk b/fr/tags.njk
index 551156c..a9c9ac7 100644
--- a/fr/tags.njk
+++ b/fr/tags.njk
@@ -18,5 +18,3 @@ permalink: /tags/{{ tag | slugify }}/
 
 {% set postslist = collections[ tag ] %}
 {% include "postslist.njk" %}
-
-<p>Voir l'ensemble des <a href="/tags/">tags</a>.</p>
diff --git a/i18n.js b/i18n.js
index bb68f1a..f9644bd 100644
--- a/i18n.js
+++ b/i18n.js
@@ -6,7 +6,7 @@ module.exports = {
     nav: {
       home: "Accueil",
       archive: "Archive",
-      about: "À propos",
+      all: "Tous les articles"
     }
   }
 };
diff --git a/public/css/index.css b/public/css/index.css
index b3ca995..9a6ae12 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -9,14 +9,16 @@
   --color-gray-20: #e0e0e0;
   --color-gray-50: #C0C0C0;
   --color-gray-90: #333;
+  --color-green-1: #004953;
+  --color-green-2: #57c183;
 
   --background-color: #fff;
 
   --text-color: rgba(0,0,10,.8);
-  --text-color-secondary: #004953;
-  --text-color-tertiary: #57c183;
-  --text-color-link: #004953;
-  --text-color-link-active: #004953;
+  --text-color-secondary: var(--color-green-1);
+  --text-color-tertiary: var(--color-green-2);
+  --text-color-link: var(--color-green-1);
+  --text-color-link-active: var(--color-green-1);
 }
 
 /*@media (prefers-color-scheme: dark) {*/
@@ -48,12 +50,48 @@ body {
   color: var(--text-color);
   background-color: var(--background-color);
 }
-html {
-  overflow-y: scroll;
-}
+
 main {
-  max-width: 40em;
+  max-width: 1200px;
   margin: 0 auto;
+
+  display: flex;
+}
+.main-content {
+  margin: auto;
+  width: 1200px;
+}
+
+.right-side {
+  position: -webkit-sticky; /* for Safari */
+  position: sticky;
+  top: 5rem;
+  align-self: flex-start;
+  width: 300px;
+  padding-left: 60px;
+}
+
+.right-side .title {
+  color: var(--text-color-secondary);
+  font-weight: 700;
+}
+
+.right-side .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.right-side .links {
+  padding: 0;
+  list-style: none;
+}
+
+.right-side .tags,
+.right-side .links {
+  padding: 0;
+  margin: 12px 0 23px 0;
+  list-style: none;
 }
 
 h1 {
@@ -73,9 +111,6 @@ h2 {
   margin-top: 0;
 }
 
-p:last-child {
-  margin-bottom: 0;
-}
 p {
   line-height: 1.5;
   margin: 1.5em 0;
@@ -93,7 +128,7 @@ a:hover {
 }
 
 main {
-  padding: 8rem 1rem 1rem;
+  padding: 8rem 1rem 4rem 1rem;
 }
 main :first-child {
   margin-top: 0;
@@ -131,11 +166,14 @@ code {
   word-break: break-all;
 }
 
+hr {
+  margin: 4rem 15vw;
+}
+
 /* Header */
 .main-header {
   background: #fff;
   box-shadow: 0 2px 8px rgba(0,0,0,.25);
-  position: fixed;
   width: 100%;
   z-index: 1000;
   height: 60px;
@@ -157,36 +195,20 @@ code {
   flex-grow: 1;
 }
 
-.nav {
-  display: flex;
-  flex-grow: 1;
-  align-items: baseline;
-  justify-content: space-around;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-/* Nav */
-.nav-item {
-  display: inline-block;
-  font-weight: 900;
-  letter-spacing: .02em;
-  margin: 0;
-  padding: 0;
-}
-.nav-item a[href]:not(:hover) {
-  text-decoration: none;
-}
-.nav-item-active {
-  text-decoration: underline;
-}
-
 /*!* Posts list *!*/
-/*.postlist {*/
-/*  list-style: none;*/
-/*  padding: 0;*/
-/*  padding-left: 1.5rem;*/
-/*}*/
+.post-list {
+  list-style: none;
+  padding: 5rem 0;
+}
+.post-list li {
+  display: flex;
+  padding: 15px 0;
+  margin: 2px;
+  border-bottom: 2px solid var(--text-color-secondary);
+}
+.post-list li a {
+  flex-grow: 1;
+}
 .postlist-item {
   margin-bottom: 5rem;
 }
@@ -211,7 +233,6 @@ code {
   background: var(--text-color-tertiary);
   padding: 4px;
   font-size: 0.8125em; /* 13px /16 */
-  /*font-weight: 600;*/
   border-radius: 5px;
   text-decoration: none;
 }
@@ -224,6 +245,7 @@ code {
   padding: 0;
   margin: 0;
 }
+.post-list time,
 .post-metadata time {
   margin-right: 1em;
   font-size: 0.8125em; /* 13px /16 */
@@ -232,8 +254,21 @@ code {
 .post-metadata li:first-child {
   flex-grow: 1;
 }
+.post-nav ul {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+  padding: 0;
+  margin: 2rem 1rem 0 0;
+}
+/*.post-nav ul li.previous {*/
+/*  list-style: '<';*/
+/*}*/
+/*.post-nav ul li.next {*/
+/*  list-style: '>';*/
+/*}*/
 
-  /* Direct Links / Markdown Headers */
+/* Direct Links / Markdown Headers */
 .direct-link {
   font-family: sans-serif;
   text-decoration: none;
@@ -247,3 +282,81 @@ a[href].direct-link:focus,
 :hover > a[href].direct-link {
   color: #aaa;
 }
+
+.main-footer {
+  align-items: center;
+  background: var(--color-green-1);
+  display: flex;
+  height: 300px;
+  padding: 0 103px;
+}
+
+.main-footer,
+.main-footer a {
+  color: #fff;
+}
+
+.footer-contact {
+  display: flex;
+  flex: 0 20%;
+  flex-direction: column;
+  font-size: 1em;
+  line-height: 1.5em;
+}
+
+.footer-contact p {
+  margin: 0;
+  padding: 0;
+}
+
+.footer-contact-title {
+  color: #fff;
+  font-size: 1.2em;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: .04em;
+  line-height: 1.7em;
+  text-transform: uppercase;
+}
+
+.footer-contact div:last-child {
+  padding-top: 23px;
+}
+
+.footer-center {
+  flex: 0 60%;
+  text-align: center;
+}
+
+@media only screen and (max-width: 1200px) {
+  main {
+    max-width: 100%;
+    flex-direction: column;
+    padding-top: 1rem;
+  }
+  .main-content{
+    max-width: 100%;
+  }
+  .right-side {
+    width: 100%;
+    padding-left: 0;
+    padding-top: 5rem;
+  }
+  .main-footer {
+    flex-direction: column-reverse;
+    height: auto;
+    padding: 23px 0;
+  }
+  .post-nav ul {
+    flex-direction: column;
+  }
+  .footer-contact {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 23px;
+    width: 100%;
+  }
+  .footer-center {
+    padding: 0 23px 23px;
+  }
+}
