mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
Add nav to brand & press pages
This commit is contained in:
parent
8bbd97a854
commit
2fcae937dd
2 changed files with 26 additions and 31 deletions
|
|
@ -13,8 +13,8 @@ import {
|
|||
import theme from '@hackclub/theme'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Head from 'next/head'
|
||||
import Flag from '../components/flag'
|
||||
import ColorSwitcher from '../components/color-switcher'
|
||||
import Nav from '../components/nav'
|
||||
import Footer from '../components/footer'
|
||||
import { startCase } from 'lodash'
|
||||
|
||||
export const Logo = ({ name }) => (
|
||||
|
|
@ -99,6 +99,13 @@ const ColorSwatch = ({ bg }) => (
|
|||
|
||||
export default ({ css }) => (
|
||||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="Branding"
|
||||
description="Download Hack Club HQ’s logos and preview our brand fonts & colors."
|
||||
image="https://workshop-cards.hackclub.com/Branding.png?theme=dark&fontSize=350px&brand=HQ"
|
||||
/>
|
||||
<Nav />
|
||||
<Box
|
||||
as="header"
|
||||
sx={{
|
||||
|
|
@ -109,16 +116,6 @@ export default ({ css }) => (
|
|||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<Flag />
|
||||
<ColorSwitcher />
|
||||
<Head>
|
||||
<title>Branding – Hack Club</title>
|
||||
<Meta
|
||||
title="Branding"
|
||||
description="Download Hack Club HQ’s logos and preview our brand fonts & colors."
|
||||
image="https://workshop-cards.hackclub.com/Branding.png?theme=dark&fontSize=350px&brand=HQ"
|
||||
/>
|
||||
</Head>
|
||||
<Container variant="copy">
|
||||
<Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
|
||||
Hack Club Brand
|
||||
|
|
@ -146,7 +143,7 @@ export default ({ css }) => (
|
|||
'flag-standalone-bw',
|
||||
'icon-rounded',
|
||||
'icon-square'
|
||||
].map((key) => (
|
||||
].map(key => (
|
||||
<Logo name={key} key={key} />
|
||||
))}
|
||||
</Grid>
|
||||
|
|
@ -215,7 +212,7 @@ export default ({ css }) => (
|
|||
'blue',
|
||||
'muted',
|
||||
'black'
|
||||
].map((key) => (
|
||||
].map(key => (
|
||||
<ColorSwatch key={key} bg={key} />
|
||||
))}
|
||||
</Grid>
|
||||
|
|
@ -245,6 +242,7 @@ export default ({ css }) => (
|
|||
Theme Starter on GitHub →
|
||||
</Button>
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
import { BaseStyles, Box, Button, Container, Grid, Heading } from 'theme-ui'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Head from 'next/head'
|
||||
import Flag from '../components/flag'
|
||||
import ColorSwitcher from '../components/color-switcher'
|
||||
import Nav from '../components/nav'
|
||||
import Footer from '../components/footer'
|
||||
import Press from '../components/press.mdx'
|
||||
import { Logo } from './brand'
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="Press"
|
||||
description="Hack Club HQ’s resources for press."
|
||||
image="https://workshop-cards.hackclub.com/Press.png?fontSize=350px&brand=HQ"
|
||||
/>
|
||||
<Nav />
|
||||
<Box
|
||||
as="header"
|
||||
sx={{
|
||||
|
|
@ -18,16 +25,6 @@ export default () => (
|
|||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<Flag />
|
||||
<ColorSwitcher />
|
||||
<Head>
|
||||
<title>Press – Hack Club</title>
|
||||
<Meta
|
||||
title="Press"
|
||||
description="Hack Club’s resources for press."
|
||||
image="https://workshop-cards.hackclub.com/Press.png?fontSize=350px&brand=HQ"
|
||||
/>
|
||||
</Head>
|
||||
<Container variant="copy">
|
||||
<Heading as="h1" variant="title" sx={{ color: 'primary', mt: [2, 4] }}>
|
||||
Press
|
||||
|
|
@ -41,6 +38,7 @@ export default () => (
|
|||
variant="main"
|
||||
sx={{
|
||||
py: [3, 4],
|
||||
px: 3,
|
||||
maxWidth: [null, 'copyUltra'],
|
||||
h2: { variant: 'text.headline' }
|
||||
}}
|
||||
|
|
@ -52,7 +50,6 @@ export default () => (
|
|||
as={BaseStyles}
|
||||
sx={{
|
||||
mx: 0,
|
||||
px: 0,
|
||||
fontSize: 2,
|
||||
'> p': { maxWidth: 'copy' },
|
||||
h2: { variant: 'text.headline', mt: 4 }
|
||||
|
|
@ -67,7 +64,7 @@ export default () => (
|
|||
mt={4}
|
||||
mb={4}
|
||||
>
|
||||
Download all →
|
||||
View all →
|
||||
</Button>
|
||||
<Heading variant="headline">Logos</Heading>
|
||||
<Grid columns={[null, 2, 3]} gap={3} sx={{ input: { display: 'none' } }}>
|
||||
|
|
@ -80,7 +77,7 @@ export default () => (
|
|||
// 'flag-orpheus-left-bw',
|
||||
'icon-rounded',
|
||||
'icon-square'
|
||||
].map((key) => (
|
||||
].map(key => (
|
||||
<Logo name={key} key={key} />
|
||||
))}
|
||||
</Grid>
|
||||
|
|
@ -88,11 +85,11 @@ export default () => (
|
|||
as="a"
|
||||
href="https://assets.hackclub.com/2020_branding.zip"
|
||||
variant="outline"
|
||||
mt={3}
|
||||
mb={4}
|
||||
my={4}
|
||||
>
|
||||
Download all →
|
||||
</Button>
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue