Documentation font changes (#2139)

* 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 <[email protected]>

Author: CobusT

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"}],

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>

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;

docs/.vitepress/theme/custom.css

@@ -3,25 +3,40 @@
   --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 {
   --vp-c-purple-1: #db96ff;
   --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 {