joshbairstow/jb-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(marks): anchor post layout marks to posthead and postnav

Browse source
This commit is contained in:
Josh Bairstow 2026-06-03 15:51:28 +10:00
parent 45e84c1856
commit d71a7a214d
1 changed files with 5 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/layouts/PostLayout.astro
View file

@ -23,14 +23,10 @@ const dateFmt = new Intl.DateTimeFormat("en-AU", { month: "long", year: "numeric
description={description ?? standfirst} description={description ?? standfirst}
current="blog" 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> <article>
<header class="posthead col"> <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) && ( {(tag || series) && (
<span class="kicker"> <span class="kicker">
{tag && <span class="tag">{tag}</span>} {tag && <span class="tag">{tag}</span>}
@ -53,6 +49,7 @@ const dateFmt = new Intl.DateTimeFormat("en-AU", { month: "long", year: "numeric
</div> </div>
<nav class="postnav col-wide"> <nav class="postnav col-wide">
<Mark kind="pipes" width={26} bottom="-8px" left="-8px" rotate={5} />
<a class="back" href={blog("/")}> <a class="back" href={blog("/")}>
<span class="lbl">← Back to writing</span> <span class="lbl">← Back to writing</span>
</a> </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; } .col-wide { max-width: 940px; margin-left: auto; margin-right: auto; }
.posthead { .posthead {
position: relative;
padding: clamp(40px, 8vh, 104px) 0 clamp(26px, 4vh, 44px); padding: clamp(40px, 8vh, 104px) 0 clamp(26px, 4vh, 44px);
text-align: center; 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); } :global(body:not(.dark)) .prose :global(blockquote) { color: var(--fg-1); }
.postnav { .postnav {
position: relative;
padding: clamp(40px, 6vh, 72px) 0 clamp(20px, 3vh, 32px); padding: clamp(40px, 6vh, 72px) 0 clamp(20px, 3vh, 32px);
margin-top: clamp(30px, 5vh, 56px); margin-top: clamp(30px, 5vh, 56px);
border-top: 1px solid var(--hairline-on-dark); border-top: 1px solid var(--hairline-on-dark);