1 files changed, 99 insertions, 52 deletions

diff --git a/docs/public/index.css b/docs/public/index.css
index 2b41accad..14f7e3518 100644
--- a/docs/public/index.css
+++ b/docs/public/index.css
@@ -5,7 +5,7 @@
 
 :root {
   --user-font-scale: 1rem - 16px;
-  --max-width: calc(100% - 2rem);
+  --max-width: calc(100% - 1rem);
 }
 
 @media (min-width: 50em) {
@@ -20,12 +20,8 @@ body {
   min-height: 100vh;
   font-family: var(--font-body);
   font-size: 1rem;
-  font-size: clamp(
-    0.875rem,
-    0.4626rem + 1.0309vw + var(--user-font-scale),
-    1.125rem
-  );
-  line-height: 1.625;
+  font-size: clamp(0.9rem, 0.7500rem + 0.3750vw + var(--user-font-scale), 1rem);
+  line-height: 1.5;
 }
 
 nav ul {
@@ -37,11 +33,15 @@ nav ul {
   margin-top: 1rem;
 }
 
+.content main > :first-child {
+  margin-top: 0;
+}
+
 /* Typography */
 :is(h1, h2, h3, h4, h5, h6) {
-  margin-bottom: 1.38rem;
+  margin-bottom: 1rem;
   font-weight: 400;
-  line-height: 1.3;
+  line-height: 1.25;
 }
 
 :is(h1, h2) {
@@ -53,27 +53,26 @@ nav ul {
 }
 
 h1 {
-  font-size: 3.5rem;
+  font-size: 2.5rem;
   font-weight: bold;
 }
 
 h2 {
-  font-size: 32px;
+  font-size: 1.75rem;
   font-weight: bold;
 }
 
 h3 {
-  font-size: 24px;
-  font-weight: bold;
+  font-size: 1.25rem;
 }
 
 h4 {
   font-size: 1rem;
-  font-weight: bold;
 }
 
 h5 {
-  font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
+  font-size: 0.8rem;
+  font-weight: bold;
 }
 
 p,
@@ -95,6 +94,20 @@ a {
   gap: 0.5rem;
 }
 
+article :is(ul, ol) > * + *,
+article li > * + * {
+  margin-top: 0.75rem;
+}
+
+article :is(ul, ol) {
+  padding-left: 0;
+}
+
+article ::marker {
+  font-weight: bold;
+  color: var(--theme-text-light);
+}
+
 a > code:not([class*='language']) {
   position: relative;
   color: var(--theme-text-accent);
@@ -162,16 +175,26 @@ pre {
   --padding-inline: 2rem;
   padding: var(--padding-block) var(--padding-inline);
   padding-right: calc(var(--padding-inline) * 2);
+  margin-left: calc(var(--padding-inline) * -1);
+  margin-right: calc(var(--padding-inline) * -1);
+  font-family: var(--font-mono);
 
-  line-height: 1.414;
+  line-height: 1.5;
+  font-size: 0.85rem;
   overflow-y: hidden;
   overflow-x: auto;
 }
 
+pre code {
+  font: inherit;
+}
+
 @media (min-width: 37.75em) {
   pre {
     --padding-inline: 1.25rem;
     border-radius: 8px;
+    margin-left: 0;
+    margin-right: 0;
   }
 }
 
@@ -193,6 +216,30 @@ img {
   align-items: center;
 }
 
+header {
+  position: relative;
+  transition: transform 300ms 200ms cubic-bezier(0.23, 1, 0.320, 1);
+}
+
+header::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 0.5rem;
+  background: var(--theme-navbar-bg);
+}
+
+header.hidden {
+  transform: translateY(calc(-100% - 1px));
+  transition: transform 200ms 100ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+header.hidden:is(:hover, :focus, :focus-within) {
+  transform: translateY(0);
+}
+
 header button {
   background-color: var(--theme-bg);
 }
@@ -258,7 +305,7 @@ button {
 }
 
 #theme-toggle .checked {
-  color: var(--theme-accent);
+  color: var(--theme-navbar-bg);
   transform: scale(1.125);
   opacity: 1;
 }
@@ -276,13 +323,13 @@ input[name='theme-toggle'] {
 .sidebar-nav {
   width: 100%;
   position: sticky;
-  min-height: calc(100vh - 3.5rem);
-  height: calc(100vh - 3.5rem);
-  top: 3.5rem;
+  min-height: calc(100vh - var(--theme-navbar-height));
+  height: calc(100vh - var(--theme-navbar-height));
+  top: var(--theme-navbar-height);
 }
 .sidebar-nav-inner {
   height: 100%;
-  padding: 2rem 0;
+  padding: 0;
   overflow: auto;
 }
 
@@ -302,7 +349,8 @@ h2.heading {
 
 .header-link:hover,
 .header-link:focus {
-  border-left-color: var(--color-gray-300);
+  border-left-color: var(--theme-accent);
+  color: var(--theme-accent);
 }
 .header-link:focus-within {
   color: var(--theme-text-light);
@@ -335,36 +383,6 @@ h2.heading {
   font-size: 1rem;
 }
 
-/* Scrollbar */
-
-/* width */
-::-webkit-scrollbar {
-  width: 0.5rem;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: var(--theme-divider);
-  border-radius: 1rem;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: var(--theme-text-lighter);
-  border-radius: 1rem;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: var(--theme-text-light);
-}
-
-/* Buttons */
-::-webkit-scrollbar-button {
-  display: none;
-}
-/* Scrollbar - End */
-
 /* Screenreader Only Text */
 .sr-only {
   position: absolute;
@@ -382,3 +400,32 @@ h2.heading {
 :target {
   scroll-margin-top: 4rem;
 }
+
+#site-title {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1;
+  color: var(--color-white);
+  text-decoration: none;
+}
+
+#site-title svg {
+  width: 118px;
+  height: 48px;
+  display: block;
+}
+
+#site-title:hover,
+#site-title:focus {
+  opacity: 0.8;
+}
+
+#site-title h1 {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+}