diff options
| author | Wolfgang Müller | 2021-06-16 14:41:00 +0200 |
|---|---|---|
| committer | Wolfgang Müller | 2021-06-16 14:41:00 +0200 |
| commit | 8d62f42cda3fb202d5bb873f87d2f8a645a7003f (patch) | |
| tree | b9792fd0020254df0d97202e8d51d17cb9cbc748 /templates | |
| parent | 00a186d12a2ad530a39fafe726150d67a212ecbf (diff) | |
| download | zunzuncito-8d62f42cda3fb202d5bb873f87d2f8a645a7003f.tar.gz | |
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.
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/base.html | 21 | ||||
| -rw-r--r-- | templates/macros.html | 2 |
2 files changed, 16 insertions, 7 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 -%} 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 %} |