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.

1 files changed, 1 insertions, 1 deletions

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 %}