diff --git a/src/components/UI/docs/DocsNav.tsx b/src/components/UI/docs/DocsNav.tsx index 9e83404844..34874108c4 100644 --- a/src/components/UI/docs/DocsNav.tsx +++ b/src/components/UI/docs/DocsNav.tsx @@ -17,11 +17,11 @@ interface Props { } export const DocsNav: FC = ({ navLinks }) => { - const [isMobileAccordionOpen, setMobileAccordionState] = useState(false) + const [isMobileAccordionOpen, setMobileAccordionState] = useState(false); const toggleMobileAccordion = () => { - setMobileAccordionState(prev => !prev) - } + setMobileAccordionState(prev => !prev); + }; return ( @@ -30,7 +30,11 @@ export const DocsNav: FC = ({ navLinks }) => { - + = ({ navLinks }) => { color: 'bg' }} > - - Documentation - + Documentation diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx index 167d147c4f..cc999dd8be 100644 --- a/src/components/UI/docs/DocumentNav.tsx +++ b/src/components/UI/docs/DocumentNav.tsx @@ -21,9 +21,7 @@ export const DocumentNav: FC = ({ content }) => { return ( - - on this page - + on this page {parsedHeadings.map((heading, idx) => { return ( diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx index a86af010b4..72b9d15ea6 100644 --- a/src/components/UI/docs/LinksList.tsx +++ b/src/components/UI/docs/LinksList.tsx @@ -46,7 +46,7 @@ export const LinksList: FC = ({ links, toggleMobileAccordion }) - {items && } + {items && } ) : ( diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx index 4a9625f968..852ee781a3 100644 --- a/src/components/UI/docs/MDComponents.tsx +++ b/src/components/UI/docs/MDComponents.tsx @@ -15,7 +15,7 @@ import { Code, Note } from '.'; import { textStyles } from '../../../theme/foundations'; import { parseHeadingId } from '../../../utils/parseHeadingId'; -const { header1, header2, header3, header4 } = textStyles; +const { h1, h2, h3, h4 } = textStyles; const MDComponents = { // paragraphs @@ -45,7 +45,7 @@ const MDComponents = { const { children: parsedChildren, headingId } = parseHeadingId(children); return ( - + {parsedChildren} ); @@ -59,7 +59,7 @@ const MDComponents = { textAlign='start' mt={{ base: '12 !important', md: '16 !important' }} mb='4 !important' - {...header2} + {...h2} id={headingId} > {parsedChildren} @@ -69,7 +69,7 @@ const MDComponents = { h3: ({ children }: any) => { const { children: parsedChildren, headingId } = parseHeadingId(children); return ( - + {parsedChildren} ); @@ -78,7 +78,7 @@ const MDComponents = { const { children: parsedChildren, headingId } = parseHeadingId(children); return ( - + {parsedChildren} ); diff --git a/src/components/UI/icons/DiscordIcon.tsx b/src/components/UI/icons/DiscordIcon.tsx index ca1f8f400b..4b0d88f6d6 100644 --- a/src/components/UI/icons/DiscordIcon.tsx +++ b/src/components/UI/icons/DiscordIcon.tsx @@ -4,6 +4,11 @@ export const DiscordIcon = createIcon({ displayName: 'DiscordIcon', viewBox: '0 0 32 24', path: ( - + + + ) }); diff --git a/src/components/UI/icons/GitHubIcon.tsx b/src/components/UI/icons/GitHubIcon.tsx index a74f788c78..f93c60a1a1 100644 --- a/src/components/UI/icons/GitHubIcon.tsx +++ b/src/components/UI/icons/GitHubIcon.tsx @@ -4,6 +4,11 @@ export const GitHubIcon = createIcon({ displayName: 'GitHubIcon', viewBox: '0 0 26 24', path: ( - + + + ) }); diff --git a/src/components/UI/icons/HamburgerIcon.tsx b/src/components/UI/icons/HamburgerIcon.tsx index 879fb072d0..404f1f0c5c 100644 --- a/src/components/UI/icons/HamburgerIcon.tsx +++ b/src/components/UI/icons/HamburgerIcon.tsx @@ -4,6 +4,11 @@ export const HamburgerIcon = createIcon({ displayName: 'HamburgerIcon', viewBox: '0 0 22 14', path: ( - + + + ) }); diff --git a/src/components/UI/icons/LensIcon.tsx b/src/components/UI/icons/LensIcon.tsx index 9ab332e067..f6ef12008c 100644 --- a/src/components/UI/icons/LensIcon.tsx +++ b/src/components/UI/icons/LensIcon.tsx @@ -4,6 +4,11 @@ export const LensIcon = createIcon({ displayName: 'LensIcon', viewBox: '0 0 17 18', path: ( - + + + ) }); diff --git a/src/components/UI/icons/LinuxPenguin.tsx b/src/components/UI/icons/LinuxPenguin.tsx index 2a6d36d1f6..26c85989fc 100644 --- a/src/components/UI/icons/LinuxPenguin.tsx +++ b/src/components/UI/icons/LinuxPenguin.tsx @@ -7,7 +7,12 @@ const Icon = createIcon({ displayName: 'LinuxPenguin', viewBox: `0 0 ${w} ${h}`, path: ( - + + + ) }); diff --git a/src/components/UI/icons/MacosLogo.tsx b/src/components/UI/icons/MacosLogo.tsx index 89a4a6f79e..57d59091da 100644 --- a/src/components/UI/icons/MacosLogo.tsx +++ b/src/components/UI/icons/MacosLogo.tsx @@ -7,7 +7,12 @@ const Icon = createIcon({ displayName: 'MacosLogo', viewBox: `0 0 ${w} ${h}`, path: ( - + + + ) }); diff --git a/src/components/UI/icons/MoonIcon.tsx b/src/components/UI/icons/MoonIcon.tsx index 765625acb8..bdc27c9247 100644 --- a/src/components/UI/icons/MoonIcon.tsx +++ b/src/components/UI/icons/MoonIcon.tsx @@ -4,6 +4,11 @@ export const MoonIcon = createIcon({ displayName: 'MoonIcon', viewBox: '0 0 22 22', path: ( - + + + ) }); diff --git a/src/components/UI/icons/SourceBranch.tsx b/src/components/UI/icons/SourceBranch.tsx index 8c352e1cd3..ea73ad0b7a 100644 --- a/src/components/UI/icons/SourceBranch.tsx +++ b/src/components/UI/icons/SourceBranch.tsx @@ -7,7 +7,12 @@ const Icon = createIcon({ displayName: 'SourceBranch', viewBox: `0 0 ${w} ${h}`, path: ( - + + + ) }); diff --git a/src/components/UI/icons/SunIcon.tsx b/src/components/UI/icons/SunIcon.tsx index 2555a5c128..bda950137d 100644 --- a/src/components/UI/icons/SunIcon.tsx +++ b/src/components/UI/icons/SunIcon.tsx @@ -4,6 +4,11 @@ export const SunIcon = createIcon({ displayName: 'SunIcon', viewBox: '0 0 44 44', path: ( - + + + ) }); diff --git a/src/components/UI/icons/TwitterIcon.tsx b/src/components/UI/icons/TwitterIcon.tsx index be4aff8ef6..dfd5126416 100644 --- a/src/components/UI/icons/TwitterIcon.tsx +++ b/src/components/UI/icons/TwitterIcon.tsx @@ -4,6 +4,11 @@ export const TwitterIcon = createIcon({ displayName: 'TwitterIcon', viewBox: '0 0 28 22', path: ( - + + + ) }); diff --git a/src/components/UI/icons/WindowsLogo.tsx b/src/components/UI/icons/WindowsLogo.tsx index aa94ebeb0b..844528f775 100644 --- a/src/components/UI/icons/WindowsLogo.tsx +++ b/src/components/UI/icons/WindowsLogo.tsx @@ -7,7 +7,12 @@ const Icon = createIcon({ displayName: 'WindowsLogo', viewBox: `0 0 ${w} ${h}`, path: ( - + + + ) }); diff --git a/src/components/UI/search/Search.tsx b/src/components/UI/search/Search.tsx index c3aa1f1892..c6a7b3d9f3 100644 --- a/src/components/UI/search/Search.tsx +++ b/src/components/UI/search/Search.tsx @@ -21,10 +21,10 @@ export const Search: FC = () => { >
- + { outlineOffset={4} /> diff --git a/src/components/UI/svgs/AddIcon.tsx b/src/components/UI/svgs/AddIcon.tsx index 906a2045af..6504dcda23 100644 --- a/src/components/UI/svgs/AddIcon.tsx +++ b/src/components/UI/svgs/AddIcon.tsx @@ -7,7 +7,12 @@ const Icon = createIcon({ displayName: 'AddIcon', viewBox: `0 0 ${w} ${h}`, path: ( - + + + + + + ) }); diff --git a/src/components/UI/svgs/GlyphHome.tsx b/src/components/UI/svgs/GlyphHome.tsx index 2df7b4e989..fc61324277 100644 --- a/src/components/UI/svgs/GlyphHome.tsx +++ b/src/components/UI/svgs/GlyphHome.tsx @@ -7,7 +7,12 @@ const Icon = createIcon({ displayName: 'GlyphHome', viewBox: `0 0 ${w} ${h}`, path: ( - + + + ) }); diff --git a/src/components/UI/svgs/GopherDownloads.tsx b/src/components/UI/svgs/GopherDownloads.tsx index 704e12da78..33704b9ee7 100644 --- a/src/components/UI/svgs/GopherDownloads.tsx +++ b/src/components/UI/svgs/GopherDownloads.tsx @@ -7,7 +7,351 @@ const Icon = createIcon({ displayName: 'GopherDownloads', viewBox: `0 0 ${w} ${h}`, path: ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) }); diff --git a/src/components/UI/svgs/GopherHomeFront.tsx b/src/components/UI/svgs/GopherHomeFront.tsx index 551be53ec2..7a5cf11b4f 100644 --- a/src/components/UI/svgs/GopherHomeFront.tsx +++ b/src/components/UI/svgs/GopherHomeFront.tsx @@ -7,7 +7,322 @@ const Icon = createIcon({ displayName: 'GopherHomeFront', viewBox: `0 0 ${w} ${h}`, path: ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) }); diff --git a/src/components/UI/svgs/GopherHomeLinks.tsx b/src/components/UI/svgs/GopherHomeLinks.tsx index 84b3ea604b..325e660143 100644 --- a/src/components/UI/svgs/GopherHomeLinks.tsx +++ b/src/components/UI/svgs/GopherHomeLinks.tsx @@ -7,7 +7,248 @@ const Icon = createIcon({ displayName: 'GopherHomeLinks', viewBox: `0 0 ${w} ${h}`, path: ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) }); diff --git a/src/components/UI/svgs/GopherHomeNodes.tsx b/src/components/UI/svgs/GopherHomeNodes.tsx index 5588dd9de2..303ca9f3f4 100644 --- a/src/components/UI/svgs/GopherHomeNodes.tsx +++ b/src/components/UI/svgs/GopherHomeNodes.tsx @@ -7,7 +7,214 @@ const Icon = createIcon({ displayName: 'GopherHomeNodes', viewBox: `0 0 ${w} ${h}`, path: ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) }); diff --git a/src/components/UI/svgs/MinusIcon.tsx b/src/components/UI/svgs/MinusIcon.tsx index 9f789e2eea..5a956d6b1f 100644 --- a/src/components/UI/svgs/MinusIcon.tsx +++ b/src/components/UI/svgs/MinusIcon.tsx @@ -7,7 +7,9 @@ const Icon = createIcon({ displayName: 'MinusIcon', viewBox: `0 0 ${w} ${h}`, path: ( - + + + ) }); diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx index 9410a43939..36e3f13229 100644 --- a/src/components/layouts/Footer.tsx +++ b/src/components/layouts/Footer.tsx @@ -80,7 +80,13 @@ export const Footer: FC = () => { _hover={hoverStyles} > - + @@ -93,13 +99,25 @@ export const Footer: FC = () => { borderColor='primary' > - +
- +
diff --git a/src/components/layouts/MobileMenu.tsx b/src/components/layouts/MobileMenu.tsx index ca52635532..8805c3350c 100644 --- a/src/components/layouts/MobileMenu.tsx +++ b/src/components/layouts/MobileMenu.tsx @@ -20,7 +20,7 @@ export const MobileMenu: React.FC = () => { color='primary' _hover={{ bg: 'primary', color: 'bg' }} onClick={onOpen} - aria-label="Open mobile menu" + aria-label='Open mobile menu' > diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx index 87047ee0ad..e6026ae500 100644 --- a/src/pages/[...slug].tsx +++ b/src/pages/[...slug].tsx @@ -104,10 +104,10 @@ const DocPage: NextPage = ({ frontmatter, content, navLinks, lastModified - + - + {frontmatter.title} diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx index a688abf8b5..b77f2e6749 100644 --- a/src/pages/downloads.tsx +++ b/src/pages/downloads.tsx @@ -298,7 +298,7 @@ const DownloadsPage: NextPage = ({ data }) => { <> -
+
{ <> -
+
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index 64d1949408..e2e3b4e7f6 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -2,56 +2,41 @@ export const textStyles = { h1: { fontFamily: 'heading', fontWeight: 700, - fontSize: '2.75rem', + fontSize: { base: '2.175rem', md: '2.875rem' }, lineHeight: '3.375rem', letterSpacing: { base: '0.03rem', md: '0.04rem' }, color: 'body' }, h2: { - fontFamily: 'heading', - fontWeight: 400, - fontSize: { base: '1.5rem', md: '1.75rem' }, - lineHeight: 'normal', - letterSpacing: { base: '0.03rem', md: '0.04rem' }, - color: 'body' - }, - header1: { fontFamily: 'heading', fontWeight: 700, - fontSize: { base: '1.875rem', md: '2.125rem' }, - letterSpacing: { base: '0.03rem', md: '0.04rem' }, - lineHeight: 'normal', - color: 'body' - }, - header2: { - fontFamily: 'heading', fontSize: { base: '1.5rem', md: '1.75rem' }, - letterSpacing: { base: '0.03rem', md: '0.04rem' }, lineHeight: 'normal', + letterSpacing: { base: '0.03rem', md: '0.04rem' }, color: 'body' }, - header3: { + h3: { fontFamily: 'heading', fontSize: { base: '1.25rem', md: '1.375rem' }, letterSpacing: { base: '0.03rem', md: '0.04rem' }, lineHeight: 'normal', color: 'body' }, - header4: { + h4: { fontFamily: 'heading', fontSize: '1.125rem', letterSpacing: { base: '0.03rem', md: '0.04rem' }, lineHeight: 'normal', color: 'body' }, - header5: { + h5: { fontFamily: 'heading', fontSize: '1rem', letterSpacing: '0.02rem', lineHeight: 'normal', color: 'body' }, - header6: { + h6: { fontFamily: 'heading', fontSize: '0.875rem', letterSpacing: '0.02rem',