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, 15 insertions, 6 deletions

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