Use CSS to add spacers

Currently, we pad certain elements with manual interpunct spacers that
are defined in the templates themselves. This is suboptimal for a number
of reasons. Templates should be used for textual or semantic data, not
presentation. Additionally, we have no good control over how whitespace
characters will end up being rendered. Adding or deleting spacers is a
nightmare.

To fix this, use CSS to render spacers instead. To that end, introduce a
couple of HTML elements in the top banner and keep supplementary links
in a list inside a <nav> element. Add a spacer mixin that can be applied
to any element that needs it.

3 files changed, 44 insertions, 20 deletions

diff --git a/sass/style.sass b/sass/style.sass
index 6d3f79a..e911c97 100644
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -29,6 +29,13 @@
 
     --bg-color: #000000
 
+@mixin spacer
+  content: '·'
+  margin-inline: .2rem
+
+  font-style: normal
+  color: var(--fg-color)
+
 a
   text-decoration: none
 
@@ -73,17 +80,8 @@ code
   font-weight: bold
   color: red
 
-ul.inline
-  margin: 0
-  padding: 0
-  list-style-type: none
-  display: inline-block
-
-  > li
-    display: inline-block
-
-  > li:not(:first-of-type)
-    padding-left: .2em
+div.banner
+  display: flex
 
 div.footnote-definition >
   p
@@ -154,6 +152,9 @@ div.banner h2
   font-style: italic
   font-weight: inherit
 
+  &::before
+    @include spacer
+
 article > header
   margin: 0
 
@@ -166,15 +167,29 @@ article > header > img.avatar
   border: 1px solid var(--border-color-light)
 
 article > header > div.banner
-  display: flex
   justify-content: space-between
   border-bottom: 1px dotted var(--border-color-dark)
 
-nav.pagination
+nav
   display: flex
 
+nav ul.inline
+  margin: 0
+  padding: 0
+  list-style-type: none
+  display: inline-flex
+
+nav.pagination
   margin: 1rem 0
   padding-top: .5rem
 
   > a.older
     margin-left: auto
+
+nav.tags
+  ul > li:not(:first-of-type)
+    padding-left: .4rem
+
+nav.links
+  &::before, & > ul > li:not(:first-child)::before
+    @include spacer
diff --git a/templates/base.html b/templates/base.html
index 9190f0e..7599251 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,12 +32,21 @@
 			<header>
 				<h1><a href="/">{{ config.title }}</a></h1>
 				<div class="banner smaller">
-				{{ description }}
-				{% if section -%}
-					· <a href="/atom.xml">feed</a> · <a href="/tags">tags</a>
-				{% elif term -%}
-					· <a href="atom.xml">feed</a>
-				{% endif -%}
+					<span class="description">
+						{{ description }}
+					</span>
+				{%- if section or term %}
+					<nav class="links">
+						<ul class="inline">
+						{%- if section %}
+							<li><a href="/atom.xml">feed</a></li>
+							<li><a href="/tags">tags</a></li>
+						{%- elif term %}
+							<li><a href="atom.xml">feed</a></li>
+						{%- endif %}
+						</ul>
+					</nav>
+				{%- endif %}
 				</div>
 			</header>
 			{%- block content %}{% endblock -%}
diff --git a/templates/macros.html b/templates/macros.html
index 20905fe..ef3cf34 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -10,7 +10,7 @@
 			<div class="info">
 				<a class="bold-hover" title="permalink to this post" href="{{ post.permalink }}">{% if mention %}№ {{ post.slug }} {% else %}§{% endif %}</a>
 				<time class="mute" datetime="{{ post.date }}" title="{{ post.date }}">{{ post.date | date(format="%F %R") }}</time>
-				{%- if post.title %} · <h2 class="mute">{{ post.title }}</h2>{% endif %}
+				{%- if post.title %}<h2 class="mute">{{ post.title }}</h2>{% endif %}
 				{%- if post.draft %}<span class="warning">DRAFT</span>{% endif %}
 			</div>
 			{%- if "tags" in post.taxonomies %}