feat(site): fit phones, add the Docs pill, contact and a gentle reveal

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.

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,21 +16,24 @@ 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);
   }
 
   a {
     color: var(--muted);
     text-decoration: none;
+    transition: color 0.15s ease;
   }
 
-  a:hover {
+  a:hover,
+  a[aria-current='page'] {
     color: var(--text);
   }
 

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>

src/components/Question.astro

@@ -24,23 +24,47 @@ const { question } = Astro.props;
     align-items: center;
     gap: 16px;
     min-height: 44px;
-    font-size: 16px;
+    font-size: var(--small-size);
     font-weight: 600;
   }
 
   summary::-webkit-details-marker {
     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>

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();

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>

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>

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>