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."
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">
<Mark kind="pipes" width={30} top="-10px" left="-10px" rotate={-4} />
<div>
<Eyebrow>Workshop · in progress</Eyebrow>
<h1 class="title">Code<span class="accent">.</span></h1>
@ -30,6 +25,8 @@ import { blog, home } from "~/lib/urls";
</header>
<section class="placeholder">
<Mark kind="dots" width={48} top="-14px" right="-8px" />
<Mark kind="concentric" width={40} bottom="-12px" left="-8px" />
<p>
In the meantime, the writing index is the closest thing to a working log:
</p>
@ -45,6 +42,7 @@ import { blog, home } from "~/lib/urls";
<style>
.masthead {
position: relative;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
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); }
.placeholder {
position: relative;
padding: clamp(34px, 6vh, 72px) 0 0;
border-top: 1px solid var(--hairline-on-dark);
display: flex;