From f59842f8713454b3e4ff844ce5ba81bc61e01d99 Mon Sep 17 00:00:00 2001
From: afterlifepro <vielle.dev@proton.me>
Date: Mon, 25 Aug 2025 21:05:40 +0100
Subject: [PATCH] Change the [...slug] page so it doesnt look ugly as shit lmao

---
 src/assets/box-4x3-mask.png    | Bin 181 -> 196 bytes
 src/components/Markdown.astro  |   4 +--
 src/components/markdown.css    |  15 ++++++---
 src/pages/blog/[...slug].astro |  56 ++++++++++++++++++++++-----------
 4 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/src/assets/box-4x3-mask.png b/src/assets/box-4x3-mask.png
index 6e923f8909205973d2957ca133f9f074888c9ade..c655a99e062eb7458de7afc005a1ee684f2122da 100644
GIT binary patch
delta 147
zcmdnWc!Y6+Wqp~ai(^Pc>)YvpTnz?1&cYx6g|CZ0Bv3NhM@;d3{*==GOMF~24u1;>
zy}H-olcwFI<d)B}=X`##-p*>26AbBGz%^H0;)f%v@(LkG(QL;_Tf|t-Xmhv(s5fc-
zYuc-tVfsz<OxSWE$EknyF8F;vBUd~7`n&F(Uh>s33I^gGZ}NB;7#J8lUHx3vIVCg!
E03~NVL;wH)

delta 131
zcmX@YxRr5&Wlg%Li(^Pc>)RWKd<_Z$42}kW{-3@T;jvIWLMi->iO8{H=bQyop1j&S
zPx$>F$(f>c>1rRskH2f^Xq*CtA>R(nvNib2C)FY8A?dM{|4WFwq{r6&^z+(%Q~$rX
iaOcIm)ONjJObHX%%^l7Q<}olZFnGH9xvX<aXaWFf89KlK

diff --git a/src/components/Markdown.astro b/src/components/Markdown.astro
index 392e8b8..e2b72dd 100644
--- a/src/components/Markdown.astro
+++ b/src/components/Markdown.astro
@@ -32,10 +32,10 @@ const { frontmatter } = Astro.props;
     {frontmatter.graph?.image && <img src={frontmatter.graph.image} alt="" />}
     <h1>{frontmatter.title}</h1>
   </header>
-  
+
   <hr style={`--hr-png: url(${Hr.src});`} />
 
-  <article>
+  <article class="markdown-style">
     <slot />
   </article>
 </Base>
diff --git a/src/components/markdown.css b/src/components/markdown.css
index 499bdd6..1d9439f 100644
--- a/src/components/markdown.css
+++ b/src/components/markdown.css
@@ -1,7 +1,7 @@
 /* all styles should be scoped 
   to be child of article to avoid 
   conflicting other styles */
-article {
+.markdown-style {
   /* comfy reading width centered */
   max-width: 60ch;
   padding: 10px;
@@ -92,12 +92,16 @@ article {
       list-style-type: none;
 
       input {
-        margin-inline-end: .5em;
+        margin-inline-end: 0.5em;
       }
     }
   }
 
-  img, audio, video, iframe, svg {
+  img,
+  audio,
+  video,
+  iframe,
+  svg {
     width: 100%;
     height: auto;
   }
@@ -108,9 +112,10 @@ article {
       background: #00000020;
     }
 
-    th, td {
+    th,
+    td {
       padding: 5px;
-      border: 1px solid #00000040
+      border: 1px solid #00000040;
     }
   }
 }
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 1fc8d99..e118234 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -37,25 +37,31 @@ const { Content } = await render(post);
     image: banner,
   }}
 >
-  <header
-    style={`
+  <article>
+    <header
+      style={`
       --box-4x3-mask-png: url(${Box4x3Mask.src});
     `}
-  >
-    <img src={banner} alt="" />
-    <h1>{post.data.title}</h1>
-    <time
-      datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth()}-${post.data.pub.getDate()}`}
-      >{post.data.pub.getDate()}-{post.data.pub.getMonth()}-{
-        post.data.pub.getFullYear()
-      }</time
     >
-  </header>
+      <img src={banner} alt="" />
+      <div class="header">
+        <h1>{post.data.title}</h1>
+        <p>{post.data.bio}</p>
+        <time
+          datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()}`}
+        >
+          {post.data.pub.getDate()} -
+          {post.data.pub.getMonth() + 1} -
+          {post.data.pub.getFullYear()}
+        </time>
+      </div>
+    </header>
 
-  <hr style={`--hr-png: url(${Hr.src});`} />
+    <hr style={`--hr-png: url(${Hr.src});`} />
 
-  <article>
-    <Content />
+    <div class="markdown-style">
+      <Content />
+    </div>
   </article>
 </Base>
 
@@ -64,6 +70,21 @@ const { Content } = await render(post);
     max-width: 60ch;
     padding: 10px;
     margin: auto;
+
+    position: relative;
+  }
+
+  .header {
+    /* just use old layout on mobile
+    it works there */
+    @media not (max-width: 60ch) {
+      position: absolute;
+      inset: auto 50px 0;
+
+      background-image: var(--box-4x3-mask-png);
+      background-size: 100% 100%;
+      padding: 20px;
+    }
   }
 
   img {
@@ -83,11 +104,8 @@ const { Content } = await render(post);
     height: 5px;
     border: none;
     border-image: var(--hr-png) 0 5 fill / 0 5px round;
-    width: clamp(60ch, 80vw, 120ch);
+    width: 100%;
+    max-width: 70ch;
     margin-inline: auto;
-
-    @media (max-width: 60ch) {
-      width: 100%;
-    }
   }
 </style>
-- 
2.51.2