From 17f912c1988b368bfd700dcc9e3619a811e76fd9 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:03:19 +0100
Subject: [PATCH 1/5] use grid instead of flexbox

Quality of life improvement as this handles 2 columns a bit nicer
overall

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_blog.scss | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/sass/_blog.scss b/sass/_blog.scss
index 71b4e29ea6..a41ccadaa5 100644
--- a/sass/_blog.scss
+++ b/sass/_blog.scss
@@ -29,7 +29,7 @@ article.post {
 
         td,
         th {
-            padding: .5rem;
+            padding: 0.5rem;
             border: unset;
             border-bottom: 1px solid var(--borders-color);
         }
@@ -74,13 +74,18 @@ article.post {
 
 .post-main {
     width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    align-self: center;
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: start;
+    gap: 2rem;
 
-    .callout {
+    @media (min-width: 1024px) {
+        &:has(aside) {
+            grid-template-columns: 1fr 320px;
+        }
+    }
 
+    .callout {
         display: grid;
         grid-template-columns: 300px auto;
         color: #fff;
@@ -119,7 +124,7 @@ article.post {
             font-size: 1.125rem;
             font-weight: 700;
             background-color: rgba(34, 109, 227);
-            padding: .5rem 1.5rem;
+            padding: 0.5rem 1.5rem;
             border-radius: 9999px;
             color: #fff;
             margin-block-start: 1rem;
@@ -144,26 +149,21 @@ article.post {
             }
         }
 
-        &>:first-child {
+        & > :first-child {
             margin-top: 0;
         }
 
-        &>ul>li:not(:last-child) {
-            margin-bottom: .5rem;
+        & > ul > li:not(:last-child) {
+            margin-bottom: 0.5rem;
         }
 
-        flex: 1 1;
-        max-width: 320px;
-        margin-left: 4rem;
         padding: 1.5rem;
         background-color: #f4f4f4;
     }
 }
 
 .post-content {
-    // Use all of the space not taken by the sidebar
-    flex: 3;
-    // Necessary to allow the pre to scroll on overflow
+    // min-width: 0 prevents grid blowout when content (e.g. pre blocks) is wider than the column
     min-width: 0;
 
     blockquote {
@@ -191,7 +191,7 @@ h3 a {
     color: var(--color-link);
 }
 
-.footnote-definition>p {
+.footnote-definition > p {
     display: inline;
 }
 

From 0151aaf6a66927ddde55721bd9ddb97f19e18468 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:09:07 +0100
Subject: [PATCH 2/5] visually seperate the metadata a bit

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_blog.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/sass/_blog.scss b/sass/_blog.scss
index a41ccadaa5..2942be92ec 100644
--- a/sass/_blog.scss
+++ b/sass/_blog.scss
@@ -69,6 +69,11 @@ article.post {
 
     header {
         margin-bottom: 1rem;
+
+        span {
+            font-size: 0.9rem;
+            color: var(--color-text-light);
+        }
     }
 }
 

From afedc58b7546c6af95f5d99ab3623363db81964e Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:09:25 +0100
Subject: [PATCH 3/5] make the blockquote border a little less big to have it
 less glarring on twim

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sass/_base.scss b/sass/_base.scss
index a47eff3442..f97e4eff91 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -82,7 +82,7 @@ table {
 blockquote {
     margin: 0 0 10px 0;
     padding: 10px 20px;
-    border-left: 5px solid #E2E2E2;
+    border-left: 3px solid var(--borders-color);
 }
 
 p:last-child,

From b43169df20327a96c64342ea6d5a698f1e2fe763 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:18:27 +0100
Subject: [PATCH 4/5] modernize the quote style

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_blog.scss | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/sass/_blog.scss b/sass/_blog.scss
index 2942be92ec..eeea49d2fa 100644
--- a/sass/_blog.scss
+++ b/sass/_blog.scss
@@ -172,6 +172,35 @@ article.post {
     min-width: 0;
 
     blockquote {
+        position: relative;
+        overflow: hidden;
+        border-left: none;
+        padding-left: 2rem;
+        margin: 0 0 1rem 0;
+
+        &::before,
+        &::after {
+            position: absolute;
+            color: #777;
+        }
+
+        // "//" rotated 90deg sits naturally at top-left
+        &::before {
+            content: "//";
+            transform: rotate(90deg);
+            left: 0;
+        }
+
+        // Thin vertical line below the slashes, clipped by overflow: hidden
+        &::after {
+            content: "";
+            left: 5px;
+            top: 40px;
+            width: 1px;
+            height: 100%;
+            background-color: currentColor;
+        }
+
         h2 {
             font-size: 1.5rem;
         }

From 97188368f330f162dc0a98f538c0fdc84d702ab3 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:42:39 +0100
Subject: [PATCH 5/5] make the post overview consistent with the blog posts

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 templates/blog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/blog.html b/templates/blog.html
index 9bb606d3e5..427d14ca8d 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -31,7 +31,7 @@ <h1><a href="{{ page.permalink }}" title="{{ page.title }}">{{ page.title }}</a>
             <small>Last update: {{ page.updated | date(format="%Y-%m-%d %H:%M") }}</small>
             {%- endif %}
         </header>
-        <div>
+        <div class="post-content">
             {% if page.summary -%}
             {{ page.summary | safe }}
             <p><a href="{{ page.path | safe }}#continue-reading">Continue reading…</a></p>