mirror of
https://github.com/System-End/site.git
synced 2026-04-19 23:22:49 +00:00
Good-enough footer
This commit is contained in:
Lachlan Campbell
parent
07064fd2f4
commit
48703368c7
2 changed files with 204 additions and 2 deletions
200
components/footer.js
Normal file
200
components/footer.js
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
import React from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import { Box, Container, Flex, Heading, Link, Text } from 'theme-ui'
|
||||
import theme from '@hackclub/theme'
|
||||
import Icon from './icon'
|
||||
|
||||
const Base = styled(Box)`
|
||||
background: ${(props) =>
|
||||
props.dark
|
||||
? `${theme.colors.darker} radial-gradient(${hexa(
|
||||
theme.colors.black,
|
||||
0.5
|
||||
)} 1px, transparent 1px)`
|
||||
: `${theme.colors.snow} url('https://hackclub.com/pattern.svg') repeat`};
|
||||
${(props) =>
|
||||
props.dark &&
|
||||
`
|
||||
background-size: ${theme.space[4]}px ${theme.space[4]}px;
|
||||
h2 {
|
||||
color: ${theme.colors.muted};
|
||||
}
|
||||
${BottomLine} {
|
||||
border-color: ${theme.colors.black};
|
||||
}
|
||||
`} @media print {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
const Columns = styled(Container)`
|
||||
max-width: 48rem !important;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: ${theme.space[2]}px;
|
||||
> div:last-of-type {
|
||||
grid-column: span 2;
|
||||
}
|
||||
@media (min-width: ${theme.breakpoints[1]}) {
|
||||
grid-gap: ${theme.space[4]}px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
> div:last-of-type {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: ${theme.colors.muted};
|
||||
}
|
||||
h2,
|
||||
p {
|
||||
color: ${theme.colors.muted};
|
||||
}
|
||||
h2 {
|
||||
font-size: ${theme.fontSizes[3]}px;
|
||||
}
|
||||
a,
|
||||
p {
|
||||
font-size: ${theme.fontSizes[2]}px;
|
||||
}
|
||||
`
|
||||
|
||||
const Services = styled(Flex)`
|
||||
a {
|
||||
line-height: 0;
|
||||
}
|
||||
svg {
|
||||
fill: currentColor;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
@media (min-width: ${theme.breakpoints[1]}) {
|
||||
max-width: 12rem;
|
||||
}
|
||||
`
|
||||
|
||||
const Service = ({ href, icon, ...props }) => (
|
||||
<Link
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href={href}
|
||||
mr={2}
|
||||
mb={2}
|
||||
color="muted"
|
||||
aria-label={`hack club on ${icon}`}
|
||||
children={<Icon glyph={icon} />}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
const Pages = styled(Box)`
|
||||
a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
margin-bottom: ${theme.space[2]}px;
|
||||
}
|
||||
`
|
||||
|
||||
const BottomLine = styled(Box)`
|
||||
border-top: 1px solid ${theme.colors.smoke};
|
||||
`
|
||||
|
||||
const Footer = ({ dark = false, children, ...props }) => (
|
||||
<Base
|
||||
color={dark ? 'muted' : 'slate'}
|
||||
py={[4, 5]}
|
||||
dark={dark}
|
||||
sx={{ textAlign: 'left' }}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<Container px={3}>
|
||||
<Columns px={0}>
|
||||
<Box>
|
||||
<Heading as="h2" variant="subheadline" mb={3}>
|
||||
Hack Club
|
||||
</Heading>
|
||||
<Pages>
|
||||
<Link href="https://apply.hackclub.com/" children="Apply" />
|
||||
<Link href="https://hackclub.com/donate/" children="Donate" />
|
||||
<Link href="https://hackclub.com/team/" children="Team" />
|
||||
<Link href="https://hackclub.com/community/" children="Community" />
|
||||
<Link
|
||||
href="https://hackclub.com/philosophy/"
|
||||
children="Philosophy"
|
||||
/>
|
||||
<Link href="https://hackclub.com/brand/" children="Branding" />
|
||||
</Pages>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading as="h2" variant="subheadline" mb={3}>
|
||||
Resources
|
||||
</Heading>
|
||||
<Pages>
|
||||
<Link
|
||||
href="https://hackclub.com/conduct/"
|
||||
children="Code of Conduct"
|
||||
/>
|
||||
<Link href="https://workshops.hackclub.com/" children="Workshops" />
|
||||
<Link href="https://hackclub.com/night/" children="Hack Night" />
|
||||
<Link
|
||||
href="https://hackathons.hackclub.com/"
|
||||
children="Hackathons"
|
||||
/>
|
||||
<Link href="https://hackclub.com/bank/" children="Bank" />
|
||||
<Link href="https://hackclub.com/map/" children="Map" />
|
||||
</Pages>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading as="h2" variant="subheadline" mb={3}>
|
||||
Join the Club
|
||||
</Heading>
|
||||
<Services sx={{ flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<Service href="/community/" icon="slack-fill" target="_self" />
|
||||
<Service href="https://twitter.com/hackclub" icon="twitter" />
|
||||
<Service href="https://github.com/hackclub" icon="github" />
|
||||
<Service
|
||||
href="https://www.facebook.com/Hack-Club-741805665870458"
|
||||
icon="facebook"
|
||||
/>
|
||||
<Service href="https://medium.com/hackclub" icon="medium" />
|
||||
<Service
|
||||
href="https://www.youtube.com/channel/UCQzO0jpcRkP-9eWKMpJyB0w"
|
||||
icon="youtube"
|
||||
/>
|
||||
<Service
|
||||
href="https://www.instagram.com/starthackclub"
|
||||
icon="instagram"
|
||||
/>
|
||||
<Service href="mailto:team@hackclub.com" icon="email" />
|
||||
</Services>
|
||||
<Text my={2}>
|
||||
<Link href="tel:1-855-625-HACK">1-855-625-HACK</Link>
|
||||
<br />
|
||||
<Text as="span" color="muted" children="(call toll-free)" />
|
||||
</Text>
|
||||
<Text mt={[3, 4]}>
|
||||
<Link
|
||||
href="https://hackclub.com/press/"
|
||||
children="Press Inquiries"
|
||||
/>
|
||||
</Text>
|
||||
</Box>
|
||||
</Columns>
|
||||
<Box mt={[3, 4]}>
|
||||
<Text fontSize={3} color="muted">
|
||||
Mail: 8605 Santa Monica Blvd #86294, West Hollywood, CA 90069
|
||||
</Text>
|
||||
</Box>
|
||||
<BottomLine mt={3}>
|
||||
<Text fontSize={2} mt={2} color="muted">
|
||||
© {new Date().getFullYear()} Hack Club. 501(c)(3) nonprofit (EIN:
|
||||
81-2908499)
|
||||
</Text>
|
||||
</BottomLine>
|
||||
</Container>
|
||||
</Base>
|
||||
)
|
||||
|
||||
export default Footer
|
||||
|
|
@ -17,6 +17,7 @@ import {
|
|||
import { keyframes } from '@emotion/core'
|
||||
import { Slide } from 'react-reveal'
|
||||
import ForceTheme from '../components/force-theme'
|
||||
import Footer from '../components/footer'
|
||||
import SlackEvents from '../components/home/slack-events'
|
||||
import JoinForm from '../components/home/join-form'
|
||||
|
||||
|
|
@ -161,7 +162,7 @@ export default () => (
|
|||
as="span"
|
||||
sx={{
|
||||
WebkitTextStroke: (theme) => theme.colors.red,
|
||||
WebkitTextStrokeWidth: '3px',
|
||||
WebkitTextStrokeWidth: ['1px', '3px'],
|
||||
WebkitTextFillColor: (theme) => theme.colors.white
|
||||
}}
|
||||
>
|
||||
|
|
@ -261,7 +262,7 @@ export default () => (
|
|||
</Grid>
|
||||
</Box>
|
||||
<Slide up>
|
||||
<Window title="Weekly Hack Club AMA">
|
||||
<Window title="Weekly Hack Club AMAs">
|
||||
<Box
|
||||
as="video"
|
||||
src="https://d2wkqk610zk1ag.cloudfront.net/items/0k222h2k1Z2h1S1y3t0u/chris-cox-ama.mov"
|
||||
|
|
@ -556,5 +557,6 @@ export default () => (
|
|||
<JoinForm />
|
||||
</Container>
|
||||
</Box>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue