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,22 +1,18 @@
 {{ define "main" }}
-  <header>
+<main class="container">
-      <h1>{{.Title}}</h1>
+    <header>
-  </header>
+        <h1>{{.Title}}</h1>
-  <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
+    </header>
-  {{.Content}}
+    <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
-  <article class="posts-list">
+    {{.Content}}
-  <!-- Ranges through content/posts/*.md -->
+    <article class="posts-list">
-    {{ range .Pages.ByPublishDate.Reverse }}
+        <!-- Ranges through content/posts/*.md -->
-      <article class="posts-list">
+        {{ range .Pages }}
         <article>
-          <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
+            <a href="{{.Permalink}}">{{.Title}}</a>
+            {{ partial "lists-footer.html" . }}
         </article>
-        <footer>
+        {{ end }}
-           {{ if isset .Params "publishdate" }}
+    </article>
-             {{.PublishDate.Format "2006-01-02"}}
+</main>
-           {{ end }}
-        </footer>
-      </article>
-    {{ end }}
-  </article>
 {{ end }}

layouts/_default/section.html

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

@@ -1,13 +1,13 @@
 <ul class="post-info">
   <li>Publié le&#x202F;: {{ dateFormat "2006-01-02" (default .Date (.PublishDate)) }}</li>
   {{ if (and (isset .Params "lastmod") (gt (dateFormat "2006-01-02" (.Lastmod)) (dateFormat "2006-01-02" (.PublishDate)))) }}
-    <li>Dernière mise à jour&#x202F;: {{ .Lastmod.Format "2006-01-02" }}</li>
+  <li>Dernière mise à jour&#x202F;: {{ .Lastmod.Format "2006-01-02" }}</li>
   {{ end }}
   {{ with .Params.categories }}
   <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>
@@ -16,10 +16,9 @@
   <li>Tags&#x202F;:
     <ul>
       {{ range sort . }}
-        <li class="post-taxonomies"> <a href="{{ "tags" | absURL }}/{{ . | urlize }}">{{ . }}</a> </li>
+      <li class="post-taxonomies"> <a href="{{ "tags" | absURL }}/{{ . | urlize }}">{{ . }}</a> </li>
       {{ end }}
     </ul>
   </li>
   {{ end }}
 </ul>
-