From 1bfdb5e77f7ac9db1c43056eaa42e0621904bcb7 Mon Sep 17 00:00:00 2001
From: August Cayzer <a@cyzr.me>
Date: Wed, 21 Oct 2026 01:18:14 +0100
Subject: [PATCH] feat(site): fit phones, add the Docs pill, contact and a
 gentle reveal

---
 AGENTS.md                     |  4 +-
 src/components/Footer.astro   | 19 ++++----
 src/components/Header.astro   | 78 ++++++++++++++++++++++++++++++++
 src/components/Question.astro | 38 +++++++++++++---
 src/layouts/Base.astro        |  8 ++--
 src/pages/404.astro           |  2 +-
 src/pages/about.astro         | 11 +++--
 src/pages/index.astro         |  3 +-
 src/styles/global.css         | 83 ++++++++++++++++++++++++++++++-----
 9 files changed, 204 insertions(+), 42 deletions(-)
 create mode 100644 src/components/Header.astro

diff --git a/AGENTS.md b/AGENTS.md
index 419f441..4c37a66 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -15,8 +15,8 @@ The source of the public site at `withmarfa.com`: Astro, built to static files a
 ## Layout
 
 - `src/pages/`: one file per page. `404.astro` is what Cloudflare serves for a missing path.
-- `src/layouts/Base.astro`: the document head, the column and the footer, used by every page.
-- `src/components/`: the footer and the question that opens.
+- `src/layouts/Base.astro`: the document head, the header, the column and the footer, used by every page.
+- `src/components/`: the header (the Docs pill, and the way home on every other page), the footer (About, Contact and GitHub), and the question that opens.
 - `src/styles/global.css`: the color tokens, shared with the docs site's canvas and text colors. Light and dark follow the system; there is no toggle.
 - `src/lib/analytics.ts`: PostHog, loaded after the page.
 - `public/`: copied as is. `_headers` sets the security headers and the Content Security Policy.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 3ffe030..737965c 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,17 +1,13 @@
 ---
-interface Props {
-  link: { href: string; label: string };
-}
-
-const { link } = Astro.props;
+const path = Astro.url.pathname.replace(/(\/index)?\.html$/, '') || '/';
 ---
 
 <footer class="col">
   <span>© 2026 WithMarfa</span>
-  <nav aria-label="Links">
-    <a href={link.href}>{link.label}</a>
+  <nav aria-label="More">
+    <a href="/about" aria-current={path === '/about' ? 'page' : undefined}>About</a>
     <span class="bar" aria-hidden="true">|</span>
-    <a href="https://docs.marfa.so">Docs</a>
+    <a href="mailto:hello@withmarfa.com">Contact</a>
     <span class="bar" aria-hidden="true">|</span>
     <a href="https://github.com/withmarfa">GitHub</a>
   </nav>
@@ -20,11 +16,12 @@ const { link } = Astro.props;
 <style>
   footer {
     margin-top: auto;
-    padding: 28px 0 32px;
+    padding: 28px 0 max(32px, env(safe-area-inset-bottom));
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     justify-content: space-between;
+    align-items: center;
     font-size: 14px;
     color: var(--muted);
   }
@@ -32,9 +29,11 @@ const { link } = Astro.props;
   a {
     color: var(--muted);
     text-decoration: none;
+    transition: color 0.15s ease;
   }
 
-  a:hover {
+  a:hover,
+  a[aria-current='page'] {
     color: var(--text);
   }
 
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..c164dfb
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,78 @@
+---
+/** The docs, and on every page but home, the way back home. */
+const path = Astro.url.pathname.replace(/(\/index)?\.html$/, '') || '/';
+---
+
+<header class="col">
+  {path === '/' ? <span></span> : <a class="home" href="/">Marfa</a>}
+  <a class="docs" href="https://docs.marfa.so">
+    Docs
+    <svg viewBox="0 0 10 10" width="9" height="9" aria-hidden="true">
+      <path d="M2.5 7.5 7.5 2.5M3.5 2.5h4v4" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+  </a>
+</header>
+
+<style>
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 44px;
+    padding-top: var(--header-top);
+  }
+
+  .home {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    color: var(--text);
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    text-decoration: none;
+  }
+
+  /* A small translucent pill: quiet against the page in both themes. */
+  .docs {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 26px;
+    padding: 0 11px 0 12px;
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--text) 7%, transparent);
+    color: var(--text);
+    font-size: 13px;
+    font-weight: 500;
+    text-decoration: none;
+    transition:
+      background-color 0.15s ease,
+      transform 0.15s ease;
+  }
+
+  .docs:hover {
+    background: color-mix(in srgb, var(--text) 12%, transparent);
+  }
+
+  .docs:active {
+    transform: scale(0.97);
+  }
+
+  .docs svg {
+    opacity: 0.7;
+    transition: transform 0.15s ease;
+  }
+
+  .docs:hover svg {
+    transform: translate(1px, -1px);
+  }
+
+  /* The pill's 26px stays the look; this widens what a finger can hit. */
+  .docs::after {
+    content: '';
+    position: absolute;
+    inset: -9px -4px;
+  }
+</style>
diff --git a/src/components/Question.astro b/src/components/Question.astro
index 09899aa..60120db 100644
--- a/src/components/Question.astro
+++ b/src/components/Question.astro
@@ -24,7 +24,7 @@ const { question } = Astro.props;
     align-items: center;
     gap: 16px;
     min-height: 44px;
