Update H1 styles
Luke Karrys committed
Oct 17, 2023 at 09:27 UTC
83c0a7bed3e456ee7fcb88c1d1ad85313e98470b
4 files changed
+28
-38
src/components/hero.js
deleted
-25
@@ -1,25 +0,0 @@
1
-import React from 'react'
2
-import {Box, Heading, Text, ThemeProvider} from '@primer/react'
3
-import useSiteMetadata from '../hooks/use-site-metadata'
4
-import Container from './container'
5
-
6
-function Hero() {
7
- const {title, description} = useSiteMetadata()
8
-
9
- return (
10
- <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
11
- <Box sx={{bg: 'canvas.inset', py: 6}}>
12
- <Container>
13
- <Heading as="h1" sx={{color: 'fg.default', fontSize: 7, m: 0}}>
14
- {title}
15
- </Heading>
16
- <Text as="p" sx={{m: 0, color: 'fg.onEmphasis', fontSize: 4}}>
17
- {description}
18
- </Text>
19
- </Container>
20
- </Box>
21
- </ThemeProvider>
22
- )
23
-}
24
-
25
-export default Hero
src/layout/default.js
+3
-4
@@ -1,11 +1,12 @@
1
import React from 'react'
2
-import {Box, Heading} from '@primer/react'
2
+import {Box} from '@primer/react'
3
import PageFooter from '../components/page-footer'
4
import * as TableOfContents from '../components/table-of-contents'
5
import VariantSelect from '../components/variant-select'
6
import Breadcrumbs from '../components/breadcrumbs'
7
import withLayout from '../layout'
8
import {SKIP_NAV} from '../constants'
9
+import {H1} from '../mdx'
10
11
const Layout = ({children, pageContext: {frontmatter}}) => {
12
const {title, description} = frontmatter
@@ -26,9 +27,7 @@ const Layout = ({children, pageContext: {frontmatter}}) => {
27
<Box sx={{width: '100%', maxWidth: '960px'}}>
28
<Box sx={{mb: 4}} {...SKIP_NAV}>
29
<Breadcrumbs />
29
- <Heading as="h1" sx={{fontSize: 7}}>
30
- {title}
31
- </Heading>
30
+ <H1>{title}</H1>
31
{description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
32
</Box>
33
<VariantSelect />
src/layout/hero.js
+23
-8
@@ -1,15 +1,30 @@
1
import React from 'react'
2
-import {Box} from '@primer/react'
2
+import {Box, Heading, Text, ThemeProvider} from '@primer/react'
3
import Container from '../components/container'
4
-import Hero from '../components/hero'
4
import withLayout from '../layout'
5
import {SKIP_NAV} from '../constants'
6
+import useSiteMetadata from '../hooks/use-site-metadata'
7
8
-const HeroLayout = ({children}) => (
9
- <Box sx={{width: '100%'}} {...SKIP_NAV}>
10
- <Hero />
11
- <Container>{children}</Container>
12
- </Box>
13
-)
8
+const HeroLayout = ({children}) => {
9
+ const {title, description} = useSiteMetadata()
10
+
11
+ return (
12
+ <Box sx={{width: '100%'}} {...SKIP_NAV}>
13
+ <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
14
+ <Box sx={{bg: 'canvas.inset', py: 6}}>
15
+ <Container>
16
+ <Heading as="h1" sx={{color: 'fg.default', fontSize: 7, m: 0}}>
17
+ {title}
18
+ </Heading>
19
+ <Text as="p" sx={{m: 0, color: 'fg.onEmphasis', fontSize: 4}}>
20
+ {description}
21
+ </Text>
22
+ </Container>
23
+ </Box>
24
+ </ThemeProvider>
25
+ <Container>{children}</Container>
26
+ </Box>
27
+ )
28
+}
29
30
export default withLayout(HeroLayout)
src/mdx/index.js
+2
-1
@@ -112,8 +112,9 @@ const Headings = {
112
},
113
h1: styled(StyledHeading).attrs({as: 'h1'})`
114
padding-bottom: ${themeGet('space.2')};
115
- font-size: ${themeGet('fontSizes.7')};
115
+ font-size: ${themeGet('fontSizes.6')};
116
border-bottom: 1px solid ${themeGet('colors.border.default')};
117
+ margin-top: 0;
118
`,
119
h2: styled(StyledHeading).attrs({as: 'h2'})`
120
padding-bottom: ${themeGet('space.2')};