style: add minimal stylesheet rules

* NEW Adds CSS rules.
* BETTER Improves very slighlty some layout templates.
* FIX Fixes a missing code label.

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

layouts/_default/list.html

@@ -1,19 +1,18 @@
 {{ define "main" }}
-<main>
+<main class="container">
-    <article>
         <header>
             <h1>{{.Title}}</h1>
         </header>
         <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
         {{.Content}}
-    </article>
+    <article>
-    <ul>
     <!-- Ranges through content/posts/*.md -->
     {{ range .Pages }}
-        <li>
+        <article>
-            <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
+            <a href="{{.Permalink}}">{{.Title}}</a>
-        </li>
+            &mdash; {{.Date.Format "2006-01-02"}}
+        </article>
     {{ end }}
-    </ul>
+    </article>
 </main>
 {{ end }}

layouts/_default/section.html

@@ -1,16 +1,20 @@
 {{ define "main" }}
-  <main>
+  <main class="container">
     {{ .Content }}
-          <ul class="contents">
       {{ range .Paginator.Pages }}
-          <li><a href="{{ .Permalink }}">{{.Title}} &mdash; {{ .Date.Format "2006-01-02" }}</a>
+        <article>
-                  {{/* <div>
+          <a href="{{ .Permalink }}">
-                    {{ partial "summary.html" . }}
+            {{.Title}}
-                  </div> */}}
+          </a>
-              </li>
+          &mdash; {{ .Date.Format "2006-01-02" }}
+          {{ with .Params.categories }}
+            {{ range . }}
+              &mdash; <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
+            {{ end }}
+          {{ end }}
+        </article>
       {{ end }}
     </ul>
-          {{/* {{ partial "pagination.html" . }} */}}
   </main>
 {{ end }}
 

layouts/_default/single.html

@@ -1,30 +1,32 @@
 {{ define "main" }}
-<section id="main">
+<main id="main" class="container">
-  <header>
+  <header class="post-header">
     <h1 id="title">{{ .Title }}</h1>
     <ul class="post-info">
       <li>Publié le&#x202F;: {{ .Date.Format "2006-01-02" }}</li>
       {{ with .Params.categories }}
-      <li>Catégories&#x202F;:</li>
+      <li>Catégories&#x202F;:
         <ul>
           {{ range . }}
             <li><a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a> </li>
           {{ end }}
         </ul>
+      </li>
       {{ end }}
       {{ with .Params.tags }}
-      <li>Tags&#x202F;:</li>
+      <li>Tags&#x202F;:
         <ul>
           {{ range . }}
             <li> <a href="{{ "tags" | absURL }}/{{ . | urlize }}">{{ . }}</a> </li>
           {{ end }}
         </ul>
+      </li>
       {{ end }}
     </ul>
   </header>
     <article id="content">
       {{ .Content }}
     </article>
-</section>
+</main>
 {{ end }}
 

layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <main aria-role="main" itemscope itemtype="https://schema.org/Person">
+  <main aria-role="main" class="container" itemscope itemtype="https://schema.org/Person">
     {{if not .Site.Params.contactsPriv.hide }}
       {{ partial "perso" .}}
     {{ end }}

layouts/partials/footer.html

@@ -1,6 +1,9 @@
 <footer class="main-footer">
-  <ul>
+  <ul class="container">
     <li><a href="https://framagit.org/iGormilhit/igor.milhit">Sources</a></li>
-    <li><a href="http://creativecommons.org/licenses/by/4.0/">CC-BY</a></li>
+    <li><a href="http://creativecommons.org/licenses/by/4.0/">
+          <span class="smallcaps">cc-by</span>
+        </a>
+    </li>
   </ul>
 </footer>

layouts/partials/header.html

@@ -1,4 +1,12 @@
 <header class="main-header">
-  <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+  <section class="container">
+    <header>
+      <a href="{{ .Site.BaseURL }}" class="title">
+        <img class="avatar" src="{{ .Site.BaseURL }}images/avatar.png">
+      <h1>{{ .Site.Title }}</h1></a>
+    </header>
+    <nav>
       <a href="{{ .Site.BaseURL }}blog">Blog</a>
+    </nav>
+  </section>
 </header>

layouts/partials/perso.html

@@ -21,7 +21,7 @@
   {{ end }}
   {{ with .Site.Params.contactsPriv.fingerprint }}
     <dt>Empreinte</dt>
-    <dd>{{ . }}</dd>
+    <dd><code>{{ . }}</code></dd>
   {{ end }}
   {{ with .Site.Params.contactsPriv.xmpp }}
     <dt>XMPP/jabber</dt>

static/style.css

@@ -1,7 +1,100 @@
-main {
+/*
-  max-width: 35rem; /* 960px */
+ * ************** *
+ *     FONTS      *
+ * ************** *
+*/
+
+html, body {
+  font-size: 1.25rem;
 }
 
+/*
+ * ************** *
+ *    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;
@@ -11,15 +104,57 @@ dl {
 }
 
 dt {
-  flex: 0 0 25%;
+  flex: 0 0 39%;
-  text-overflow: ellipsis;
+  word-wrap: anywhere;
-  overflow: hidden;
+}
+
+dt::after {
+  content: " :";
 }
 
 dd {
-  flex:0 0 75%;
+  flex:0 0 59%;
   margin-left: auto;
   text-align: left;
-  text-overflow: ellipsis;
+}
-  overflow: hidden;
+
+.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;
 }