Tweak docs layout and font-sizes, try out Inter

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};

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}`

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 />

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">

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-color: var(--bs-#{$variant}-text);
-      --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
+      --bd-callout-bg: color-mix(in srgb, var(--bs-#{$variant}-bg-subtle), transparent 50%);
       --bd-callout-border: var(--bs-#{$variant}-border);
     }
   }

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 {

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) {

site/src/scss/_toc.scss

@@ -17,7 +17,7 @@
   }
 
   nav {
-    @include font-size(.875rem);
+    // @include font-size(.875rem);
 
     ul {
       padding-left: 0;