layout: improve post info in single or list pages

* Adds a lists-footer partial.
* Uses breakpoints to adapt how the post informations is aligned and
  separated when the screen gets bigger.
* Adds some space between posts in a list or section, to improve
  readability.
* Removes useless article level and renames a section into article in
  the list template.
* Uses breakpoints to adapt the navigation font-size when the screen
  gets bigger.
* Improves the font-size variables, in order to get a font-size-small
  smaller.
* Restores the section template that wasn't right, I don't know what
  I've done when rebasing and resolving conflicts…

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

assets/scss/_fonts.scss

@@ -20,6 +20,12 @@ nav,
   font-size: $font-size-small;
 }
 
+@include breakpoint(laptop) {
+  nav {
+    font-size: $font-size-base;
+  }
+}
+
 .content {
   line-height: 1.4; // TODO: fix homepage
 }

assets/scss/_lists.scss

@@ -8,5 +8,9 @@
   display: flex;
   flex-direction: column;
   margin-bottom: .5em;
+
+  > article {
+    padding-bottom: .5rem;
+  }
 }
 

assets/scss/_post.scss

@@ -13,14 +13,12 @@
 }
 
 .post-info {
-  display: flex;
+  font-size: $font-size-small;
-  flex-wrap: wrap;
-  justify-content: space-between;
   margin-top: 0;
   padding: 0;
 
   > li {
-    padding-right: .5rem;
+    padding-right: .3rem;
   }
 
   li {
@@ -41,8 +39,27 @@
   }
 }
 
+@include breakpoint(tablet) {
+  .post-info {
+    display: flex;
+    flex-wrap: wrap;
+
+    > li:not(:last-child) {
+      &::after {
+        content: ' /';
+        white-space: pre;
+      }
+    }
+  }
+}
+
 .post-taxonomies:not(:last-child) {
   &::after {
     content: ', ';
   }
 }
+
+.list-footer {
+  font-size: $font-size-small;
+  padding-left: .5em;
+}

assets/scss/_variables.scss

@@ -4,8 +4,9 @@
 //               //
 ///////////////////
 
-$font-size-base: 1.25rem;   // 20 px
+$font-size-base: 1.25rem !default;      // 25 px
-$font-size-small: 1rem;     // 16 px
+$font-size-small: .9rem;                // 18 px
+
 
 /////////////////////
 //                 //

layouts/_default/list.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+<main class="container">
     <header>
         <h1>{{.Title}}</h1>
     </header>
@@ -6,17 +7,12 @@
     {{.Content}}
     <article class="posts-list">
         <!-- Ranges through content/posts/*.md -->
-    {{ range .Pages.ByPublishDate.Reverse }}
+        {{ range .Pages }}
-      <article class="posts-list">
         <article>
-          <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
+            <a href="{{.Permalink}}">{{.Title}}</a>
-        </article>
+            {{ partial "lists-footer.html" . }}
-        <footer>
-           {{ if isset .Params "publishdate" }}
-             {{.PublishDate.Format "2006-01-02"}}
-           {{ end }}
-        </footer>
         </article>
         {{ end }}
     </article>
+</main>
 {{ end }}

layouts/_default/section.html

@@ -3,29 +3,19 @@
     <h1>{{.Title}}</h1>
 </header>
 <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
-  <section>
+<article>
     <header>
         {{.Content }}
     </header>
-<section class="posts-list">
-  {{ range .Pages.ByPublishDate.Reverse }}
     <article class="posts-list">
+        {{ range .Pages.ByPublishDate.Reverse }}
             <article>
                 <a href="{{ .Permalink }}">
                     {{.Title}}
                 </a>
-      </article>
+                {{ partial "lists-footer.html" . }}
-      <footer>
-        {{ .PublishDate.Format "2006-01-02" }}
-        {{ with .Params.categories }}
-          {{ range . }}
-            / <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
-          {{ end }}
-        {{ end }}
-      </footer>
             </article>
             {{ end }}
-  </section>
+    </article>
-</section>
+</article>
 {{ end }}
-

layouts/partials/lists-footer.html

@@ -0,0 +1,9 @@
+<footer class="list-footer">
+{{ .Date.Format "2006-01-02" }}
+{{ with .Params.categories }}
+  {{ range sort . }}
+    / <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
+  {{ end }}
+{{ end }}
+</footer>
+

layouts/partials/post-info.html

@@ -7,7 +7,7 @@
   <li>Catégories&#x202F;:
     <ul>
       {{ range sort . }}
-      <li class="post-taxonomies"> <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a> </li>
+      <li><a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a></li>
       {{ end }}
     </ul>
   </li>
@@ -22,4 +22,3 @@
   </li>
   {{ end }}
 </ul>
-