From d30d9bfd96dfaec4551709a98012f24795796d2b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 14 Apr 2025 09:59:34 -0700
Subject: [PATCH] Tweak docs layout and font-sizes, try out Inter

---
 scss/_root.scss                       |  3 ++-
 site/src/components/DocsSidebar.astro |  2 +-
 site/src/components/head/Head.astro   |  3 +++
 site/src/layouts/DocsLayout.astro     |  2 +-
 site/src/scss/_callouts.scss          | 17 +++++++++++++----
 site/src/scss/_content.scss           | 27 +++++++++++++++++++++++++++
 site/src/scss/_sidebar.scss           |  4 +++-
 site/src/scss/_toc.scss               |  2 +-
 8 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 99f2969973..4ea0235a27 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -39,6 +39,7 @@
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Fonts
+  font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
@@ -51,7 +52,7 @@
   @if $font-size-root != null {
     --#{$prefix}root-font-size: #{$font-size-root};
   }
-  --#{$prefix}body-font-family: #{inspect($font-family-base)};
+  --#{$prefix}body-font-family: Inter, #{inspect($font-family-base)};
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro
index c36ea79bc8..1cbc0f6507 100644
--- a/site/src/components/DocsSidebar.astro
+++ b/site/src/components/DocsSidebar.astro
@@ -28,7 +28,7 @@ const sidebar = getData('sidebar')
                 )} */}
                 {group.title}
               </strong>
-              <ul class="list-unstyled fw-normal pb-2 small">
+              <ul class="list-unstyled fw-normal pb-2">
                 {group.pages?.map((page) => {
                   const docSlug = getSlug(page.title)
                   const unversionedPageSlug = `${groupSlug}/${docSlug}`
diff --git a/site/src/components/head/Head.astro b/site/src/components/head/Head.astro
index 434ba8359c..a7ad268915 100644
--- a/site/src/components/head/Head.astro
+++ b/site/src/components/head/Head.astro
@@ -47,6 +47,9 @@ const pageTitle = isHome
 
 <script is:inline src={getVersionedDocsPath('assets/js/color-modes.js')}></script>
 
+<link rel="preconnect" href="https://rsms.me/">
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+
 <Stylesheet direction={direction} layout={layout} />
 <Scss />
 <Favicons />
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 1a82a447af..eda6799b2f 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -156,7 +156,7 @@ if (currentPageIndex < allPages.length - 1) {
         <Ads />
       </div>
 
-      <div class="docs-content-body prose ps-lg-2">
+      <div class="docs-content-body ps-lg-2">
         {
           frontmatter.sections && (
             <div class="grid mb-5">
diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss
index 252082770a..25c2f68d9a 100644
--- a/site/src/scss/_callouts.scss
+++ b/site/src/scss/_callouts.scss
@@ -1,5 +1,6 @@
 @use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
+@use "../../../scss/mixins/border-radius" as *;
 @use "variables" as *;
 
 //
@@ -8,20 +9,28 @@
 
 @layer custom {
   .bd-callout {
-    --#{$prefix}link-color: var(--bd-callout-link);
+    --#{$prefix}link-color: var(--bd-callout-color);
+    --#{$prefix}link-hover-color: var(--bd-callout-color);
     --#{$prefix}code-color: var(--bd-callout-code-color);
 
     padding: 1.25rem;
     margin-top: 1.25rem;
     margin-bottom: 1.25rem;
-    color: var(--bd-callout-color, inherit);
+    font-size: .875rem;
+    line-height: 1.5;
+    // color: var(--bd-callout-color, inherit);
     background-color: var(--bd-callout-bg, var(--bs-gray-100));
+    border: 1px solid var(--bd-callout-border, var(--bs-border-color));
     border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
+    @include border-radius(var(--bs-border-radius));
+    // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
 
     h4 {
       margin-bottom: .25rem;
     }
 
+    a { font-weight: 500; }
+
     > :last-child {
       margin-bottom: 0;
     }
@@ -38,8 +47,8 @@
   // Variations
   @each $variant in $bd-callout-variants {
     .bd-callout-#{$variant} {
-      --bd-callout-color: var(--bs-#{$variant}-text);
-      --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
+      // --bd-callout-color: var(--bs-#{$variant}-text);
+      --bd-callout-bg: color-mix(in srgb, var(--bs-#{$variant}-bg-subtle), transparent 50%);
       --bd-callout-border: var(--bs-#{$variant}-border);
     }
   }
diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index eb9fa8d519..9a9ec67c55 100644
--- a/site/src/scss/_content.scss
+++ b/site/src/scss/_content.scss
@@ -8,6 +8,33 @@
 
 @layer custom {
   .docs-content-body {
+    > h2,
+    > h3,
+    > h4 {
+      --bs-heading-color: var(--bs-emphasis-color);
+    }
+
+    // Offset content from fixed navbar when jumping to headings
+    > h2:not(:first-child) {
+      margin-top: 3rem;
+    }
+
+    > h3 {
+      margin-top: 2rem;
+    }
+
+    > ul li,
+    > ol li {
+      margin-bottom: .25rem;
+
+      // stylelint-disable selector-max-type, selector-max-compound-selectors
+      > p ~ ul {
+        margin-top: -.5rem;
+        margin-bottom: 1rem;
+      }
+      // stylelint-enable selector-max-type, selector-max-compound-selectors
+    }
+
     // Override Bootstrap defaults
     > .table,
     > .table-responsive .table {
diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss
index c38d4ccafd..61cf92a3d9 100644
--- a/site/src/scss/_sidebar.scss
+++ b/site/src/scss/_sidebar.scss
@@ -3,6 +3,8 @@
 @use "../../../scss/mixins/box-shadow" as *;
 
 .bd-sidebar {
+  font-size: .875rem;
+
   @include media-breakpoint-up(lg) {
     position: sticky;
     top: 5rem;
@@ -31,7 +33,7 @@
 
 .bd-links-nav {
   @include media-breakpoint-down(lg) {
-    font-size: .875rem;
+    // font-size: .875rem;
   }
 
   @include media-breakpoint-between(xs, lg) {
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index a4fecd4a8c..dd4f2e325e 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -17,7 +17,7 @@
   }
 
   nav {
-    @include font-size(.875rem);
+    // @include font-size(.875rem);
 
     ul {
       padding-left: 0;