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.
This commit is contained in:
Paul Wackerow 2022-12-05 18:13:26 +01:00 committed by GitHub
parent 1da998a4b6
commit 94cb14b978
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 2 deletions

View File

@ -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>