theme: simplify the main layout

* Simplifies the header and menu layout for all screen width.
* Uses only one background color (Darkest Polar).
* Change the main text color to Snow Light Grey.
* Change the header and footer text color to Snow Lightest Grey.
* Add a color for active and focused links (Frost Lighter Green).
* Simplifies the figure layout and colors.
* Adds a font-family variable and set it to the body. It uses the system
  default font.
* Tries to set all font properties in the _fonts.scss file.
* Removes the links decoration on the header and footer.
* Harmonizes the footer accordingly to the header.
* Uses the hugo regular method to generate the footer menu.
* Stops centering the content on large screens.
* Adds the content max width and content left margin to the variables.
* Sets the font weight to bold for hovered links.
* Suppress the main HTML tag of the index template, and set the
  correct classes on the main HTML tag of the baseof template.
* Uses a second level header for the title of the page, as the first
  level is used for the website title.
* Improves the layout of definition lists on the home page, with a
  better (and simpler) rendering on small screens.
* Prevents to use the post information partial on static page. This is
  done through a test on the layout property `static` of the front
  header.
* Reorders the sections of the home page and adds anchors to the section
  headers.
* Closes #8, #11.

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

assets/scss/_colors.scss

@@ -5,23 +5,22 @@
 ////////////////////
 
 html,
-body,
+body {
-.main-header > .container,
-.main-footer > .container {
-  background-color: $the-darkiest-polar;
-}
-
-.container {
   background-color: $darkest-polar;
-  color: $snow-storm-lightest-grey;
+  color: $snow-storm-light-grey;
 }
 
-a,
+a {
-a:hover,
-a:active {
   color: $frost-green;
 }
 
+a:active,
+a:focus,
+.main-header a:active,
+.main-header a:focus {
+  color: $frost-lighter-green;
+}
+
 a:visited {
   color: $frost-grey-blue;
 }
@@ -29,8 +28,9 @@ a:visited {
 .main-header,
 .main-header a,
 .main-footer,
-.main-footer a {
+.main-footer a,
-  color: $snow-storm-lighter-grey;
+nav {
+  color: $snow-storm-lightest-grey;
 }
 
 code,
@@ -39,6 +39,6 @@ pre {
 }
 
 figure {
-  background-color: $darkest-polar;
+  // background-color: $darkest-polar;
-  box-shadow: 0 2px 10px 5px $the-darkiest-polar;
+  // box-shadow: 0 2px 10px 5px $the-darkiest-polar;
 }

assets/scss/_fonts.scss

@@ -7,12 +7,15 @@
 html,
 body {
   font-size: $font-size-base;
+  line-height: $line-height-base;
+  font-family: $font-family;
 }
 
 code,
 figure p,
 .footnotes,
 .footnote-ref,
+.list-footer,
 .main-footer,
 nav,
 .post-info,
@@ -20,16 +23,20 @@ nav,
   font-size: $font-size-small;
 }
 
-@include breakpoint(laptop) {
+blockquote {
-  nav {
+  font-style: italic;
-    font-size: $font-size-base;
-  }
-}
-
-.container {
-  line-height: $line-height-base; // TODO: fix homepage
 }
 
 .smallcaps {
   font-variant: small-caps;
 }
+
+.home-lists {
+  dt {
+    font-weight: bold;
+  }
+}
+
+#licence {
+  font-variant: small-caps;
+}

assets/scss/_footer.scss

@@ -5,23 +5,16 @@
 ///////////////////
 
 .main-footer {
+  margin-top: 1.25rem;
+  padding-bottom: 1.25rem;
+
   ul {
-    align-items: center;
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-evenly;
-    margin-bottom: 1em;
+    margin: 0;
+    padding: 0;
   }
 
   @include inline-list;
 
-  li {
-    margin-right: .5em;
-  }
-
 }
-
-.smallcaps {
-  font-variant: small-caps;
-}
-
-

assets/scss/_header.scss

@@ -5,54 +5,33 @@
 ///////////////////
 
 .main-header {
-  section {
+  display: flex;
-    display: flex;
+  flex-direction: column;
-    flex-direction: column;
+  margin: 1.25rem 0;
+
+  h1 {
+    margin: 0;
   }
 
-  @include breakpoint(tablet) {
+  article {
-    section {
-      flex-direction: row;
-    }
-  }
-
-  header {
     flex-grow: 1;
   }
-}
 
-.title {
+  .title {
-  align-items: center;
+    display: flex;
-  display: flex;
-}
-
-.avatar {
-  border-radius: 50%;
-  margin-right: 1rem;
-  width: 5rem;
-}
-
-nav {
-  display: flex;
-  justify-content: end;
-
-  @include breakpoint(tablet) {
-    flex-direction: column;
     justify-content: center;
   }
 
-  ul {
+  nav {
-    margin: 0;
-    padding: 0;
-  }
 
-  @include inline-list;
+    ul {
+      display: flex;
+      justify-content: space-evenly;
+      margin: 0;
+      padding: 0;
+    }
 
-}
+    @include inline-list;
 
-.nav-item:not(:last-child) {
-  &::after {
-    content: ' /';
   }
 }
-

assets/scss/_layout.scss

@@ -4,20 +4,15 @@
 //              //
 //////////////////
 
-.container {
-  border-radius: .5rem;
-  margin: 0 auto;
-  max-width: 46rem;           // 920px
-  padding: .5rem;
-  width: 95%;
-}
-
 body {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  max-width: $content-max-width;
+  margin: 0 0 0 $content-left-margin;
 }
 
 main {
   flex-grow: 1;
+  margin: 0 0 2.5rem 0;
 }

assets/scss/_main_body.scss

@@ -4,37 +4,41 @@
 //               //
 ///////////////////
 
-dl {
+.home-lists {
-  display: inline-flex;
-  flex-flow: row;
-  flex-wrap: wrap;
-  overflow: visible;
-  width: 100%;      // set the container width
-}
 
-dt {
+  @include breakpoint(laptop) {
-  flex: 0 0 39%;
+    display: inline-flex;
-  word-wrap: anywhere;
+    flex-flow: row;
-}
+    flex-wrap: wrap;
+    overflow: visible;
+    width: 100%;      // set the container width
 
-dt::after {
+    dt {
-  content: ' :';
+      flex: 0 0 39%;
-}
+      word-wrap: anywhere;
+    }
+
+    dd {
+      flex: 0 0 59%;
+      margin-left: auto;
+      text-align: left;
+    }
+  }
+
+  dd {
+    margin-left: .5rem;
+  }
+
+  dt::after {
+    content: ' :';
+  }
 
-dd {
-  flex: 0 0 59%;
-  margin-left: auto;
-  text-align: left;
 }
 
 .contents {
   padding: 0;
-
-  li {
-    list-style: none;
-  }
 }
 
-blockquote {
+.home-lists {
-  font-style: italic;
+  margin: 0;
 }

assets/scss/_post.scss

@@ -11,13 +11,10 @@
 }
 
 .post-image {
-  width: 100%;
+  width: 97%;
-  border-radius: .2rem;
 }
 
 .post-info {
-  font-size: $font-size-small;
-  color: $snow-storm-light-grey;
 
   > ul {
     margin-top: 0;
@@ -67,6 +64,5 @@
 }
 
 .list-footer {
-  font-size: $font-size-small;
   padding-left: .5em;
 }

assets/scss/_texts.scss

@@ -1,6 +1,6 @@
 ////////////////////
 //                //
-//     Textes     //
+//     Texts      //
 //                //
 ////////////////////
 
@@ -15,3 +15,15 @@
     margin-bottom: .5rem;
   }
 }
+
+.main-header,
+.main-footer {
+  a {
+    text-decoration: none;
+  }
+}
+
+a:hover,
+.main-header a:hover {
+  font-weight: bold;
+}

assets/scss/_variables.scss

@@ -1,9 +1,19 @@
 ///////////////////
 //               //
-//      FONT     //
+//    WIDTH      //
 //               //
 ///////////////////
 
+$content-max-width: 46rem;              // 920 px
+$content-left-margin: 3vw;
+
+///////////////////
+//               //
+//     FONT      //
+//               //
+///////////////////
+
+$font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $font-size-base: 1.25rem !default;      // 25 px
 $font-size-small: .9rem;                // 18 px
 $line-height-base: 1.4;
@@ -56,7 +66,8 @@ $frost-grey-blue: $nord9;
 $frost-deep-blue: $nord10;
 
 //Aurora, translated into something easy to remember, hopefully
-$aurora-red: $nord11; $aurora-orange: $nord12;
+$aurora-red: $nord11;
+$aurora-orange: $nord12;
 $aurora-yellow: $nord13;
 $aurora-green: $nord14;
 $aurora-purple: $nord15;

i18n/fr.toml

@@ -3,3 +3,10 @@ other = "Informations sur le billet"
 
 [permalink]
 other = "Permalien"
+
+[contactsPriv]
+other = "Contacts personnels"
+
+
+[contactsPro]
+other = "Contacts professionnels"

layouts/_default/baseof.html

@@ -3,7 +3,8 @@
 {{ partial "head.html" . }}
 <body>
   {{- partial "header.html" . -}}
-  <main class="container">
+  <main aria-role="main" class="container"
+        itemscope itemtype="https://schema.org/Person">
   {{- block "main" . }}{{- end }}
   </main>
   {{- partial "footer.html" . -}}

layouts/_default/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <main class="container">
     <header>
-        <h1>{{.Title}}</h1>
+        <h2>{{.Title}}</h2>
     </header>
     <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
     {{.Content}}

layouts/_default/section.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <header>
-    <h1>{{.Title}}</h1>
+    <h2>{{.Title}}</h2>
 </header>
 <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
 <article>

layouts/_default/single.html

@@ -6,12 +6,13 @@
          alt="{{ .Params.postimagedescription }}">
     {{ end }}
     <h1 id="title">{{ .Title }}</h1>
+    {{- if ne .Layout "static" }}
     {{- partial "post-info.html" . -}}
+    {{ end }}
   </header>
   <article {{ if eq .Layout "verse" }} class="content, {{ .Layout }}"
-           {{ else }} class="content"
+           {{ else }} class="content" {{ end -}}>
-           {{ end }}>
+    {{ .Content -}}
-    {{ .Content }}
   </article>
-{{ end }}
+{{ end -}}
 

layouts/_default/terms.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <header>
-    <h1>{{.Title}}</h1>
+    <h2>{{.Title}}</h2>
   </header>
   <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
   {{.Content}}

layouts/index.html

@@ -1,15 +1,14 @@
 {{ define "main" }}
-  <main aria-role="main" class="container" itemscope itemtype="https://schema.org/Person">
+    <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
+    {{.Content}}
+    {{ if not .Site.Params.online.hide }}
+      {{ partial "online" . }}
+    {{ end }}
     {{if not .Site.Params.contactsPriv.hide }}
       {{ partial "perso" .}}
     {{ end }}
     {{if not .Site.Params.contactsPro.hide }}
       {{ partial "pro" . }}
     {{ end }}
-    <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
-    {{.Content}}
-    {{ if not .Site.Params.online.hide }}
-      {{ partial "online" . }}
-    {{ end }}
   </main>
 {{ end }}

layouts/partials/footer.html

@@ -1,20 +1,24 @@
 <footer class="main-footer">
-  <ul class="container">
+  <nav role="navigation" aria-label="Secondary">
-    <li><a href="https://framagit.org/iGormilhit/igor.milhit">Sources</a></li>
+    <ul>
-    {{ with .GitInfo }}
+      {{ $currentPage := . -}}
-        {{ $git := . }}
+      {{ range sort .Site.Menus.footer -}}
-        <li>
+      <li class="nav-item">
-          <code>
+        <a class="nav-item-link{{if or ($currentPage.IsMenuCurrent "footer" .) ($currentPage.HasMenuCurrent "footer" .) }} active{{end}}"
-            <a href="https://framagit.org/iGormilhit/igor.milhit/-/commit/{{- $git.Hash -}}"
+           id="{{ .Identifier }}"
-               title="Dernier commit modifiant cette page">
+           href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
-              {{ $git.AbbreviatedHash }}
+      </li>
-            </a>
+      {{ end -}}
-          </code>
+      {{ with .GitInfo }}
-        </li>
+      {{ $git := . }}
-    {{ end }}
+      <li>
-    <li><a href="http://creativecommons.org/licenses/by/4.0/">
+        <code>
-          <span class="smallcaps">cc-by</span>
+          <a href="https://framagit.org/iGormilhit/igor.milhit/-/commit/{{- $git.Hash -}}"
-        </a>
+             title="Dernier commit modifiant cette page">
-    </li>
+            {{ $git.AbbreviatedHash }}
-  </ul>
+          </a>
+        </code>
+      </li>
+      {{ end }}
+    </ul>
 </footer>

layouts/partials/header.html

@@ -1,34 +1,34 @@
 <header class="main-header">
-  <section class="container">
+  <a href="{{ .Site.BaseURL }}" class="title">
-    <header>
+    <h1>{{ .Site.Title }}</h1>
-      <a href="{{ .Site.BaseURL }}" class="title">
+  </a>
-        <img class="avatar" src="{{ .Site.BaseURL }}images/avatar.png">
+  <nav role="navigation" aria-label="Primary">
-      <h1>{{ .Site.Title }}</h1></a>
+    <ul>
-    </header>
+      {{ $currentPage := . -}}
-    <nav>
+      {{ range sort .Site.Menus.main -}}
-      <ul>
+      <li class="nav-item">
-        {{ $currentPage := . -}}
+        <a class="nav-item-link{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}"
-        {{ range .Site.Menus.main -}}
+           href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
-        <li class="nav-item">
+      </li>
-          <a class="nav-item-link{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
+      {{ end -}}
-        </li>
+      <li class="nav-item">
-        {{ end -}}
-        <li class="nav-item">
         {{ if .IsPage -}}
-          <a class="nav-item-link" href="{{ .Site.BaseURL }}index.xml"
+        <a class="nav-item-link"
-             title="S'abonner aux publications du site">S'abonner
+           href="{{ .Site.BaseURL }}index.xml"
-          </a>
+           title="S'abonner aux publications du site">S'abonner
+        </a>
         {{ else if .IsHome -}}
-          <a class="nav-item-link" href="{{ .Site.BaseURL }}index.xml"
+        <a class="nav-item-link"
-             title="S'abonner aux publications du site">S'abonner
+           href="{{ .Site.BaseURL }}index.xml"
-          </a>
+           title="S'abonner aux publications du site">S'abonner
+        </a>
         {{ else if .IsNode -}}
-          <a class="nav-item-link" href="{{ .Permalink }}index.xml"
+        <a class="nav-item-link"
-             title="S'abonner aux publications de cette section">S'abonner
+           href="{{ .Permalink }}index.xml"
-          </a>
+           title="S'abonner aux publications de cette section">S'abonner
+        </a>
         {{ end -}}
-        </li>
+      </li>
-      </ul>
+    </ul>
-    </nav>
+  </nav>
-  </section>
 </header>

layouts/partials/online.html

@@ -1,5 +1,5 @@
-<h2>Online</h2>
+<h2 id="online">Online</h2>
-<dl>
+<dl class="home-lists">
   {{ with .Site.Params.online.github }}
     <dt>GitHub</dt>
     <dd><a href="https://github.com/{{ . }}">{{ . }}</a></dd>

layouts/partials/perso.html

@@ -1,4 +1,5 @@
-<dl>
+<h2 id="contactsPriv">{{ i18n "contactsPriv" }}</h2>
+<dl class="home-lists">
   {{ with .Site.Params.contactsPriv.email }}
     <dt>e-mail</dt>
     <dd><a href="mailto:{{ . }}" itemprop="email">{{ . }}</a></dd>

layouts/partials/pro.html

@@ -1,4 +1,5 @@
-<dl>
+<h2 id="contactsPro">{{ i18n "contactsPro" }}</h2>
+<dl class="home-lists">
   {{ with .Site.Params.contactsPro.email }}
     <dt>e-mail</dt>
     <dd><a href="mailto:{{ . }}" itemprop="email">{{ . }}</a></dt>