From 93146b8d41381ddd9e982d1301fc0e5cb53c1d5c Mon Sep 17 00:00:00 2001
From: CobusT <cobus@frommel.net>
Date: Fri, 11 Oct 2024 16:05:33 -0700
Subject: [PATCH 1/2] some opinionated layout changes to match other docs

---
 docs/style.css         | 45 +++++++++++++++++++++++++++++++++++++++---
 observablehq.config.ts |  4 ++--
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/docs/style.css b/docs/style.css
index 1948c7779..448fa829b 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -3,10 +3,11 @@
 @import url("observablehq:theme-near-midnight.css") (prefers-color-scheme: dark);
 
 :root {
-  --sans-serif: Inter, -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto,
-    noto, "segoe ui", arial, sans-serif;
+  --sans-serif: Inter, -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu,
+    roboto, noto, "segoe ui", arial, sans-serif;
   --monospace: "Spline Sans Mono", Menlo, Consolas, monospace;
   --theme-foreground-focus: #148576;
+  --observablehq-header-height: 64px;
 }
 
 h1 code,
@@ -34,6 +35,22 @@ code:not(pre code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code) {
   }
 }
 
+#observablehq-header {
+  padding: 0;
+  left: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2) + 2rem);
+  right: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2) + 2rem);
+}
+
+#observablehq-header > div:first-child {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
 #observablehq-header a[href] {
   color: inherit;
 }
@@ -72,8 +89,13 @@ body {
   font: 16px/1.5 var(--sans-serif);
 }
 
-#observablehq-main {
+#observablehq-header ~ #observablehq-main {
   min-height: calc(100vh - 23.8rem);
+  margin-top: calc(var(--observablehq-header-height) + 2rem);
+}
+
+#observablehq-header ~ #observablehq-toc {
+  top: calc(var(--observablehq-header-height));
 }
 
 #observablehq-main a[href]:not(.observablehq-header-anchor) {
@@ -103,6 +125,14 @@ h1 {
     display: none !important;
   }
 }
+#observablehq-sidebar > ol:first-child {
+  padding: 0;
+}
+
+#observablehq-sidebar-close {
+  top: 0;
+  justify-content: right;
+}
 
 #observablehq-sidebar > ol:first-child > li::before {
   display: none;
@@ -113,6 +143,15 @@ h1 {
   color: inherit;
 }
 
+#observablehq-sidebar > * {
+  margin-left: 0.5rem !important;
+  margin-right: 0.5rem !important;
+}
+
+#observablehq-search {
+  margin-left: 1rem !important;
+}
+
 a.observablehq-version-badge {
   font: 500 12px var(--sans-serif);
   display: inline-block;
diff --git a/observablehq.config.ts b/observablehq.config.ts
index 59b54bdf3..ef63ac2be 100644
--- a/observablehq.config.ts
+++ b/observablehq.config.ts
@@ -120,10 +120,10 @@ export default {
       : ""
   }
 <script type="module">/Win/.test(navigator.platform) || Array.from(document.querySelectorAll(".win"), (e) => e.remove())</script>`,
-  home: `<span style="display: flex; align-items: center; font-weight: 500; gap: 0.5rem; margin-left: -0.5rem; color: var(--theme-foreground);">
+  home: `<span style="display: flex; align-items: center; font-weight: 500; gap: 0.5rem; color: var(--theme-foreground);">
     ${logo()} Framework
   </span>`,
-  header: `<div style="display: flex; flex-grow: 1; align-items: center; justify-content: space-between; white-space: nowrap;">
+  header: `<div> 
     <div>
       <a href="/" class="hide-if-sidebar" style="display: flex; align-items: center; gap: 0.5rem;">
         ${logo()} Framework

From 0e6ff91f6ccbd48902b6b908ad5c10d3ef1a5215 Mon Sep 17 00:00:00 2001
From: CobusT <cobus@frommel.net>
Date: Fri, 11 Oct 2024 16:45:44 -0700
Subject: [PATCH 2/2] mobile tweaks

---
 docs/style.css | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/style.css b/docs/style.css
index 448fa829b..a236848af 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -94,10 +94,6 @@ body {
   margin-top: calc(var(--observablehq-header-height) + 2rem);
 }
 
-#observablehq-header ~ #observablehq-toc {
-  top: calc(var(--observablehq-header-height));
-}
-
 #observablehq-main a[href]:not(.observablehq-header-anchor) {
   color: inherit;
   text-decoration: underline;
@@ -118,6 +114,10 @@ h1 {
   .hide-if-small {
     display: none !important;
   }
+  #observablehq-header > div:first-child {
+    margin-left: 1.5rem;
+    margin-right: 0.5rem;
+  }
 }
 
 @media (min-width: calc(640px + 6rem + 272px)) {
@@ -152,6 +152,21 @@ h1 {
   margin-left: 1rem !important;
 }
 
+#observablehq-sidebar .observablehq-link-active::before {
+  left: -1rem;
+}
+
+#observablehq-sidebar .observablehq-link a,
+#observablehq-sidebar summary {
+  margin-left: -1rem;
+  padding-left: 2rem;
+}
+
+
+#observablehq-header ~ #observablehq-toc {
+  top: calc(var(--observablehq-header-height));
+}
+
 a.observablehq-version-badge {
   font: 500 12px var(--sans-serif);
   display: inline-block;