feat: full-width docs

Fixes blockstack/docs#947

src/common/constants.ts

@@ -1,7 +1,5 @@
 export const SIDEBAR_WIDTH = 208;
 export const TOC_WIDTH = 208;
-export const CONTENT_MAX_WIDTH = 1104;
-export const PAGE_WIDTH = 1104;
 
 export const SHIKI_THEME = 'Material-Theme-Default';
 export const THEME_STORAGE_KEY = 'theme';

src/components/common.tsx

@@ -10,7 +10,6 @@ import {
   color,
   FlexProps,
 } from '@stacks/ui';
-import { CONTENT_MAX_WIDTH } from '@common/constants';
 
 export const CircleIcon: React.FC<
   FlexProps & { icon: React.FC<any>; hover?: boolean; dark?: boolean }
@@ -40,7 +39,6 @@ export const SectionWrapper: React.FC<BoxProps> = props => (
     zIndex={99}
     position="relative"
     width="100%"
-    maxWidth={`${CONTENT_MAX_WIDTH}px`}
     overflow="hidden"
     pt={space('extra-loose')}
     {...props}

src/components/header.tsx

@@ -22,7 +22,6 @@ import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-co
 import NextLink from 'next/link';
 import { ColorModeButton } from '@components/color-mode-button';
 import { SearchButton } from '@components/search-button';
-import { PAGE_WIDTH } from '@common/constants';
 import { border, transition } from '@common/utils';
 import { getCapsizeStyles } from '@components/mdx/typography';
 import { useTouchable } from '@common/hooks/use-touchable';
@@ -236,7 +235,6 @@ const Header = ({ hideSubBar, ...rest }: any) => {
               backdropFilter: 'blur(5px)',
             }}
             height="72px"
-            maxWidth={`${PAGE_WIDTH}px`}
             mx="auto"
             color={color('text-title')}
             {...rest}

src/components/home/common.tsx

@@ -10,7 +10,6 @@ import {
   color,
   FlexProps,
 } from '@stacks/ui';
-import { CONTENT_MAX_WIDTH } from '@common/constants';
 
 export const CircleIcon: React.FC<
   FlexProps & { icon: React.FC<any>; hover?: boolean; dark?: boolean }
@@ -40,7 +39,6 @@ export const SectionWrapper: React.FC<BoxProps> = props => (
     zIndex={99}
     position="relative"
     width="100%"
-    maxWidth={`${CONTENT_MAX_WIDTH}px`}
     overflow="hidden"
     pt={space('extra-loose')}
     {...props}

src/components/layouts/base-layout.tsx

@@ -5,7 +5,7 @@ import { Header } from '../header';
 import { Main } from '../main';
 import { Footer } from '../footer';
 
-import { PAGE_WIDTH, SIDEBAR_WIDTH } from '@common/constants';
+import { SIDEBAR_WIDTH } from '@common/constants';
 import { useWatchActiveHeadingChange } from '@common/hooks/use-active-heading';
 import { useRouter } from 'next/router';
 import { MobileMenu } from '@components/mobile-menu';
@@ -20,7 +20,7 @@ const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children }) => {
       <MobileMenu />
       <Header />
       <Flex flexGrow={1} width="100%" mx="auto" px={['0', '0', 'extra-loose', 'extra-loose']}>
-        <Flex width="100%" flexGrow={1} maxWidth={`${PAGE_WIDTH}px`} mx="auto">
+        <Flex width="100%" flexGrow={1} mx="auto">
           <SideNav display={['none', 'none', 'block']} />
           <Flex
             flexGrow={1}
@@ -35,7 +35,7 @@ const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children }) => {
             <Main mx="unset" width={'100%'}>
               <Flex
                 flexDirection={['column', 'column', 'row', 'row']}
-                maxWidth="108ch"
+                maxWidth="1175px"
                 mx="auto"
                 flexGrow={1}
               >