menu: improve the menu

* Uses a regular method to generate the menu (`config.toml`).
* Improves the test to provide the good atom link according to the
  homepage, a section or a post.
* Provides a title to improve identification of the atom link.
* Adapts the menu style to mobile or wider screens.
* Adds and uses a mixin for inline lists.

Co-Authored-by: iGor milhit <igor@milhit.ch>

assets/scss/_footer.scss

@@ -12,10 +12,12 @@
     margin-bottom: 1em;
   }
 
+  @include inline-list;
+
   li {
-    list-style: none;
     margin-right: .5em;
   }
+
 }
 
 .smallcaps {

assets/scss/_header.scss

@@ -10,6 +10,12 @@
     flex-direction: column;
   }
 
+  @include breakpoint(tablet) {
+    section {
+      flex-direction: row;
+    }
+  }
+
   header {
     flex-grow: 1;
   }
@@ -27,6 +33,26 @@
 }
 
 nav {
-  align-self: flex-end;
+  display: flex;
-  margin-right: .5em;
+  justify-content: end;
+
+  @include breakpoint(tablet) {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  @include inline-list;
+
 }
+
+.nav-item:not(:last-child) {
+  &::after {
+    content: ' /';
+  }
+}
+

assets/scss/_mixins.scss

@@ -0,0 +1,12 @@
+///////////////////
+//               //
+//    MIXINS     //
+//               //
+///////////////////
+
+// Inline, no bullet lists
+@mixin inline-list {
+  ul > li {
+    display: inline;
+  }
+}

assets/scss/main.scss

@@ -6,6 +6,7 @@
 
 @import 'variables';
 @import 'grid';
+@import 'mixins';
 @import 'colors';
 @import 'fonts';
 @import 'footer';

layouts/partials/header.html

@@ -6,14 +6,29 @@
       <h1>{{ .Site.Title }}</h1></a>
     </header>
     <nav>
-      <a href="{{ .Site.BaseURL }}blog">Blog</a> /
+      <ul>
-      <a href="{{ .Site.BaseURL }}categories">Catégories</a>
+        {{ $currentPage := . -}}
-      {{ if .IsNode }}
+        {{ range .Site.Menus.main -}}
-        / <a href="{{ .Permalink }}index.xml"><span class="smallcaps">rss</a>
+        <li class="nav-item">
-      {{ end }}
+          <a class="nav-item-link{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
-      {{ if .IsPage }}
+        </li>
-        / <a href="{{ .Site.BaseURL }}index.xml"><span class="smallcaps">rss</a>
+        {{ end -}}
-      {{ end }}
+        <li class="nav-item">
+        {{ if .IsPage -}}
+          <a class="nav-item-link" href="{{ .Site.BaseURL }}index.xml"
+             title="S'abonner aux publications du site">S'abonner
+          </a>
+        {{ else if .IsHome -}}
+          <a class="nav-item-link" href="{{ .Site.BaseURL }}index.xml"
+             title="S'abonner aux publications du site">S'abonner
+          </a>
+        {{ else if .IsNode -}}
+          <a class="nav-item-link" href="{{ .Permalink }}index.xml"
+             title="S'abonner aux publications de cette section">S'abonner
+          </a>
+        {{ end -}}
+        </li>
+      </ul>
     </nav>
   </section>
 </header>