Add gap between md content and right nav [Fixes #77] (#110)

* add gap between md content and right nav

* shorten max width of right nav divider

* make DocumentNav width responsive

Existing fixed width was too large after the 2rem of padding was added. Simply making it more narrow made it unnecessarily small on larger screen sizes. Clamp sets a min of chakra-size-40, max of chakra-size-58, while targeting an eighth of the screen width.

src/pages/[...slug].tsx

@@ -115,7 +115,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
               </Text>
             </Stack>
 
-            <Flex width='100%' placeContent='space-between'>
+            <Flex width='100%' placeContent='space-between' gap={8}>
               <Stack maxW='768px' sx={{ "*:first-child": { marginTop: '0 !important' } }}>
                 <ReactMarkdown
                   remarkPlugins={[gfm]}
@@ -126,7 +126,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
                 </ReactMarkdown>
               </Stack>
 
-              <Stack display={{ base: 'none', xl: 'block' }} w={48}>
+              <Stack display={{ base: 'none', xl: 'block' }} w="clamp(var(--chakra-sizes-40), 12.5%, var(--chakra-sizes-56))">
                 <DocumentNav content={content} />
               </Stack>
             </Flex>