From eb373a706fb2b3a74f685d619f6c29bf163a4889 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Sat, 5 Oct 2024 12:51:57 +0200
Subject: 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.
---
 sass/style.sass     | 15 ++++++++++++++-
 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") }}
-- 
cgit v1.2.3-2-gb3c3