From 8d62f42cda3fb202d5bb873f87d2f8a645a7003f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 16 Jun 2021 14:41:00 +0200
Subject: 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.
---
 sass/style.sass | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)

(limited to 'sass')

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
-- 
cgit v1.2.3-2-gb3c3