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 /sass | |
| 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 '')
| -rw-r--r-- | sass/style.sass | 41 |
1 files changed, 28 insertions, 13 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 |