From aadd38bc3214bc8a39b52c1e17ebf8ccb88e9fa0 Mon Sep 17 00:00:00 2001
From: afterlifepro <vielle.dev@proton.me>
Date: Wed, 13 Aug 2025 23:45:57 +0100
Subject: [PATCH] Add styles to headings of posts and ensure a 10px padding on
 md boddies

---
 src/components/markdown.css    |  1 +
 src/pages/blog/[...slug].astro | 44 +++++++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/components/markdown.css b/src/components/markdown.css
index ad72af4..499bdd6 100644
--- a/src/components/markdown.css
+++ b/src/components/markdown.css
@@ -4,6 +4,7 @@
 article {
   /* comfy reading width centered */
   max-width: 60ch;
+  padding: 10px;
   margin: auto;
   --content-gap: 20px;
 
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 6c63e0f..785264b 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -3,6 +3,9 @@ import { getCollection } from "astro:content";
 import Base from "/components/Base.astro";
 import { render } from "astro:content";
 
+import Box2x1Mask from "/assets/box-2x1-mask.png";
+import Hr from "/assets/hr.png";
+
 import "/components/markdown.css";
 
 export async function getStaticPaths() {
@@ -34,7 +37,11 @@ const { Content } = await render(post);
     image: banner,
   }}
 >
-  <header>
+  <header
+    style={`
+      --box-2x1-mask-png: url(${Box2x1Mask.src});
+    `}
+  >
     <img src={banner} alt="" />
     <h1>{post.data.title}</h1>
     <time
@@ -45,7 +52,42 @@ const { Content } = await render(post);
     >
   </header>
 
+  <hr style={`--hr-png: url(${Hr.src});`} />
+
   <article>
     <Content />
   </article>
 </Base>
+
+<style>
+  header {
+    max-width: 60ch;
+    padding: 10px;
+    margin: auto;
+  }
+
+  img {
+    width: 100%;
+    aspect-ratio: 2;
+    object-fit: cover;
+    mask-image: var(--box-2x1-mask-png);
+    mask-size: 100%;
+  }
+
+  time {
+    color: #000000b0;
+  }
+
+  hr {
+    margin-block: 5px;
+    height: 5px;
+    border: none;
+    border-image: var(--hr-png) 0 5 fill / 0 5px round;
+    width: clamp(60ch, 80vw, 120ch);
+    margin-inline: auto;
+
+    @media (max-width: 60ch) {
+      width: 100%;
+    }
+  }
+</style>
-- 
2.51.2