section: improve sections, lists and navigation

* Splits styles into partials.
* Adds a category entry to the navigation menu.
* Adds a flex to the header to get the menu on the right.
* Adds a flex to the sections and lists to diplay information evenly.

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

assets/scss/_fonts.scss

@@ -0,0 +1,20 @@
+/*
+ * ************** *
+ *     FONTS      *
+ * ************** *
+*/
+
+html, body {
+  font-size: $font-size-base;
+}
+
+code,
+.footnotes,
+.footnote-ref,
+figure p,
+.main-footer,
+.posts-list footer {
+  font-size: $font-size-small;
+}
+
+

assets/scss/_footer.scss

@@ -0,0 +1,26 @@
+/*
+ * ************** *
+ *    FOOTER      *
+ * ************** *
+*/
+
+.main-footer {
+  ul {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: solid .1em #e1e1e1;
+  padding-top: 1em;
+  margin-bottom: 1em;
+  }
+  li {
+    list-style: none;
+    margin-right: .5em;
+  }
+}
+
+.smallcaps {
+  font-variant: small-caps;
+}
+
+

assets/scss/_header.scss

@@ -0,0 +1,34 @@
+/*
+ * ************** *
+ *    HEADER      *
+ * ************** *
+*/
+
+.main-header {
+  section {
+    display: flex;
+    flex-direction: column;
+    // align-items: center;
+    border-bottom: solid .1em #e1e1e1;
+    padding-bottom: 1em;
+  }
+  header {
+    flex-grow: 1;
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  border-radius: 50%;
+  width: 5rem;
+  margin-right: 1rem;
+}
+
+nav {
+  margin-right: .5em;
+  align-self: end;
+}

assets/scss/_layout.scss

@@ -0,0 +1,22 @@
+/*
+ * ************** *
+ *    LAYOUT      *
+ * ************** *
+*/
+
+.container {
+  max-width: 35rem; /* 960px */
+  margin: 0 auto;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+main {
+  flex-grow: 1;
+}
+
+

assets/scss/_lists.scss

@@ -0,0 +1,12 @@
+/*
+ * ************** *
+ *     LISTS      *
+ * ************** *
+*/
+
+.posts-list {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: .5em;
+}
+

assets/scss/_main_body.scss

@@ -0,0 +1,37 @@
+/*
+ * ************** *
+ *      MAIN      *
+ * ************** *
+*/
+
+dl {
+  display: inline-flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  width: 100%;      /* set the container width*/
+  overflow: visible;
+}
+
+dt {
+  flex: 0 0 39%;
+  word-wrap: anywhere;
+}
+
+dt::after {
+  content: " :";
+}
+
+dd {
+  flex:0 0 59%;
+  margin-left: auto;
+  text-align: left;
+}
+
+.contents {
+  padding: 0;
+  li {
+    list-style: none;
+  }
+}
+
+

assets/scss/_post.scss

@@ -0,0 +1,29 @@
+/*
+ * ************** *
+ *      POST      *
+ * ************** *
+*/
+
+.post-header {
+  margin: 1em 0 1em 0;
+  h1 {
+  margin: 0;
+  }
+}
+
+.post-info {
+  font-size: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin-top: 0;
+  li {
+    list-style: none;
+    display: flex;
+    padding-right: .5em;
+    > ul {
+      display: flex;
+      padding: 0;
+    }
+  }
+}

assets/scss/_variables.scss

@@ -0,0 +1,2 @@
+$font-size-base: 1.25rem;
+$font-size-small: 1rem;

assets/scss/main.scss

@@ -1,167 +1,17 @@
 /*
  * ************** *
- *     FONTS      *
+ *    Includes    *
  * ************** *
 */
 
-html, body {
+@import '_variables.scss';
-  font-size: 1.25rem;
+@import '_fonts.scss';
-}
+@import '_footer.scss';
-
+@import '_header.scss';
-code, .footnotes, .footnote-ref, figure p {
+@import '_layout.scss';
-  font-size: 1rem;
+@import '_lists.scss';
-}
+@import '_main_body.scss';
-
+@import '_post.scss';
-/*
- * ************** *
- *    LAYOUT      *
- * ************** *
-*/
-
-.container {
-  max-width: 35rem; /* 960px */
-  margin: 0 auto;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-main {
-  flex-grow: 1;
-}
-
-/*
- * ************** *
- *    HEADER      *
- * ************** *
-*/
-
-.main-header {
-  margin-bottom: 2em;
-}
-
-.main-header section {
-  display: flex;
-  align-items: center;
-  border-bottom: solid .1em #e1e1e1;
-  padding-bottom: 1em;
-}
-
-.main-header header {
-  flex-grow: 1;
-}
-
-.title {
-  display: flex;
-  align-items: center;
-}
-
-.avatar {
-  border-radius: 50%;
-  width: 5rem;
-  margin-right: 1rem;
-}
-
-nav {
-  margin-right: .5em;
-}
-
-/*
- * ************** *
- *    FOOTER      *
- * ************** *
-*/
-
-.main-footer ul {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: solid .1em #e1e1e1;
-  padding-top: 1em;
-  margin-bottom: 1em;
-}
-
-.main-footer li {
-  list-style: none;
-  margin-right: .5em;
-}
-
-.smallcaps {
-  font-variant: small-caps;
-}
-
-/*
- * ************** *
- *      MAIN      *
- * ************** *
-*/
-
-dl {
-  display: inline-flex;
-  flex-flow: row;
-  flex-wrap: wrap;
-  width: 100%;      /* set the container width*/
-  overflow: visible;
-}
-
-dt {
-  flex: 0 0 39%;
-  word-wrap: anywhere;
-}
-
-dt::after {
-  content: " :";
-}
-
-dd {
-  flex:0 0 59%;
-  margin-left: auto;
-  text-align: left;
-}
-
-.contents {
-  padding: 0;
-}
-
-.contents li {
-  list-style: none;
-}
-
-/*
- * ************** *
- *      POST      *
- * ************** *
-*/
-
-.post-header {
-  margin: 1em 0 1em 0;
-}
-
-.post-header h1 {
-  margin: 0;
-}
-
-.post-info {
-  font-size: 1rem;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0;
-  margin-top: 0;
-}
-
-.post-info li {
-  list-style: none;
-  display: flex;
-  padding-right: .5em;
-}
-
-.post-info li > ul {
-  display: flex;
-  padding: 0;
-}
 
 /*
  * ************** *

layouts/_default/list.html

@@ -4,14 +4,18 @@
   </header>
   <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
   {{.Content}}
-  <article>
+  <article class="posts-list">
   <!-- Ranges through content/posts/*.md -->
     {{ range .Pages }}
+      <article class="posts-list">
         <article>
-        <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> &mdash;
+          <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
+        </article>
+        <footer>
            {{ if isset .Params "publishdate" }}
              {{.PublishDate.Format "2006-01-02"}}
            {{ end }}
+        </footer>
       </article>
     {{ end }}
   </article>

layouts/_default/section.html

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

layouts/partials/header.html

@@ -6,7 +6,8 @@
       <h1>{{ .Site.Title }}</h1></a>
     </header>
     <nav>
-      <a href="{{ .Site.BaseURL }}blog">Blog</a>
+      <a href="{{ .Site.BaseURL }}blog">Blog</a> /
+      <a href="{{ .Site.BaseURL }}categories">Catégories</a>
     </nav>
   </section>
 </header>