From e50254d0340181cc1b8cca749da96a1e10abfc94 Mon Sep 17 00:00:00 2001
From: CobusT <CobusT@users.noreply.github.com>
Date: Tue, 20 Aug 2024 08:17:10 -0700
Subject: [PATCH] Documentation font changes (#2139)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* branding changes

* removed 'Enterprise' link from footer

* css tweaks

* Fixed color of button text on main page.

* Use Vitepress headers for faster font loading
See  https://vitepress.dev/reference/site-config#example-adding-google-fonts

Note that we're using the (slightly faster?) "preload as stylesheet" strategy —as we do in Framework— over "preconnect" that Vitepress suggests.

* normalize hex color to lowercase

* scope a.button to .promo, to remove an !important

(a.button is not used anywhere else; introduced in #1757)

* base

* fixed h1 heading font and removed h1 margin

* revert the change to vp-font-family-base

* rename base classes

* merged 2 root sections of css

---------

Co-authored-by: Philippe Rivière <fil@rezo.net>
---
 docs/.vitepress/config.ts                 |  3 ++
 docs/.vitepress/theme/CustomFooter.vue    |  1 -
 docs/.vitepress/theme/ObservablePromo.vue |  2 +-
 docs/.vitepress/theme/custom.css          | 35 ++++++++++++++++-------
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 2271044fca..7a8b9e91f8 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -25,6 +25,9 @@ export default defineConfig({
     }
   },
   head: [
+    ["link", {rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: ""}],
+    ["link", {rel: "preload", as: "style", href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap"}],
+    ["link", {rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap"}],
     ["link", {rel: "apple-touch-icon", href: "https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png"}],
     ["link", {rel: "icon", type: "image/png", href: "https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png", sizes: "512x512"}],
     ["script", {async: "", src: "https://www.googletagmanager.com/gtag/js?id=G-9B88TP6PKQ"}],
diff --git a/docs/.vitepress/theme/CustomFooter.vue b/docs/.vitepress/theme/CustomFooter.vue
index 6bda2ef804..e026f21983 100644
--- a/docs/.vitepress/theme/CustomFooter.vue
+++ b/docs/.vitepress/theme/CustomFooter.vue
@@ -25,7 +25,6 @@
             <li class="mb2"><a target="_blank" href="https://observablehq.com/plot">Plot</a></li>
             <li class="mb2"><a target="_blank" href="https://observablehq.com/data-integrations">Integrations</a></li>
             <li class="mb2"><a target="_blank" href="https://observablehq.com/pricing">Pricing</a></li>
-            <li class="mb2"><a target="_blank" href="https://observablehq.com/enterprise">Enterprise</a></li>
           </ul>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/ObservablePromo.vue b/docs/.vitepress/theme/ObservablePromo.vue
index a877b5c931..1ca79f42f8 100644
--- a/docs/.vitepress/theme/ObservablePromo.vue
+++ b/docs/.vitepress/theme/ObservablePromo.vue
@@ -62,7 +62,7 @@ h1 {
   opacity: 0.7;
 }
 
-a.button {
+.promo a.button {
   display: inline-block;
   border: 1px solid transparent;
   text-align: center;
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 2b5f70e8e9..233d2603aa 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -3,6 +3,18 @@
   --vp-c-purple-2: #7f42cd;
   --vp-c-purple-3: #9555e2;
   --vp-c-purple-soft: rgba(155, 91, 233, 0.14);
+  --vp-c-red: #f43f5e;
+  --vp-c-green: #10b981;
+  --vp-c-blue: #0092ff;
+  --vp-c-purple: #a463f2;
+  --vp-c-brand-1: var(--vp-c-purple-1);
+  --vp-c-brand-2: var(--vp-c-purple-2);
+  --vp-c-brand-3: var(--vp-c-purple-3);
+  --vp-c-brand-soft: var(--vp-c-purple-soft);
+  --vp-font-family-base: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu,
+    roboto, noto, "segoe ui", arial, sans-serif;
+  --sans-text: Inter, var(--vp-font-family-base);
+  --mono-heading: "Spline Sans Mono", monospace;
 }
 
 .dark {
@@ -10,18 +22,21 @@
   --vp-c-purple-2: #9a5ae8;
   --vp-c-purple-3: #884ad6;
   --vp-c-purple-soft: rgba(155, 91, 233, 0.16);
+  --vp-c-text-1: #f5f5f5;
 }
 
-:root {
-  --vp-c-red: #f43f5e;
-  --vp-c-green: #10b981;
-  --vp-c-blue: #0092ff;
-  --vp-c-purple: #a463f2;
-  --vp-c-brand-1: var(--vp-c-purple-1);
-  --vp-c-brand-2: var(--vp-c-purple-2);
-  --vp-c-brand-3: var(--vp-c-purple-3);
-  --vp-c-brand-soft: var(--vp-c-purple-soft);
-  --vp-font-family-base: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
+.vp-doc {
+  font-family: var(--sans-text);
+  font-weight: 500;
+}
+
+.vp-doc h1 {
+  font-family: var(--mono-heading);
+  font-weight: 500;
+}
+
+.vp-doc a {
+  color: var(--vp-c-text-1);
 }
 
 .vp-doc figcaption {