-    font-size: 16px;
+    font-size: var(--small-size);
     font-weight: 600;
   }
 
@@ -32,15 +32,39 @@ const { question } = Astro.props;
     display: none;
   }
 
+  /* A plus that turns into a minus. */
   summary::after {
-    content: '+';
-    font-weight: 400;
-    font-size: 20px;
-    color: var(--muted);
+    content: '';
+    flex: none;
+    width: 11px;
+    height: 11px;
+    background:
+      linear-gradient(var(--muted), var(--muted)) center / 11px 1.5px no-repeat,
+      linear-gradient(var(--muted), var(--muted)) center / 1.5px 11px no-repeat;
+    transition: transform 0.25s ease;
   }
 
   details[open] summary::after {
-    content: '−';
+    background: linear-gradient(var(--muted), var(--muted)) center / 11px 1.5px no-repeat;
+    transform: rotate(180deg);
+  }
+
+  summary:hover::after {
+    filter: contrast(1.6);
+  }
+
+  /* Opens and closes smoothly where the browser can animate it; elsewhere it
+     simply opens. */
+  details::details-content {
+    height: 0;
+    overflow: clip;
+    transition:
+      height 0.25s ease,
+      content-visibility 0.25s allow-discrete;
+  }
+
+  details[open]::details-content {
+    height: auto;
   }
 
   .answer {
@@ -49,6 +73,6 @@ const { question } = Astro.props;
 
   .answer :global(p) {
     margin: 0;
-    font-size: 16px;
+    font-size: var(--small-size);
   }
 </style>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index ba087d0..654ad90 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,17 +1,16 @@
 ---
 import '../styles/global.css';
+import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 
 interface Props {
   title: string;
   description: string;
-  /** The link the footer offers first: the page you are not on. */
-  footerLink: { href: string; label: string };
   /** Off for the 404 page, which has no address of its own. */
   indexable?: boolean;
 }
 
-const { title, description, footerLink, indexable = true } = Astro.props;
+const { title, description, indexable = true } = Astro.props;
 // Pages build to `about.html`, which Cloudflare serves at `/about`.
 const canonical = new URL(Astro.url.pathname.replace(/(\/index)?\.html$/, '') || '/', Astro.site);
 ---
@@ -36,10 +35,11 @@ const canonical = new URL(Astro.url.pathname.replace(/(\/index)?\.html$/, '') ||
     {indexable && <meta property="og:url" content={canonical} />}
   </head>
   <body>
+    <Header />
     <main class="col">
       <slot />
     </main>
-    <Footer link={footerLink} />
+    <Footer />
     <script>
       import { loadAnalytics } from '../lib/analytics';
       loadAnalytics();
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 4ace0e8..b4ecc5f 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -2,7 +2,7 @@
 import Base from '../layouts/Base.astro';
 ---
 
-<Base title="Page not found" description="This page doesn’t exist." footerLink={{ href: '/', label: 'Home' }} indexable={false}>
+<Base title="Page not found" description="This page doesn’t exist." indexable={false}>
   <h1>Page not found</h1>
   <p>There’s nothing at this address. <a href="/">Go to the home page</a>.</p>
 </Base>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index b817832..c106ca2 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -14,7 +14,6 @@ const next = [
 <Base
   title="About Marfa"
   description="How Marfa started, why it’s a personal project, and what’s next."
-  footerLink={{ href: '/', label: 'Home' }}
 >
   <h1>About</h1>
   <p>Marfa started as my own way of managing my data: one place that the apps and tools I use could all work from.</p>
@@ -39,6 +38,9 @@ const next = [
       ))
     }
   </ul>
+
+  <h2>Get in touch</h2>
+  <p>For questions, ideas or something you’ve built on Marfa, email <a href="mailto:hello@withmarfa.com">hello@withmarfa.com</a>.</p>
 </Base>
 
 <style>
@@ -53,7 +55,7 @@ const next = [
     grid-template-columns: 150px minmax(0, 1fr);
     gap: 16px;
     margin: 0 0 10px;
-    font-size: 17px;
+    font-size: var(--text-size);
     line-height: 1.55;
   }
 
@@ -69,10 +71,11 @@ const next = [
     color: var(--text);
   }
 
+  /* On a phone the period stays beside its step, in a narrower column. */
   @media (max-width: 560px) {
     .next li {
-      grid-template-columns: minmax(0, 1fr);
-      gap: 0;
+      grid-template-columns: 7.4em minmax(0, 1fr);
+      gap: 12px;
     }
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 07e1338..3c895a0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,7 +6,6 @@ import Question from '../components/Question.astro';
 <Base
   title="Marfa"
   description="Marfa is a shared, typed data layer for your apps. You define the kinds of things you keep and how they relate, and every app, agent or script you allow works from the same data."
-  footerLink={{ href: '/about', label: 'About' }}
 >
   <h1>Introducing Marfa</h1>
   <p>
@@ -47,6 +46,6 @@ import Question from '../components/Question.astro';
 
 <style>
   .questions {
-    margin-top: 32px;
+    margin-top: calc(var(--gap) * 1.6);
   }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
index 6729e1f..cdbb1c7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -9,6 +9,19 @@
   --rule: #e5e5e5;
   --line: #d4d4d4;
   --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
+
+  /* Type and spacing, smaller on phones (below). */
+  --gutter: 24px;
+  --text-size: 17px;
+  --text-leading: 1.65;
+  --small-size: 16px;
+  --title-size: 28px;
+  --gap: 20px;
+  --top: 56px;
+  --header-top: 24px;
+
+  /* Lets an opening question animate to its natural height where supported. */
+  interpolate-size: allow-keywords;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -21,6 +34,19 @@
   }
 }
 
