diff options
| author | Wolfgang Müller | 2024-10-05 12:51:57 +0200 |
|---|---|---|
| committer | Wolfgang Müller | 2024-10-05 14:25:35 +0200 |
| commit | eb373a706fb2b3a74f685d619f6c29bf163a4889 (patch) | |
| tree | 7002f1bc728fd78c5e2c8f2c696341d804ef2e94 | |
| parent | 2176cc7f6cf8c9e56dbc187361e5e3a6a5f8d96e (diff) | |
| download | zunzuncito-eb373a706fb2b3a74f685d619f6c29bf163a4889.tar.gz | |
Use gutter to mark related posts
Now that we can put nicely-aligned content at the side we can use the
space to mark the "Related posts" header in a nicer way.
| -rw-r--r-- | sass/style.sass | 15 | ||||
| -rw-r--r-- | templates/page.html | 3 |
2 files changed, 16 insertions, 2 deletions
diff --git a/sass/style.sass b/sass/style.sass index 6058155..bac94b6 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -13,6 +13,7 @@ --fg-color: black --fg-color-mute: #5a5a5a + --fg-color-gutter: #a6a6a6 --fg-color-pre: black --fg-href: #0000ee --fg-href-visited: #551a8b @@ -59,9 +60,12 @@ a.tag &::before content: "#" -h3.related +h2#related grid-column: main + display: flex + align-items: center + margin: 0 h2.title @@ -205,6 +209,15 @@ aside.gutter grid-column: gutter + > span + display: inline-flex + justify-content: center + font-size: 2em + color: var(--fg-color-gutter) + + margin: 0 + + img.avatar width: 100% diff --git a/templates/page.html b/templates/page.html index 95f2d62..32d6e4c 100644 --- a/templates/page.html +++ b/templates/page.html @@ -3,7 +3,8 @@ {%- block content %} {{ macros::render_post(post=page, class="single") }} {%- if "related" in page.extra and page.extra.related | length > 0 -%} -<h3 class="related">Related posts</h3> +<aside class="gutter"><span>§</span></aside> +<h2 id="related">Related posts</h2> {%- for ref in page.extra.related %} {%- set page = get_page(path=ref ~ "/index.md") -%} {{ macros::render_post(post=page, class="related") }} |