[docs] Design changes here and there

docs/src/app/(docs)/layout.css

@@ -6,43 +6,45 @@
     position: relative; /* iOS 26 `position: absolute` backdrops */
     min-width: 320px;
     line-height: 1.5;
-    /* It's also the iOS footer overscroll background */
-    background-color: var(--color-background);
     color: var(--color-foreground);
+    background-color: var(--color-content);
   }
 }
 
 @layer components {
   .RootLayout {
+    --content-layout-gap: 2.5rem;
+    --content-layout-max-width: 48rem;
+    --root-layout-padding-inline: 1.5rem;
+
     z-index: 0;
     position: relative;
+    padding-inline: var(--root-layout-padding-inline);
 
-    --root-layout-padding-x: 0rem;
-    padding-inline: var(--root-layout-padding-x);
+    @media (--md) {
+      --content-layout-gap: 3rem;
+      --root-layout-padding-inline: 3rem;
+    }
 
     @media (--show-side-nav) {
-      --root-layout-padding-x: 3rem;
-
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        background-color: var(--color-gridline);
-        height: 1px;
-        right: 0;
-        left: 0;
-      }
-
-      &::before {
-        top: var(--header-height);
-        margin-top: -1px;
-      }
-
-      &::after {
-        bottom: var(--header-height);
-        margin-bottom: -1px;
-        z-index: 1;
-      }
+      --content-layout-max-width: 92.5rem;
+      --content-layout-width: min(
+        var(--content-layout-max-width),
+        calc(100% - var(--root-layout-padding-inline) - var(--root-layout-padding-inline))
+      );
+      --content-layout-inline-offset: calc((100% - var(--content-layout-width)) / 2);
+      --content-layout-column-width: calc(
+        (
+            var(--content-layout-width) - var(--content-layout-gap) - var(--content-layout-gap) -
+              var(--content-layout-gap) - var(--content-layout-gap) - var(--content-layout-gap) -
+              var(--content-layout-gap) - var(--content-layout-gap)
+          ) /
+          8
+      );
+      --content-layout-sidebar-width: calc(
+        var(--content-layout-column-width) + var(--content-layout-column-width) +
+          var(--content-layout-gap)
+      );
     }
   }
 
@@ -52,91 +54,42 @@
     flex-direction: column;
     margin-inline: auto;
     min-height: 100dvh;
-    max-width: calc(var(--breakpoint-max-layout-width) - var(--root-layout-padding-x) * 2);
+    max-width: var(--content-layout-max-width);
 
     @media (--show-side-nav) {
       padding-block: var(--header-height);
       padding-bottom: 0;
-
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 1px;
-        background-color: var(--color-gridline);
-      }
-
-      &::before {
-        left: 0;
-        margin-left: -1px;
-      }
-
-      &::after {
-        right: 0;
-        margin-right: -1px;
-      }
     }
   }
 
   .RootLayoutContent {
     display: flex;
     flex-grow: 1;
     flex-direction: column;
-    background-color: var(--color-content);
-  }
-
-  .RootLayoutFooter {
-    @media (--lg) {
-      background-color: var(--color-background);
-      width: 100%;
-      height: var(--header-height);
-      position: absolute;
-      z-index: 1;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
   }
 
   .ContentLayoutRoot {
-    --sidebar-width: 17.5rem;
-
     display: grid;
     align-items: start;
+    gap: var(--content-layout-gap);
     padding-top: var(--header-height);
-    padding-inline: 1.5rem;
-    grid-template-columns: 1fr;
-
-    @media (--sm) {
-      padding-inline: 2.5rem;
-    }
+    grid-template-columns: repeat(8, minmax(0, 1fr));
 
     @media (--show-side-nav) {
       padding-top: 0;
-      padding-inline: 0;
-      grid-template-columns: var(--sidebar-width) 1fr 3rem;
-    }
-
-    @media (--show-quick-nav) {
-      grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
     }
   }
 
   .ContentLayoutMain {
+    grid-column: 1 / -1;
+    grid-row: 1;
     min-width: 0;
-    max-width: 48rem;
     width: 100%;
 
     margin: 0 auto;
 
     @media (--show-side-nav) {
       margin: 0;
     }
-
-    @media (--show-quick-nav) {
-      margin: 0;
-    }
   }
 }