+@media (max-width: 560px) {
+  :root {
+    --gutter: 20px;
+    --text-size: 15px;
+    --text-leading: 1.6;
+    --small-size: 15px;
+    --title-size: 24px;
+    --gap: 14px;
+    --top: 24px;
+    --header-top: 10px;
+  }
+}
+
 html {
   background: var(--bg);
   -webkit-text-size-adjust: 100%;
@@ -32,12 +58,17 @@ body {
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
-  padding: 0 24px;
+  padding: 0 var(--gutter);
   box-sizing: border-box;
   background: var(--bg);
   color: var(--text);
   font-family: var(--font);
   -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--text) 16%, transparent);
 }
 
 .col {
@@ -47,35 +78,39 @@ body {
 }
 
 main {
-  padding: 88px 0 48px;
+  padding: var(--top) 0 48px;
 }
 
 h1 {
-  margin: 0 0 28px;
-  font-size: 28px;
+  margin: 0 0 calc(var(--gap) + 8px);
+  font-size: var(--title-size);
   line-height: 1.2;
   font-weight: 600;
   letter-spacing: -0.015em;
+  text-wrap: balance;
 }
 
 h2 {
-  margin: 36px 0 14px;
-  font-size: 17px;
+  margin: calc(var(--gap) * 1.8) 0 calc(var(--gap) * 0.7);
+  font-size: var(--text-size);
   line-height: 1.4;
   font-weight: 600;
 }
 
 p {
-  margin: 0 0 20px;
-  font-size: 17px;
-  line-height: 1.65;
+  margin: 0 0 var(--gap);
+  font-size: var(--text-size);
+  line-height: var(--text-leading);
+  text-wrap: pretty;
 }
 
 a {
   color: var(--text);
   text-decoration: underline;
   text-decoration-color: var(--line);
+  text-decoration-thickness: 1px;
   text-underline-offset: 3px;
+  transition: text-decoration-color 0.15s ease;
 }
 
 a:hover {
@@ -88,8 +123,32 @@ a:hover {
   border-radius: 2px;
 }
 
-@media (max-width: 560px) {
-  main {
-    padding-top: 56px;
+/* The page's text settles in, one block after another, on load. */
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+main > * {
+  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+main > :nth-child(2) { animation-delay: 0.06s; }
+main > :nth-child(3) { animation-delay: 0.12s; }
+main > :nth-child(4) { animation-delay: 0.18s; }
+main > :nth-child(5) { animation-delay: 0.24s; }
+main > :nth-child(6) { animation-delay: 0.3s; }
+main > :nth-child(n + 7) { animation-delay: 0.36s; }
+
+@media (prefers-reduced-motion: reduce) {
+  main > * {
+    animation: none;
+  }
+
+  *,
+  ::details-content {
+    transition: none !important;
   }
 }