refactor: review categories position

src/_layouts/base.njk

@@ -22,13 +22,13 @@
   </header>
 
   <main>
-    <div class="main-content">
+{#    <div class="main-content">#}
       {{ content | safe }}
-    </div>
+{#    </div>#}
-    <aside class="right-side">
+{#    <aside class="right-side">#}
-      {% include "tagslist.njk" %}
+{#      {% include "tagslist.njk" %}#}
-      {% include "other_links.njk" %}
+{#      {% include "other_links.njk" %}#}
-    </aside>
+{#    </aside>#}
   </main>
 
   <footer class="main-footer">

src/_layouts/post.njk

@@ -2,34 +2,40 @@
 layout: base.njk
 templateClass: tmpl-post
 ---
-<h1>{{ title }}</h1>
+<div class="main-content">
+  <h1>{{ title }}</h1>
 
-<div class="post-metadata">
+  <div class="post-metadata">
-  <div class="post-metadata__header">
+    <div class="post-metadata__header">
-    Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
+      Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
-  </div>
+    </div>
-  <ul>
-    {%- for tag in tags | filterTagList %}
-    {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-    <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
-    {%- endfor %}
-  </ul>
-</div>
-
-{{ content | safe }}
-
-<hr>
-
-{%- if collections.posts %}
-{# these filters are locale-aware in 2.0.0-canary.14 #}
-{%- set previousPost = collections.posts | getPreviousCollectionItem %}
-{%- set nextPost = collections.posts | getNextCollectionItem %}
-{%- if nextPost or previousPost %}
-  <nav class="post-nav">
     <ul>
-      {%- if previousPost %}<li class="previous">Précédent : <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+      {%- for tag in tags | filterTagList %}
-      {%- if nextPost %}<li class="next">Suivant : <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+      {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+      <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
+      {%- endfor %}
     </ul>
-  </nav>
+  </div>
-{%- endif %}
+
-{%- endif %}
+  {{ content | safe }}
+
+  <hr>
+
+  {%- if collections.posts %}
+  {# these filters are locale-aware in 2.0.0-canary.14 #}
+  {%- set previousPost = collections.posts | getPreviousCollectionItem %}
+  {%- set nextPost = collections.posts | getNextCollectionItem %}
+  {%- if nextPost or previousPost %}
+    <nav class="post-nav">
+      <ul>
+        {%- if previousPost %}<li class="previous">Précédent : <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+        {%- if nextPost %}<li class="next">Suivant : <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+      </ul>
+    </nav>
+  {%- endif %}
+  {%- endif %}
+</div>
+<aside class="right-side">
+  {% include "tagslist.njk" %}
+  {% include "other_links.njk" %}
+</aside>

src/_pages/404.md

@@ -1,19 +0,0 @@
----
-layout: home.njk
-permalink: 404.html
-eleventyExcludeFromCollections: true
----
-# Cette page n'existe pas !
-
-Vous avez fait fausse route ¯\_(ツ)_/¯
-
-[Aller à la page d’accueil](/)
-
-{#
-Read more: https://www.11ty.dev/docs/quicktips/not-found/
-
-This will work for both GitHub pages and Netlify:
-
-* https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
-* https://www.netlify.com/docs/redirects/#custom-404
-#}

src/_pages/404.njk

@@ -0,0 +1,18 @@
+---
+layout: home.njk
+permalink: 404.html
+eleventyExcludeFromCollections: true
+---
+<div class="main-content">
+  <p>Cette page n'existe pas !</p>
+
+
+  <p>ous avez fait fausse route ¯\_(ツ)_/¯</p>
+
+  <p><a href="/">Aller à la page d’accueil</a></p>
+
+</div>
+<aside class="right-side">
+  {% include "tagslist.njk" %}
+  {% include "other_links.njk" %}
+</aside>

src/_pages/all_articles.njk

@@ -4,7 +4,14 @@ eleventyNavigation:
   key: Tous les articles
   order: 3
 ---
-<h1>Tous les articles</h1>
+<div class="main-content">
-
+  <h1>Tous les articles</h1>
-{% set postslist = collections.posts %}
+  <nav>
-{% include "postslist.njk" %}
+    {% include "tagslist.njk" %}
+  </nav>
+  {% set postslist = collections.posts %}
+  {% include "postslist.njk" %}
+</div>
+<aside class="right-side">
+  {% include "other_links.njk" %}
+</aside>

src/_pages/index.njk

@@ -4,17 +4,17 @@ eleventyNavigation:
   key: Accueil
   order: 1
 ---
-{% set maxPosts = collections.posts.length | min(5) %}
+<div class="main-content">
-{#<h1>{% if maxPosts == 1 %}Article{% else %}Derniers articles{% endif %}</h1>#}
+  {% set maxPosts = collections.posts.length | min(5) %}
-<h1 class="main-title">Blog numérique responsable</h1>
+  <h1 class="main-title">Blog numérique responsable</h1>
-<p class="sub-title">par le collectif IT's on us</p>
+  <p class="sub-title">par le collectif IT's on us</p>
-{% set postslist = collections.posts | head(-5) %}
+  <nav>
-{% set postslistCounter = collections.posts | length %}
+    {% include "tagslist.njk" %}
-{% include "postslist.njk" %}
+  </nav>
-
+  {% set postslist = collections.posts | head(-5) %}
-{#List all of the pages in the project#}
+  {% set postslistCounter = collections.posts | length %}
-{#<ul>#}
+  {% include "postslist.njk" %}
-{#  {%- for entry in collections.all %}#}
+</div>
-{#  <li><a href="{{ entry.url }}"><code>{{ entry.url }}</code></a></li>#}
+<aside class="right-side">
-{#  {%- endfor %}#}
+  {% include "other_links.njk" %}
-{#</ul>#}
+</aside>

src/_pages/tags.njk

@@ -14,7 +14,13 @@ eleventyComputed:
   title: Tags “{{ tag }}”
 permalink: /tags/{{ tag | slugify }}/
 ---
-<h1>#{{ tag }}</h1>
+<div class="main-content">
+  <h1>#{{ tag }}</h1>
 
-{% set postslist = collections[ tag ] %}
+  {% set postslist = collections[ tag ] %}
-{% include "postslist.njk" %}
+  {% include "postslist.njk" %}
+</div>
+<aside class="right-side">
+  {% include "tagslist.njk" %}
+  {% include "other_links.njk" %}
+</aside>

src/assets/css/index.scss

@@ -76,24 +76,37 @@ main {
   padding-left: 60px;
 }
 
-.right-side .title {
+.right-side .title,
+nav .title {
   color: var(--text-color-secondary);
   font-weight: 700;
 }
 
-.right-side .tags {
+nav .title{
+  font-size: 1.8rem;
+}
+
+nav {
+  margin-bottom: 5rem;
+}
+
+.right-side .tags,
+nav .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
 }
 
-.right-side .links {
+.right-side .links,
+nav .links{
   padding: 0;
   list-style: none;
 }
 
 .right-side .tags,
-.right-side .links {
+.right-side .links,
+nav .tags,
+nav .links {
   padding: 0;
   margin: 12px 0 23px 0;
   list-style: none;