style: redesign article page layout and typography

hugo/eliaskohout.de/layouts/_default/single.html

@@ -2,25 +2,30 @@
   {{- partial "background.html" . -}}
 
   <main class="page-content">
-    <h1>{{ .Title }}</h1>
-
-    <p class="tags">
-      {{ range .Params.tags }}
-        <span class="tag">{{ . }}</span>
-      {{ end }}
-    </p>
-
-    <div class="project-links">
-      {{ with .Params.code }}<a href="{{ . }}">[Code]</a>{{ end }}
-      {{ with .Params.demo }}<a href="{{ . }}">[Live Demo]</a>{{ end }}
-    </div>
+    <header class="article-header">
+      <div class="article-meta">
+        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
+        <span class="meta-sep">·</span>
+        <span>{{ math.Round (div (countwords .Content) 200.0) }} min read</span>
+      </div>
+      <h1>{{ .Title }}</h1>
+      <p class="tags">
+        {{ range .Params.tags }}
+          <span class="tag">{{ . }}</span>
+        {{ end }}
+      </p>
+      <div class="project-links">
+        {{ with .Params.code }}<a href="{{ . }}">Code ↗</a>{{ end }}
+        {{ with .Params.demo }}<a href="{{ . }}">Live Demo ↗</a>{{ end }}
+      </div>
+    </header>
 
     <article class="project-body">
       {{ .Content }}
     </article>
 
-    <div class="back-link">
+    <footer class="article-footer">
       <a href="/projects/">← all projects</a>
-    </div>
+    </footer>
   </main>
 {{ end }}