diff --git a/sass/_base.scss b/sass/_base.scss
index a47eff344..f97e4eff9 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,
diff --git a/sass/_blog.scss b/sass/_blog.scss
index 71b4e29ea..eeea49d2f 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);
         }
@@ -69,18 +69,28 @@ article.post {
 
     header {
         margin-bottom: 1rem;
+
+        span {
+            font-size: 0.9rem;
+            color: var(--color-text-light);
+        }
     }
 }
 
 .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 +129,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,29 +154,53 @@ 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 {
+        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;
         }
@@ -191,7 +225,7 @@ h3 a {
     color: var(--color-link);
 }
 
-.footnote-definition>p {
+.footnote-definition > p {
     display: inline;
 }
 
diff --git a/templates/blog.html b/templates/blog.html
index 9bb606d3e..427d14ca8 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>