docs/src/app/(website)/css/components/Body.css

@@ -3,6 +3,6 @@
     box-sizing: border-box;
     margin: 0;
     color: var(--gray-t2);
-    background-color: var(--gray-s1);
+    background-color: var(--color-content);
   }
 }

docs/src/app/(website)/layout.tsx

@@ -32,7 +32,10 @@ export default function Layout({ children }: React.PropsWithChildren) {
         <GoogleAnalytics>
           <div
             className="bui-bs-bb bui-d-g bui-gtc-8 bui-g-8 bp2:bui-g-9"
-            style={{ maxWidth: '1480px', marginInline: 'auto' }}
+            style={{
+              maxWidth: '1480px',
+              marginInline: 'auto',
+            }}
           >
             <header className="bui-d-c">
               <div className="bui-gcs-1 bui-gce-4">

docs/src/app/(website)/page.tsx

@@ -86,6 +86,7 @@ export default function Homepage() {
       <div className="bui-gcs-1 bui-gce-9 bp3:bui-gcs-3">
         <div className="Separator" role="separator" aria-hidden="true"></div>
       </div>
+
       <section className="bui-d-c">
         <div className="bui-gcs-1 bui-gce-9 bp2:bui-gce-3">
           <h2 className="Text sz-2">Made for the makers</h2>

docs/src/components/Accordion.css

@@ -16,11 +16,11 @@
 
     border: 1px solid var(--gray-c2);
     border-collapse: separate;
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-12);
   }
 
   .AccordionHeaderRow {
-    border-radius: var(--radius-6) var(--radius-6) 0 0;
+    border-radius: calc(var(--radius-12) - 1px) calc(var(--radius-12) - 1px) 0 0;
     border-bottom: 1px solid var(--gray-c2);
     background-color: var(--gray-s2);
   }
@@ -76,8 +76,8 @@
     }
 
     .AccordionItem:not([open]):last-child & {
-      border-bottom-left-radius: var(--radius-6);
-      border-bottom-right-radius: var(--radius-6);
+      border-bottom-left-radius: calc(var(--radius-12) - 1px);
+      border-bottom-right-radius: calc(var(--radius-12) - 1px);
     }
   }
 
@@ -110,8 +110,8 @@
     }
 
     .AccordionItem:last-child & {
-      border-bottom-left-radius: var(--radius-6);
-      border-bottom-right-radius: var(--radius-6);
+      border-bottom-left-radius: calc(var(--radius-12) - 1px);
+      border-bottom-right-radius: calc(var(--radius-12) - 1px);
     }
   }
 

docs/src/components/CodeBlock/CodeBlock.css

@@ -3,7 +3,7 @@
     align-self: stretch;
     background-color: var(--color-content);
     border: 1px solid var(--gray-c2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-12);
 
     & code .frame {
       padding-left: 0.75rem;
@@ -35,8 +35,8 @@
     padding-inline-end: 0.25rem;
     height: 2.25rem;
     gap: 1rem;
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
+    border-top-left-radius: calc(var(--radius-12) - 1px);
+    border-top-right-radius: calc(var(--radius-12) - 1px);
     border-bottom: 1px solid var(--gray-c2);
 
     /* Scroll */
@@ -74,8 +74,8 @@
 
   .CodeBlockViewport {
     outline: 0;
-    border-bottom-right-radius: var(--radius-6);
-    border-bottom-left-radius: var(--radius-6);
+    border-bottom-right-radius: calc(var(--radius-12) - 1px);
+    border-bottom-left-radius: calc(var(--radius-12) - 1px);
     overscroll-behavior-x: contain;
 
     &:focus-visible {
@@ -126,7 +126,7 @@
   .CodeBlockPre,
   .CodeBlockRoot .CodeBlockPreInline {
     padding: 0.5rem 0;
-    border-radius: var(--radius-6);
+    border-radius: calc(var(--radius-12) - 1px);
   }
 
   .CodeBlockPreContainer {