From d71a7a214d4417f9dcdd4c9e18b66728696444a0 Mon Sep 17 00:00:00 2001
From: Josh Bairstow <joshbairstow@gmail.com>
Date: Wed, 3 Jun 2026 15:51:28 +1000
Subject: [PATCH] refactor(marks): anchor post layout marks to posthead and
 postnav

---
 src/layouts/PostLayout.astro | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
index 6828d3b..13cd0a0 100644
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -23,14 +23,10 @@ const dateFmt = new Intl.DateTimeFormat("en-AU", { month: "long", year: "numeric
   description={description ?? standfirst}
   current="blog"
 >
-  <Fragment slot="marks">
-    <Mark kind="ringdots" width={70} top="16%" left="4%" rotate={-6} />
-    <Mark kind="dots"     width={48} top="58%" right="3.5%" />
-    <Mark kind="pipes"    width={26} bottom="14%" left="6%" rotate={5} />
-  </Fragment>
-
   <article>
     <header class="posthead col">
+      <Mark kind="ringdots" width={70} top="-12px" left="-16px" rotate={-6} />
+      <Mark kind="dots"     width={48} top="-12px" right="-12px" />
       {(tag || series) && (
         <span class="kicker">
           {tag && <span class="tag">{tag}</span>}
@@ -53,6 +49,7 @@ const dateFmt = new Intl.DateTimeFormat("en-AU", { month: "long", year: "numeric
     </div>
 
     <nav class="postnav col-wide">
+      <Mark kind="pipes" width={26} bottom="-8px" left="-8px" rotate={5} />
       <a class="back" href={blog("/")}>
         <span class="lbl">← Back to writing</span>
       </a>
@@ -66,6 +63,7 @@ const dateFmt = new Intl.DateTimeFormat("en-AU", { month: "long", year: "numeric
   .col-wide { max-width: 940px; margin-left: auto; margin-right: auto; }
 
   .posthead {
+    position: relative;
     padding: clamp(40px, 8vh, 104px) 0 clamp(26px, 4vh, 44px);
     text-align: center;
   }
@@ -203,6 +201,7 @@ const dateFmt = new Intl.DateTimeFormat("en-AU", { month: "long", year: "numeric
   :global(body:not(.dark)) .prose :global(blockquote) { color: var(--fg-1); }
 
   .postnav {
+    position: relative;
     padding: clamp(40px, 6vh, 72px) 0 clamp(20px, 3vh, 32px);
     margin-top: clamp(30px, 5vh, 56px);
     border-top: 1px solid var(--hairline-on-dark);