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

refactor(marks): anchor code page marks to section edges

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

11
src/pages/code/index.astro
View file

@ -11,13 +11,8 @@ import { blog, home } from "~/lib/urls";
description="Experiments and small tools. Coming online piece by piece." description="Experiments and small tools. Coming online piece by piece."
current="code" current="code"
> >
<Fragment slot="marks">
<Mark kind="pipes" width={30} top="22%" left="6%" rotate={-4} />
<Mark kind="dots" width={48} top="68%" right="6%" />
<Mark kind="concentric" width={40} bottom="12%" left="44%" />
</Fragment>
<header class="masthead"> <header class="masthead">
<Mark kind="pipes" width={30} top="-10px" left="-10px" rotate={-4} />
<div> <div>
<Eyebrow>Workshop · in progress</Eyebrow> <Eyebrow>Workshop · in progress</Eyebrow>
<h1 class="title">Code<span class="accent">.</span></h1> <h1 class="title">Code<span class="accent">.</span></h1>
@ -30,6 +25,8 @@ import { blog, home } from "~/lib/urls";
</header> </header>
<section class="placeholder"> <section class="placeholder">
<Mark kind="dots" width={48} top="-14px" right="-8px" />
<Mark kind="concentric" width={40} bottom="-12px" left="-8px" />
<p> <p>
In the meantime, the writing index is the closest thing to a working log: In the meantime, the writing index is the closest thing to a working log:
</p> </p>
@ -45,6 +42,7 @@ import { blog, home } from "~/lib/urls";
<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);
@ -82,6 +80,7 @@ import { blog, home } from "~/lib/urls";
:global(body:not(.dark)) .masthead .blurb { color: var(--fg-2); } :global(body:not(.dark)) .masthead .blurb { color: var(--fg-2); }
.placeholder { .placeholder {
position: relative;
padding: clamp(34px, 6vh, 72px) 0 0; padding: clamp(34px, 6vh, 72px) 0 0;
border-top: 1px solid var(--hairline-on-dark); border-top: 1px solid var(--hairline-on-dark);
display: flex; display: flex;