summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorWolfgang Müller2021-06-16 14:41:00 +0200
committerWolfgang Müller2021-06-16 14:41:00 +0200
commit8d62f42cda3fb202d5bb873f87d2f8a645a7003f (patch)
treeb9792fd0020254df0d97202e8d51d17cb9cbc748
parent00a186d12a2ad530a39fafe726150d67a212ecbf (diff)
downloadzunzuncito-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 '')
-rw-r--r--sass/style.sass41
-rw-r--r--templates/base.html21
-rw-r--r--templates/macros.html2
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 %}