Center the docs layout on wide screens and raise body text to 15px (#1060)

* docs: center the layout on wide screens and raise body text to 15px

The layout capped its width with max-w-8xl, which this Tailwind config
does not define, so the cap never applied. On screens wider than about
1660px the sidebar and header stayed at the viewport edges while the
text kept its max width, leaving a gap between the text and the table
of contents (about 350px at 1920, over 1000px at 2560).

Keep the sidebar, content and table of contents together in a 104rem
frame centered in the viewport. Below 104rem the layout is unchanged.

Raise the prose base font size from 14px to 15px, and h5/h6 with it so
they stay level with the body text.

* docs: center the layout frame without counting the scrollbar

100vw includes a classic vertical scrollbar, so the offset came out
half a scrollbar too large and the in-flow content ended 15px past the
fixed header. 100% resolves against the viewport without the scrollbar
for the fixed sidebar and header, and against the page width for the
content, so all three use the same exact offset.

src/components/Header.jsx

@@ -37,9 +37,9 @@ export const Header = forwardRef(function Header({ className }, ref) {
       ref={ref}
         className={clsx(
           className,
-          'fixed inset-x-0 top-0 z-40 flex items-center justify-between gap-3 px-5 transition h-[64px] lg:left-72 lg:z-50 lg:px-8 xl:left-80 min-h-[64px] lg:pointer-events-auto',
+          'fixed inset-x-0 top-0 z-40 flex items-center justify-between gap-3 px-5 transition h-[64px] lg:left-[calc(var(--layout-offset)+18rem)] lg:right-[var(--layout-offset)] lg:z-50 lg:px-8 xl:left-[calc(var(--layout-offset)+20rem)] min-h-[64px] lg:pointer-events-auto',
           !isInsideMobileNavigation &&
-            'backdrop-blur-lg bg-white/70 dark:bg-[#181A1D]/95 lg:left-72 xl:left-80',
+            'backdrop-blur-lg bg-white/70 dark:bg-[#181A1D]/95',
           isInsideMobileNavigation &&
             'bg-white/70 dark:bg-[#181A1D]/95 backdrop-blur-lg'
         )}

src/components/Layout.jsx

@@ -188,12 +188,12 @@ export function Layout({ children, title, tableOfContents }) {
       <AnnouncementBanner />
       <HeroPattern/>
       <div
-        className="relative mx-auto flex max-w-8xl md:px-2 lg:px-8 xl:px-12 lg:ml-72 xl:ml-80"
+        className="relative flex md:px-2 lg:px-8 xl:px-12 lg:ml-[calc(var(--layout-offset)+18rem)] lg:max-w-[calc(var(--layout-max-width)-18rem)] xl:ml-[calc(var(--layout-offset)+20rem)] xl:max-w-[calc(var(--layout-max-width)-20rem)]"
         style={{ paddingTop: bannerHeight }}
       >
         <header
             // layoutScroll
-            className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
+            className="contents lg:pointer-events-none lg:fixed lg:inset-y-0 lg:left-[var(--layout-offset)] lg:right-[var(--layout-offset)] lg:z-40 lg:flex"
             style={{ top: bannerHeight }}
         >
           <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:dark:border-neutral-700/50 lg:px-6 lg:pb-8 lg:pt-4 lg:bg-white/70 lg:dark:bg-[#181A1D]/95 lg:backdrop-blur-lg xl:w-80 lg:overflow-x-visible sidebar-scroll">

src/styles/tailwind.css

@@ -14,6 +14,12 @@
   --toastify-text-color-dark: theme('colors.zinc.600') !important;
   --toastify-color-light: theme('colors.white') !important;
   --toastify-text-color-light: theme('colors.zinc.600') !important;
+
+  /* Page frame: sidebar, content and table of contents stay together and the
+     frame is centered, so wide screens get empty space outside the page instead
+     of a gap between the content and the table of contents. */
+  --layout-max-width: 104rem;
+  --layout-offset: max(0px, calc((100% - var(--layout-max-width)) / 2));
 }
 
 /* Dark mode styles */

typography.js

@@ -43,7 +43,7 @@ module.exports = ({ theme }) => ({
 
       // Base
       color: 'var(--tw-prose-body)',
-      fontSize: theme('fontSize.sm')[0],
+      fontSize: '0.9375rem',
       lineHeight: theme('lineHeight.7'),
 
       // Layout
@@ -212,7 +212,7 @@ module.exports = ({ theme }) => ({
       },
       h5: {
         color: 'var(--tw-prose-headings)',
-        fontSize: theme('fontSize.sm')[0],
+        fontSize: '0.9375rem',
         ...theme('fontSize.sm')[1],
         fontWeight: '600',
         marginTop: theme('spacing.6'),
@@ -220,7 +220,7 @@ module.exports = ({ theme }) => ({
       },
       h6: {
         color: 'var(--tw-prose-headings)',
-        fontSize: theme('fontSize.sm')[0],
+        fontSize: '0.9375rem',
         ...theme('fontSize.sm')[1],
         fontWeight: '600',
         marginTop: theme('spacing.6'),