From c8a10b3837f734e1af6077ed2cc6018e38cbdc3f Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Wed, 25 Mar 2026 00:25:11 +0000
Subject: [PATCH 1/2] Split pages and refactor navigation styles

---
 site/demo.css   | 299 ++++++++++++++++++++++++++++++
 site/demo.html  | 152 +++++++++++++++
 site/global.css | 217 ++++++++++++++++++++++
 site/index.html | 128 +++++--------
 site/style.css  | 478 ++----------------------------------------------
 5 files changed, 728 insertions(+), 546 deletions(-)
 create mode 100644 site/demo.css
 create mode 100644 site/demo.html
 create mode 100644 site/global.css

diff --git a/site/demo.css b/site/demo.css
new file mode 100644
index 0000000..c431203
--- /dev/null
+++ b/site/demo.css
@@ -0,0 +1,299 @@
+/* ── Demo view ──────────────────────────────────────────────────────── */
+
+.demo-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.demo-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 18.75rem;
+  flex-shrink: 0;
+  background: var(--mantle);
+  border-right: 0.0625rem solid var(--surface0);
+  padding: 0.75rem 0;
+  overflow-y: auto;
+}
+
+.sidebar-heading {
+  padding: 0.375rem 1rem 0.625rem;
+  font-weight: 600;
+  color: var(--overlay0);
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem 1rem;
+  cursor: pointer;
+  transition: background 0.12s;
+  border-left: 0.1875rem solid transparent;
+}
+
+.sidebar-item:hover {
+  background: var(--surface0);
+}
+
+.sidebar-item.active {
+  background: var(--surface0);
+  border-left-color: var(--cyan);
+}
+
+.sidebar-badge {
+  width: 1.875rem;
+  height: 1.375rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  flex-shrink: 0;
+  color: var(--mantle);
+}
+
+.sidebar-badge.lang-JS {
+  background: var(--yellow);
+}
+.sidebar-badge.lang-PY {
+  background: var(--blue);
+}
+.sidebar-badge.lang-RB {
+  background: var(--red);
+}
+.sidebar-badge.lang-TS {
+  background: var(--cyan);
+}
+.sidebar-badge.lang-GO {
+  background: var(--green);
+}
+
+.sidebar-info {
+  min-width: 0;
+}
+
+.sidebar-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-bottom: 0.25rem;
+  text-overflow: ellipsis;
+}
+
+.sidebar-desc {
+  font-size: 0.75rem;
+  color: var(--overlay0);
+}
+
+/* Terminal */
+.terminal-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.terminal {
+  position: relative;
+  flex: 1;
+  padding: 1rem 1.25rem;
+  overflow-y: auto;
+  outline: none;
+  line-height: 1.6;
+  cursor: text;
+}
+
+.terminal-hidden-input {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  font-size: 16px; /* >= 16px prevents iOS auto-zoom on focus */
+}
+
+.terminal::-webkit-scrollbar {
+  width: 0.375rem;
+}
+.terminal::-webkit-scrollbar-track {
+  background: transparent;
+}
+.terminal::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 0.1875rem;
+}
+
+/* Terminal line types */
+.t-line {
+  white-space: pre-wrap;
+  word-break: break-all;
+  min-height: 1.6em;
+}
+
+.t-prompt {
+  color: var(--overlay0);
+}
+
+.t-prompt .t-input {
+  color: var(--text);
+}
+
+.t-cursor {
+  display: inline-block;
+  width: 0.5rem;
+  height: 1.1em;
+  background: var(--text);
+  vertical-align: text-bottom;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.t-header {
+  color: var(--cyan);
+  font-weight: 700;
+}
+
+.t-subheader {
+  color: var(--magenta);
+  font-weight: 700;
+}
+
+.t-command {
+  color: var(--green);
+}
+
+.t-prose {
+  color: var(--overlay0);
+}
+
+.t-dim {
+  color: var(--overlay0);
+}
+
+.t-yellow {
+  color: var(--yellow);
+}
+
+.t-green {
+  color: var(--green);
+}
+
+.t-bold {
+  font-weight: 700;
+}
+
+.t-title-line {
+  color: var(--text);
+  font-weight: 700;
+}
+
+/* Picker */
+.picker-row {
+  white-space: pre;
+  min-height: 1.6em;
+}
+
+.picker-row.selected {
+  background: var(--surface0);
+  border-radius: 0.1875rem;
+}
+
+.picker-row .arrow {
+  color: var(--yellow);
+  font-weight: 700;
+}
+
+.picker-footer {
+  color: var(--overlay0);
+  min-height: 1.6em;
+  white-space: pre;
+}
+
+.flash-msg {
+  color: var(--green);
+  font-weight: 600;
+}
+
+.flash-msg.flash-execute {
+  color: var(--yellow);
+  font-style: italic;
+}
+
+/* Hints bar */
+.hints {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  background: var(--mantle);
+  border-top: 0.0625rem solid var(--surface0);
+  color: var(--overlay0);
+  flex-shrink: 0;
+  line-height: 2;
+}
+
+.hints code {
+  background: var(--surface0);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  color: var(--text);
+}
+
+/* ── Responsive ─────────────────────────────────────────────────────── */
+
+@media (max-width: 43.75rem) {
+  /* Demo */
+  .demo-layout {
+    flex-direction: column;
+  }
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 0.0625rem solid var(--surface0);
+    padding: 0.5rem 0;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-shrink: 0;
+  }
+  .sidebar-item {
+    flex-shrink: 0;
+    padding: 0.375rem 0.875rem;
+    border-left: none;
+    border-bottom: 0.1875rem solid transparent;
+  }
+  .sidebar-item.active {
+    border-left-color: transparent;
+    border-bottom-color: var(--cyan);
+  }
+  .sidebar-heading {
+    flex-shrink: 0;
+    padding: 0.375rem 0.875rem;
+    display: flex;
+    align-items: center;
+  }
+  .sidebar-desc {
+    display: none;
+  }
+}
diff --git a/site/demo.html b/site/demo.html
new file mode 100644
index 0000000..f97edcb
--- /dev/null
+++ b/site/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>hdi - Interactive demo</title>
+    <meta
+      name="description"
+      content="CLI tool that scans a project's README and extracts the commands you need to get it running. No dependencies, just Bash."
+    />
+    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="global.css" />
+    <link rel="stylesheet" href="demo.css" />
+    <script
+      defer
+      data-domain="hdi.gregdev.com"
+      src="https://analytics.gregdev.com/js/script.file-downloads.hash.outbound-links.js"
+    ></script>
+    <script>
+      window.plausible =
+        window.plausible ||
+        function () {
+          (window.plausible.q = window.plausible.q || []).push(arguments);
+        };
+    </script>
+  </head>
+  <body>
+    <h1 class="visually-hidden">hdi interactive demo</h1>
+    <header class="header">
+      <div class="header-left">
+        <nav class="tabs">
+          <a class="nav-back" href="/"><span><- Exit demo</span></a>
+        </nav>
+      </div>
+      <div class="header-right">
+        <a
+          href="https://github.com/grega/hdi"
+          class="gh-link"
+          target="_blank"
+          title="hdi on GitHub"
+          rel="noopener"
+        >
+          <svg
+            width="128"
+            height="128"
+            viewBox="0 0 128 128"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="gh-logo"
+          >
+            <path
+              d="M56.7937 84.9688C44.4187 83.4688 35.7 74.5625 35.7 63.0313C35.7 58.3438 37.3875 53.2813 40.2 49.9063C38.9812 46.8125 39.1687 40.25 40.575 37.5313C44.325 37.0625 49.3875 39.0313 52.3875 41.75C55.95 40.625 59.7 40.0625 64.2937 40.0625C68.8875 40.0625 72.6375 40.625 76.0125 41.6563C78.9187 39.0313 84.075 37.0625 87.825 37.5313C89.1375 40.0625 89.325 46.625 88.1062 49.8125C91.1062 53.375 92.7 58.1563 92.7 63.0313C92.7 74.5625 83.9812 83.2813 71.4187 84.875C74.6062 86.9375 76.7625 91.4375 76.7625 96.5938L76.7625 106.344C76.7625 109.156 79.1062 110.75 81.9187 109.625C98.8875 103.156 112.2 86.1875 112.2 65.1875C112.2 38.6563 90.6375 17 64.1062 17C37.575 17 16.2 38.6562 16.2 65.1875C16.2 86 29.4187 103.25 47.2312 109.719C49.7625 110.656 52.2 108.969 52.2 106.438L52.2 98.9375C50.8875 99.5 49.2 99.875 47.7 99.875C41.5125 99.875 37.8562 96.5 35.2312 90.2188C34.2 87.6875 33.075 86.1875 30.9187 85.9063C29.7937 85.8125 29.4187 85.3438 29.4187 84.7813C29.4187 83.6563 31.2937 82.8125 33.1687 82.8125C35.8875 82.8125 38.2312 84.5 40.6687 87.9688C42.5437 90.6875 44.5125 91.9063 46.8562 91.9063C49.2 91.9063 50.7 91.0625 52.8562 88.9063C54.45 87.3125 55.6687 85.9063 56.7937 84.9688Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span class="version">v0.20.0</span>
+
+          <!-- <img class="github-logo" src="./GitHub.svg" alt="GitHub" /> -->
+        </a>
+      </div>
+    </header>
+
+    <main class="demo-view" id="demo-view">
+      <div class="demo-layout">
+        <aside class="sidebar" id="sidebar"></aside>
+        <section class="terminal-wrap">
+          <div class="terminal" id="terminal" tabindex="0">
+            <input
+              id="terminal-input"
+              title="Terminal input"
+              class="terminal-hidden-input"
+              autocomplete="off"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+            />
+          </div>
+        </section>
+      </div>
+      <footer class="hints" id="hints">
+        Try: <code>hdi</code> <code>hdi install</code> <code>hdi run</code>
+        <code>hdi test</code> <code>hdi all</code> <code>hdi check</code>
+        <code>hdi --full</code> <code>hdi --raw</code>
+      </footer>
+    </main>
+
+    <script src="data.js"></script>
+    <script src="picker.js"></script>
+    <script src="terminal.js"></script>
+    <script>
+      (function () {
+        var tabs = document.querySelectorAll(".tab");
+        var aboutView = document.getElementById("about");
+        var demoView = document.getElementById("demo-view");
+
+        function switchTab(name, pushState) {
+          tabs.forEach(function (t) {
+            t.classList.remove("active");
+          });
+          document
+            .querySelector('.tab[data-tab="' + name + '"]')
+            .classList.add("active");
+
+          if (name === "about") {
+            aboutView.classList.remove("hidden");
+            demoView.classList.add("hidden");
+          } else {
+            aboutView.classList.add("hidden");
+            demoView.classList.remove("hidden");
+            document.getElementById("terminal-input").focus();
+          }
+
+          if (pushState) {
+            var hash = name === "about" ? "" : "#demo";
+            history.pushState(null, "", location.pathname + hash);
+          }
+        }
+
+        tabs.forEach(function (tab) {
+          tab.addEventListener("click", function () {
+            switchTab(tab.dataset.tab, true);
+          });
+        });
+
+        // Handle back/forward navigation
+        window.addEventListener("popstate", function () {
+          switchTab(location.hash === "#demo" ? "demo" : "about", false);
+        });
+
+        // Restore tab from URL on load
+        if (location.hash === "#demo") {
+          switchTab("demo", false);
+        }
+      })();
+
+      // Copy buttons
+      document.querySelectorAll(".copy-btn").forEach(function (btn) {
+        btn.addEventListener("click", function () {
+          navigator.clipboard.writeText(btn.dataset.copy).then(function () {
+            var original = btn.textContent;
+            btn.textContent = "Copied!";
+            btn.classList.add("copied");
+            setTimeout(function () {
+              btn.textContent = original;
+              btn.classList.remove("copied");
+            }, 1500);
+          });
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/site/global.css b/site/global.css
new file mode 100644
index 0000000..68194c5
--- /dev/null
+++ b/site/global.css
@@ -0,0 +1,217 @@
+@import url("https://fonts.cdnfonts.com/css/jetbrains-mono");
+
+/* ── Reset ─────────────────────────────────────────────────────────── */
+
+:root {
+  /* Catppuccin Mocha palette */
+  --base: #1e1e2e;
+  --mantle: #181825;
+  --surface0: #313244;
+  --surface1: #45475a;
+  --overlay0: #6c7086;
+  --text: #cdd6f4;
+  --subtext0: #a6adc8;
+  --green: #a6e3a1;
+  --cyan: #89dceb;
+  --yellow: #f9e2af;
+  --magenta: #cba6f7;
+  --red: #f38ba8;
+  --blue: #89b4fa;
+  --font-mono:
+    "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  min-height: 100vh;
+  background: var(--base);
+  color: var(--text);
+  font-family: var(--font-mono);
+  display: flex;
+  flex-direction: column;
+}
+
+.hidden {
+  display: none !important;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+a {
+  color: var(--text);
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline-offset: 3px;
+  outline: 2px solid currentColor;
+}
+
+a:hover {
+  color: var(--subtext0);
+}
+
+/* ── Utilities ─────────────────────────────────────────────────────────── */
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.stack > * {
+  margin-block: 0;
+}
+
+.stack > * + * {
+  margin-block-start: var(--space, 1.5rem);
+}
+
+/* ── Button ─────────────────────────────────────────────────────────── */
+
+button,
+.button {
+  border: none;
+  font: inherit;
+  text-decoration: none;
+  background-color: var(--text);
+  color: var(--base);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-weight: 800;
+  line-height: 1.5;
+  /* min-block-size: 40px; */
+  cursor: pointer;
+
+  transition: background-color 0.1s linear;
+
+  &:hover {
+    color: var(--base);
+    background-color: var(--subtext0);
+  }
+
+  &:focus-visible {
+    outline-offset: 3px;
+    outline: 2px solid var(--text);
+  }
+}
+
+/* ── Header ─────────────────────────────────────────────────────────── */
+
+.nav-back {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  min-block-size: 44px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  background: var(--mantle);
+  border-bottom: 0.0625rem solid var(--surface0);
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.logo {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--yellow);
+}
+
+.logo a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.tab {
+  background: none;
+  border: none;
+  color: var(--overlay0);
+  font-family: var(--font-mono);
+  font-size: 0.9375rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+
+.tab:hover {
+  background: var(--surface0);
+  color: var(--text);
+}
+
+.tab.active {
+  background: var(--surface0);
+  color: var(--text);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+}
+
+/* ── Github link ─────────────────────────────────────────────────────────── */
+
+.gh-logo {
+  width: 24px;
+  height: auto;
+}
+
+.gh-link {
+  transition: color 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
diff --git a/site/index.html b/site/index.html
index cdc559e..4cb5139 100644
--- a/site/index.html
+++ b/site/index.html
@@ -9,6 +9,7 @@
       content="CLI tool that scans a project's README and extracts the commands you need to get it running. No dependencies, just Bash."
     />
     <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="global.css" />
     <link rel="stylesheet" href="style.css" />
     <script
       defer
@@ -24,46 +25,47 @@
     </script>
   </head>
   <body>
-    <header class="header">
-      <div class="header-left">
-        <span class="logo"><a href="/">[hdi]</a></span>
-        <nav class="tabs">
-          <button class="tab active" data-tab="about">About</button>
-          <button class="tab" data-tab="demo">Interactive demo</button>
-        </nav>
-      </div>
-      <div class="header-right">
-        <a
-          href="https://github.com/grega/hdi"
-          class="gh-link"
-          target="_blank"
-          title="hdi on GitHub"
-          rel="noopener"
-        >
-          <span class="version">v0.20.0</span>
-          <svg width="25" height="25" viewBox="0 0 16 16" fill="currentColor">
-            <path
-              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
-            />
-          </svg>
-        </a>
-      </div>
-    </header>
-
     <main class="about" id="about">
-      <section class="hero">
-        <pre class="hero-logo" role="img" aria-label="hdi">
- _____ _____ _____ 
-||<span class="hero-logo-letter ">h</span>  |||<span class="hero-logo-letter ">d</span>  |||<span class="hero-logo-letter ">i</span>  ||
-||___|||___|||___||
-|/___\|/___\|/___\|
-        </pre>
-        <h1 class="hero-sub">No more searching the README.</h1>
-        <p class="hero-sub">
-          "How do I" surfaces <code>install</code>, <code>run</code>,
-          <code>test</code> and <code>deploy</code> steps and commands all in
-          your terminal.
-        </p>
+      <section class="hero stack">
+        <header class="hero-header stack">
+          <pre class="hero-logo" role="img" aria-label="hdi">
+   _____ _____ _____ 
+  ||<span class="hero-logo-letter ">h</span>  |||<span class="hero-logo-letter ">d</span>  |||<span class="hero-logo-letter ">i</span>  ||
+  ||___|||___|||___||
+  |/___\|/___\|/___\|
+          </pre>
+          <a
+            href="https://github.com/grega/hdi"
+            class="gh-link"
+            target="_blank"
+            title="hdi on GitHub"
+            rel="noopener"
+          >
+            <svg
+              width="128"
+              height="128"
+              viewBox="0 0 128 128"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="gh-logo"
+            >
+              <path
+                d="M56.7937 84.9688C44.4187 83.4688 35.7 74.5625 35.7 63.0313C35.7 58.3438 37.3875 53.2813 40.2 49.9063C38.9812 46.8125 39.1687 40.25 40.575 37.5313C44.325 37.0625 49.3875 39.0313 52.3875 41.75C55.95 40.625 59.7 40.0625 64.2937 40.0625C68.8875 40.0625 72.6375 40.625 76.0125 41.6563C78.9187 39.0313 84.075 37.0625 87.825 37.5313C89.1375 40.0625 89.325 46.625 88.1062 49.8125C91.1062 53.375 92.7 58.1563 92.7 63.0313C92.7 74.5625 83.9812 83.2813 71.4187 84.875C74.6062 86.9375 76.7625 91.4375 76.7625 96.5938L76.7625 106.344C76.7625 109.156 79.1062 110.75 81.9187 109.625C98.8875 103.156 112.2 86.1875 112.2 65.1875C112.2 38.6563 90.6375 17 64.1062 17C37.575 17 16.2 38.6562 16.2 65.1875C16.2 86 29.4187 103.25 47.2312 109.719C49.7625 110.656 52.2 108.969 52.2 106.438L52.2 98.9375C50.8875 99.5 49.2 99.875 47.7 99.875C41.5125 99.875 37.8562 96.5 35.2312 90.2188C34.2 87.6875 33.075 86.1875 30.9187 85.9063C29.7937 85.8125 29.4187 85.3438 29.4187 84.7813C29.4187 83.6563 31.2937 82.8125 33.1687 82.8125C35.8875 82.8125 38.2312 84.5 40.6687 87.9688C42.5437 90.6875 44.5125 91.9063 46.8562 91.9063C49.2 91.9063 50.7 91.0625 52.8562 88.9063C54.45 87.3125 55.6687 85.9063 56.7937 84.9688Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span class="version">v0.20.0</span>
+          </a>
+        </header>
+        <div class="hero-content stack">
+          <h1 class="hero-text">No more searching the README.</h1>
+          <p class="hero-text">
+            "How do I" surfaces <code>install</code>, <code>run</code>,
+            <code>test</code> and <code>deploy</code> steps and commands all in
+            your terminal.
+          </p>
+          <a class="button" href="./demo.html">Interactive demo -></a>
+        </div>
       </section>
 
       <section class="install-section">
@@ -186,55 +188,7 @@ <h2>Usage</h2>
       </footer>
     </main>
 
-    <script src="data.js"></script>
-    <script src="picker.js"></script>
-    <script src="terminal.js"></script>
     <script>
-      (function () {
-        var tabs = document.querySelectorAll(".tab");
-        var aboutView = document.getElementById("about");
-        var demoView = document.getElementById("demo-view");
-
-        function switchTab(name, pushState) {
-          tabs.forEach(function (t) {
-            t.classList.remove("active");
-          });
-          document
-            .querySelector('.tab[data-tab="' + name + '"]')
-            .classList.add("active");
-
-          if (name === "about") {
-            aboutView.classList.remove("hidden");
-            demoView.classList.add("hidden");
-          } else {
-            aboutView.classList.add("hidden");
-            demoView.classList.remove("hidden");
-            document.getElementById("terminal-input").focus();
-          }
-
-          if (pushState) {
-            var hash = name === "about" ? "" : "#demo";
-            history.pushState(null, "", location.pathname + hash);
-          }
-        }
-
-        tabs.forEach(function (tab) {
-          tab.addEventListener("click", function () {
-            switchTab(tab.dataset.tab, true);
-          });
-        });
-
-        // Handle back/forward navigation
-        window.addEventListener("popstate", function () {
-          switchTab(location.hash === "#demo" ? "demo" : "about", false);
-        });
-
-        // Restore tab from URL on load
-        if (location.hash === "#demo") {
-          switchTab("demo", false);
-        }
-      })();
-
       // Copy buttons
       document.querySelectorAll(".copy-btn").forEach(function (btn) {
         btn.addEventListener("click", function () {
diff --git a/site/style.css b/site/style.css
index 1504db5..3d344f7 100644
--- a/site/style.css
+++ b/site/style.css
@@ -1,143 +1,3 @@
-/* Catppuccin Mocha palette */
-:root {
-  --base: #1e1e2e;
-  --mantle: #181825;
-  --surface0: #313244;
-  --surface1: #45475a;
-  --overlay0: #6c7086;
-  --text: #cdd6f4;
-  --subtext0: #a6adc8;
-  --green: #a6e3a1;
-  --cyan: #89dceb;
-  --yellow: #f9e2af;
-  --magenta: #cba6f7;
-  --red: #f38ba8;
-  --blue: #89b4fa;
-  --font-mono:
-    "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-}
-
-body {
-  min-height: 100vh;
-  background: var(--base);
-  color: var(--text);
-  font-family: var(--font-mono);
-  display: flex;
-  flex-direction: column;
-}
-
-.hidden {
-  display: none !important;
-}
-
-h1,
-h2,
-h3,
-h4 {
-  text-wrap: balance;
-}
-
-p {
-  text-wrap: pretty;
-}
-/* ── Header ─────────────────────────────────────────────────────────── */
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1.25rem;
-  background: var(--mantle);
-  border-bottom: 0.0625rem solid var(--surface0);
-  flex-shrink: 0;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.logo {
-  font-weight: 700;
-  font-size: 1.125rem;
-  color: var(--yellow);
-}
-
-.logo a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.tabs {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.tab {
-  background: none;
-  border: none;
-  color: var(--overlay0);
-  font-family: var(--font-mono);
-  font-size: 0.9375rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  transition:
-    background 0.12s,
-    color 0.12s;
-}
-
-.tab:hover {
-  background: var(--surface0);
-  color: var(--text);
-}
-
-.tab.active {
-  background: var(--surface0);
-  color: var(--text);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 0.875rem;
-}
-
-.version {
-  color: var(--overlay0);
-  transform: translateY(1px);
-}
-
-.version:hover {
-  color: var(--text);
-}
-
-.gh-link {
-  color: var(--overlay0);
-  transition: color 0.15s;
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  text-decoration: none;
-}
-
-.gh-link:hover {
-  color: var(--text);
-}
-
 /* ── About page ─────────────────────────────────────────────────────── */
 
 .about {
@@ -181,14 +41,20 @@ p {
 }
 
 /* Hero */
+
 .hero {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 2rem;
   align-items: center;
   text-align: center;
 }
 
+.hero-header {
+  align-items: center;
+  --space: 0;
+}
+
 .hero-logo {
   font-size: 1.5rem;
 
@@ -205,7 +71,12 @@ p {
   color: var(--yellow);
 }
 
-.hero-sub {
+.hero-content {
+  align-items: center;
+  --space: 1.5rem;
+}
+
+.hero-text {
   font-size: 1.25rem;
   line-height: 1.5;
   max-inline-size: 55ch;
@@ -285,7 +156,7 @@ p {
   top: 50%;
   transform: translateY(-50%);
   right: 0.5rem;
-  background: var(--surface0);
+  /* background: var(--surface0);
   border: 0.0625rem solid var(--surface1);
   color: var(--overlay0);
   font-family: var(--font-mono);
@@ -294,18 +165,18 @@ p {
   cursor: pointer;
   transition:
     color 0.15s,
-    border-color 0.15s;
+    border-color 0.15s; */
 }
 
-.copy-btn:hover {
+/* .copy-btn:hover {
   color: var(--text);
   border-color: var(--overlay0);
-}
+} */
 
-.copy-btn.copied {
+/* .copy-btn.copied {
   color: var(--green);
   border-color: var(--green);
-}
+} */
 
 .install-method code {
   color: var(--green);
@@ -353,286 +224,9 @@ p {
   text-decoration: underline;
 }
 
-/* Links */
-
-/* ── Demo view ──────────────────────────────────────────────────────── */
-
-.demo-view {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.demo-layout {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-/* Sidebar */
-.sidebar {
-  width: 18.75rem;
-  flex-shrink: 0;
-  background: var(--mantle);
-  border-right: 0.0625rem solid var(--surface0);
-  padding: 0.75rem 0;
-  overflow-y: auto;
-}
-
-.sidebar-heading {
-  padding: 0.375rem 1rem 0.625rem;
-  font-weight: 600;
-  color: var(--overlay0);
-}
-
-.sidebar-item {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem 1rem;
-  cursor: pointer;
-  transition: background 0.12s;
-  border-left: 0.1875rem solid transparent;
-}
-
-.sidebar-item:hover {
-  background: var(--surface0);
-}
-
-.sidebar-item.active {
-  background: var(--surface0);
-  border-left-color: var(--cyan);
-}
-
-.sidebar-badge {
-  width: 1.875rem;
-  height: 1.375rem;
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  flex-shrink: 0;
-  color: var(--mantle);
-}
-
-.sidebar-badge.lang-JS {
-  background: var(--yellow);
-}
-.sidebar-badge.lang-PY {
-  background: var(--blue);
-}
-.sidebar-badge.lang-RB {
-  background: var(--red);
-}
-.sidebar-badge.lang-TS {
-  background: var(--cyan);
-}
-.sidebar-badge.lang-GO {
-  background: var(--green);
-}
-
-.sidebar-info {
-  min-width: 0;
-}
-
-.sidebar-name {
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-bottom: 0.25rem;
-  text-overflow: ellipsis;
-}
-
-.sidebar-desc {
-  font-size: 0.75rem;
-  color: var(--overlay0);
-}
-
-/* Terminal */
-.terminal-wrap {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-}
-
-.terminal {
-  position: relative;
-  flex: 1;
-  padding: 1rem 1.25rem;
-  overflow-y: auto;
-  outline: none;
-  line-height: 1.6;
-  cursor: text;
-}
-
-.terminal-hidden-input {
-  position: absolute;
-  left: -9999px;
-  top: 0;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  font-size: 16px; /* >= 16px prevents iOS auto-zoom on focus */
-}
-
-.terminal::-webkit-scrollbar {
-  width: 0.375rem;
-}
-.terminal::-webkit-scrollbar-track {
-  background: transparent;
-}
-.terminal::-webkit-scrollbar-thumb {
-  background: var(--surface1);
-  border-radius: 0.1875rem;
-}
-
-/* Terminal line types */
-.t-line {
-  white-space: pre-wrap;
-  word-break: break-all;
-  min-height: 1.6em;
-}
-
-.t-prompt {
-  color: var(--overlay0);
-}
-
-.t-prompt .t-input {
-  color: var(--text);
-}
-
-.t-cursor {
-  display: inline-block;
-  width: 0.5rem;
-  height: 1.1em;
-  background: var(--text);
-  vertical-align: text-bottom;
-  animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-  50% {
-    opacity: 0;
-  }
-}
-
-.t-header {
-  color: var(--cyan);
-  font-weight: 700;
-}
-
-.t-subheader {
-  color: var(--magenta);
-  font-weight: 700;
-}
-
-.t-command {
-  color: var(--green);
-}
-
-.t-prose {
-  color: var(--overlay0);
-}
-
-.t-dim {
-  color: var(--overlay0);
-}
-
-.t-yellow {
-  color: var(--yellow);
-}
-
-.t-green {
-  color: var(--green);
-}
-
-.t-bold {
-  font-weight: 700;
-}
-
-.t-title-line {
-  color: var(--text);
-  font-weight: 700;
-}
-
-/* Picker */
-.picker-row {
-  white-space: pre;
-  min-height: 1.6em;
-}
-
-.picker-row.selected {
-  background: var(--surface0);
-  border-radius: 0.1875rem;
-}
-
-.picker-row .arrow {
-  color: var(--yellow);
-  font-weight: 700;
-}
-
-.picker-footer {
-  color: var(--overlay0);
-  min-height: 1.6em;
-  white-space: pre;
-}
-
-.flash-msg {
-  color: var(--green);
-  font-weight: 600;
-}
-
-.flash-msg.flash-execute {
-  color: var(--yellow);
-  font-style: italic;
-}
-
-/* Hints bar */
-.hints {
-  padding: 0.75rem 1.25rem;
-  background: var(--mantle);
-  border-top: 0.0625rem solid var(--surface0);
-  color: var(--overlay0);
-  flex-shrink: 0;
-  line-height: 2;
-}
-
-.hints code {
-  background: var(--surface0);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  color: var(--subtext0);
-  margin: 0 0.1875rem;
-}
-
 /* ── Responsive ─────────────────────────────────────────────────────── */
 
 @media (max-width: 43.75rem) {
-  .header {
-    padding: 0.75rem 1rem;
-    gap: 0.5rem;
-  }
-  .header-left {
-    gap: 0.5rem;
-  }
-  .header-right {
-    font-size: 0.75rem;
-  }
-  .gh-link {
-    font-size: 0.75rem;
-  }
-  .version {
-    font-size: 0.75rem;
-  }
-
   /* About */
   .about {
     padding: 2rem 1rem;
@@ -643,38 +237,4 @@ p {
   .links-section {
     flex-direction: column;
   }
-
-  /* Demo */
-  .demo-layout {
-    flex-direction: column;
-  }
-  .sidebar {
-    width: 100%;
-    border-right: none;
-    border-bottom: 0.0625rem solid var(--surface0);
-    padding: 0.5rem 0;
-    display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    flex-shrink: 0;
-  }
-  .sidebar-item {
-    flex-shrink: 0;
-    padding: 0.375rem 0.875rem;
-    border-left: none;
-    border-bottom: 0.1875rem solid transparent;
-  }
-  .sidebar-item.active {
-    border-left-color: transparent;
-    border-bottom-color: var(--cyan);
-  }
-  .sidebar-heading {
-    flex-shrink: 0;
-    padding: 0.375rem 0.875rem;
-    display: flex;
-    align-items: center;
-  }
-  .sidebar-desc {
-    display: none;
-  }
 }

From 30eac090ddf12508e61d8e94e4b9d2eb0fa66877 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Wed, 25 Mar 2026 00:43:14 +0000
Subject: [PATCH 2/2] fix: logo white space

---
 site/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/index.html b/site/index.html
index 4cb5139..60000b9 100644
--- a/site/index.html
+++ b/site/index.html
@@ -29,10 +29,10 @@
       <section class="hero stack">
         <header class="hero-header stack">
           <pre class="hero-logo" role="img" aria-label="hdi">
-   _____ _____ _____ 
-  ||<span class="hero-logo-letter ">h</span>  |||<span class="hero-logo-letter ">d</span>  |||<span class="hero-logo-letter ">i</span>  ||
-  ||___|||___|||___||
-  |/___\|/___\|/___\|
+ _____ _____ _____ 
+||<span class="hero-logo-letter ">h</span>  |||<span class="hero-logo-letter ">d</span>  |||<span class="hero-logo-letter ">i</span>  ||
+||___|||___|||___||
+|/___\|/___\|/___\|
           </pre>
           <a
             href="https://github.com/grega/hdi"
@@ -64,7 +64,7 @@ <h1 class="hero-text">No more searching the README.</h1>
             <code>test</code> and <code>deploy</code> steps and commands all in
             your terminal.
           </p>
-          <a class="button" href="./demo.html">Interactive demo -></a>
+          <a class="button" href="./demo">Interactive demo -></a>
         </div>
       </section>