141 lines
3.7 KiB
Text
141 lines
3.7 KiB
Text
---
|
|
import BaseLayout from "~/layouts/BaseLayout.astro";
|
|
import Eyebrow from "~/components/atoms/Eyebrow.astro";
|
|
import Mark from "~/components/atoms/Mark.astro";
|
|
import InkArrow from "~/components/atoms/InkArrow.astro";
|
|
import { blog, home } from "~/lib/urls";
|
|
---
|
|
|
|
<BaseLayout
|
|
title="Code — Josh Bairstow"
|
|
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">
|
|
<div>
|
|
<Eyebrow>Workshop · in progress</Eyebrow>
|
|
<h1 class="title">Code<span class="accent">.</span></h1>
|
|
<p class="count">Coming online · piece by piece</p>
|
|
</div>
|
|
<p class="blurb">
|
|
Small utilities, experiments, and the occasional tool worth writing down.
|
|
Nothing here yet — the workshop is still being arranged.
|
|
</p>
|
|
</header>
|
|
|
|
<section class="placeholder">
|
|
<p>
|
|
In the meantime, the writing index is the closest thing to a working log:
|
|
</p>
|
|
<a class="cta" href={blog("/")}>
|
|
<span class="u">Read the writing</span>
|
|
<InkArrow />
|
|
</a>
|
|
<a class="cta secondary" href={home("/")}>
|
|
<span class="u">Back to the index</span>
|
|
</a>
|
|
</section>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.masthead {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 0.9fr;
|
|
gap: clamp(30px, 6vw, 80px);
|
|
align-items: end;
|
|
padding: clamp(40px, 8vh, 96px) 0 clamp(30px, 5vh, 52px);
|
|
}
|
|
.masthead .title {
|
|
font-family: var(--font-display);
|
|
font-weight: 500;
|
|
font-size: clamp(56px, 9vw, 132px);
|
|
line-height: 0.9;
|
|
letter-spacing: -0.03em;
|
|
margin: 12px 0 0;
|
|
color: var(--fg-on-dark-1);
|
|
}
|
|
.masthead .title .accent { color: var(--accent-deep); }
|
|
:global(body:not(.dark)) .masthead .title { color: var(--fg-1); }
|
|
.masthead .count {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
color: var(--fg-on-dark-3);
|
|
margin-top: 16px;
|
|
font-feature-settings: "onum" 1;
|
|
}
|
|
.masthead .blurb {
|
|
font-family: var(--font-body);
|
|
font-weight: 300;
|
|
font-size: clamp(15px, 1.4vw, 18px);
|
|
line-height: 1.62;
|
|
color: var(--fg-on-dark-2);
|
|
max-width: 38ch;
|
|
margin: 0 0 6px;
|
|
}
|
|
:global(body:not(.dark)) .masthead .blurb { color: var(--fg-2); }
|
|
|
|
.placeholder {
|
|
padding: clamp(34px, 6vh, 72px) 0 0;
|
|
border-top: 1px solid var(--hairline-on-dark);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 18px;
|
|
}
|
|
:global(body:not(.dark)) .placeholder { border-top-color: var(--hairline); }
|
|
.placeholder p {
|
|
font-family: var(--font-body);
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
line-height: 1.62;
|
|
color: var(--fg-on-dark-2);
|
|
max-width: 50ch;
|
|
margin: 0;
|
|
}
|
|
:global(body:not(.dark)) .placeholder p { color: var(--fg-2); }
|
|
|
|
.cta {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
letter-spacing: 0.04em;
|
|
text-decoration: none;
|
|
color: var(--fg-on-dark-1);
|
|
white-space: nowrap;
|
|
}
|
|
:global(body:not(.dark)) .cta { color: var(--fg-1); }
|
|
.cta .u {
|
|
position: relative;
|
|
padding-bottom: 3px;
|
|
}
|
|
.cta .u::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
background: var(--accent);
|
|
}
|
|
.cta.secondary {
|
|
color: var(--fg-on-dark-2);
|
|
font-weight: 400;
|
|
}
|
|
.cta.secondary .u::after {
|
|
background: var(--hairline-on-dark);
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.masthead { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|