From b9986dee53964aec259f1661af79f889c9b41fd5 Mon Sep 17 00:00:00 2001
From: callumalpass <callumalpass@gmail.com>
Date: Sun, 27 Sep 2026 16:33:14 +1000
Subject: [PATCH] Add visible homepage headline and actions, fix homepage link
 colour

The homepage does not load global.css, so its links fell back to the
browser's default blue. Give home.css its own link rule matching the
rest of the site.

Replace the screen-reader-only h1 with a visible headline, add an
'Open the Editor' / 'Read the specification' action row, and shorten
the intro chapter to one viewport so the headline sits above the fold.
---
 src/pages/index.astro |  6 +++++-
 src/styles/home.css   | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3e42144..1e7a65e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,7 +11,7 @@ import HomeLayout from "../layouts/HomeLayout.astro";
   <main id="main" tabindex="-1">
     <section id="intro" class="chapter is-active" data-scene="intro" aria-label="Introduction">
       <div class="chapter__inner">
-        <h1 class="sr-only">mdbase</h1>
+        <h1 class="home-title">Structured data in ordinary Markdown files</h1>
         <p>
           An mdbase is a folder of Markdown files with enough shared structure
           for applications to understand them. The files remain readable in a
@@ -25,6 +25,10 @@ import HomeLayout from "../layouts/HomeLayout.astro";
           which applications may use it. If a collection remains on your
           computer, the mdbase Connector serves the folder locally.
         </p>
+        <div class="chapter__actions home-actions">
+          <a class="home-action home-action--primary" href="https://editor.mdbase.dev/">Open the Editor</a>
+          <a class="home-action" href="/spec/">Read the specification</a>
+        </div>
       </div>
     </section>
 
diff --git a/src/styles/home.css b/src/styles/home.css
index 5e3fe66..8b70acc 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -37,7 +37,8 @@
   align-items: center;
   scroll-margin-top: 120px;
 }
-.chapter:first-child { min-height: 126vh; }
+/* A full viewport keeps the headline above the fold beside the intro diagram. */
+.chapter:first-child { min-height: 100vh; }
 .chapter:last-child { min-height: 120vh; }
 
 .chapter__inner {
@@ -57,6 +58,38 @@
   letter-spacing: 0;
 }
 .home-body p { margin: 0 0 20px; }
+
+/* global.css is not loaded here, so homepage links need their own rule. */
+.home-body a {
+  color: var(--color-text);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+.home-body a:hover { color: var(--color-text-soft); }
+
+.home-body .home-title {
+  max-width: 18ch;
+  margin-bottom: 28px;
+  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
+  line-height: 1.12;
+  letter-spacing: -0.01em;
+}
+
+.chapter__actions.home-actions {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1.5rem;
+}
+.home-body .home-action--primary {
+  padding: 0.55rem 1rem;
+  border: 1px solid var(--color-text);
+  text-decoration: none;
+}
+.home-body .home-action--primary:hover {
+  color: var(--color-canvas);
+  background: var(--color-text);
+}
 .chapter__lead, .chapter__body { color: var(--color-text); }
 
 .file-tree,