initial commit

src/pages/code/index.astro

@@ -0,0 +1,141 @@
+---
+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>