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

refactor(marks): anchor blog index marks to section edges

Browse source
This commit is contained in:
Josh Bairstow 2026-06-03 15:50:16 +10:00
parent 91546ab393
commit 8bcd2486e3
1 changed files with 5 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/pages/blog/index.astro
View file

@ -59,14 +59,8 @@ for (const post of posts) {
description="Short pieces on craft, the ocean, and the quiet discipline of making small software." description="Short pieces on craft, the ocean, and the quiet discipline of making small software."
current="blog" current="blog"
> >
<Fragment slot="marks">
<Mark kind="dots" width={54} top="18%" right="4%" />
<Mark kind="concentric" width={40} top="64%" left="3%" rotate={6} />
<Mark kind="pipes" width={26} bottom="12%" right="9%" />
<Mark kind="ringdots" width={72} bottom="26%" left="46%" rotate={-4} />
</Fragment>
<header class="masthead"> <header class="masthead">
<Mark kind="ringdots" width={72} top="-12px" right="-14px" rotate={-4} />
<div> <div>
<Eyebrow>Journal · field notes</Eyebrow> <Eyebrow>Journal · field notes</Eyebrow>
<h1 class="title">Writing<span style="color:var(--accent-deep)">.</span></h1> <h1 class="title">Writing<span style="color:var(--accent-deep)">.</span></h1>
@ -109,6 +103,8 @@ for (const post of posts) {
} }
<section class="archive"> <section class="archive">
<Mark kind="dots" width={54} top="-14px" right="-10px" />
<Mark kind="concentric" width={40} bottom="-12px" left="-12px" rotate={6} />
{ {
yearGroups.map(([year, items]) => ( yearGroups.map(([year, items]) => (
<> <>
@ -135,6 +131,7 @@ for (const post of posts) {
<style> <style>
.masthead { .masthead {
position: relative;
display: grid; display: grid;
grid-template-columns: 1.1fr 0.9fr; grid-template-columns: 1.1fr 0.9fr;
gap: clamp(30px, 6vw, 80px); gap: clamp(30px, 6vw, 80px);
@ -256,6 +253,7 @@ for (const post of posts) {
} }
.archive { .archive {
position: relative;
padding: clamp(34px, 6vh, 72px) 0 0; padding: clamp(34px, 6vh, 72px) 0 0;
} }