summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorWolfgang Müller2024-10-05 12:51:57 +0200
committerWolfgang Müller2024-10-05 14:25:35 +0200
commiteb373a706fb2b3a74f685d619f6c29bf163a4889 (patch)
tree7002f1bc728fd78c5e2c8f2c696341d804ef2e94
parent2176cc7f6cf8c9e56dbc187361e5e3a6a5f8d96e (diff)
downloadzunzuncito-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.
Diffstat (limited to '')
-rw-r--r--sass/style.sass15
-rw-r--r--templates/page.html3
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") }}