2020-09-03 19:38:13 +02:00
|
|
|
import Head from 'next/head'
|
|
|
|
import StitchesLogo from '../components/StitchesLogo'
|
2022-07-22 18:02:53 +02:00
|
|
|
import { styled } from '../stitches.config'
|
2020-09-03 19:38:13 +02:00
|
|
|
|
|
|
|
const Box = styled('div', {})
|
|
|
|
|
|
|
|
const Text = styled('p', {
|
|
|
|
fontFamily: '$system',
|
|
|
|
color: '$hiContrast',
|
|
|
|
})
|
|
|
|
|
|
|
|
const Link = styled('a', {
|
|
|
|
fontFamily: '$system',
|
|
|
|
textDecoration: 'none',
|
|
|
|
color: '$purple600',
|
|
|
|
})
|
|
|
|
|
|
|
|
const Container = styled('div', {
|
|
|
|
marginX: 'auto',
|
|
|
|
paddingX: '$3',
|
|
|
|
|
|
|
|
variants: {
|
|
|
|
size: {
|
2021-08-17 09:18:08 +02:00
|
|
|
1: {
|
2020-09-03 19:38:13 +02:00
|
|
|
maxWidth: '300px',
|
|
|
|
},
|
2021-08-17 09:18:08 +02:00
|
|
|
2: {
|
2020-09-03 19:38:13 +02:00
|
|
|
maxWidth: '585px',
|
|
|
|
},
|
2021-08-17 09:18:08 +02:00
|
|
|
3: {
|
2020-09-03 19:38:13 +02:00
|
|
|
maxWidth: '865px',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
export default function Home() {
|
|
|
|
return (
|
|
|
|
<Box css={{ paddingY: '$6' }}>
|
|
|
|
<Head>
|
|
|
|
<title>Use Stitches with Next.js</title>
|
|
|
|
</Head>
|
2021-03-22 22:29:58 +01:00
|
|
|
<Container size={{ '@initial': '1', '@bp1': '2' }}>
|
2020-09-03 19:38:13 +02:00
|
|
|
<StitchesLogo />
|
|
|
|
<Text as="h1">Hello, from Stitches.</Text>
|
|
|
|
<Text>
|
|
|
|
For full documentation, visit{' '}
|
|
|
|
<Link href="https://stitches.dev">stitches.dev</Link>.
|
|
|
|
</Text>
|
|
|
|
</Container>
|
|
|
|
</Box>
|
|
|
|
)
|
|
|
|
}
|