* 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:
parent
1da998a4b6
commit
94cb14b978
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue