mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
Add 404 page
This commit is contained in:
Lachlan Campbell
parent
f89a1dea31
commit
4faaabcf69
3 changed files with 217 additions and 30 deletions
|
|
@ -8,21 +8,15 @@ 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.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
|
||||
: `${theme.colors.snow} url('https://hackclub.com/pattern.svg') repeat`};
|
||||
${props =>
|
||||
props.dark &&
|
||||
css`
|
||||
`
|
||||
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;
|
||||
}
|
||||
|
|
@ -97,10 +91,6 @@ const Pages = styled(Box)`
|
|||
}
|
||||
`
|
||||
|
||||
const BottomLine = styled(Box)`
|
||||
border-top: 1px solid ${theme.colors.smoke};
|
||||
`
|
||||
|
||||
const Footer = ({ dark = false, children, ...props }) => (
|
||||
<Base
|
||||
color={dark ? 'muted' : 'slate'}
|
||||
|
|
@ -184,17 +174,23 @@ const Footer = ({ dark = false, children, ...props }) => (
|
|||
</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>
|
||||
<Text as="p" fontSize={3} color="muted" mt={[3, 4]}>
|
||||
Mail: 8605 Santa Monica Blvd #86294, West Hollywood, CA 90069
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
borderTop: '1px solid',
|
||||
borderColor: dark ? 'black' : 'smoke',
|
||||
mt: 3,
|
||||
pt: 2
|
||||
}}
|
||||
fontSize={3}
|
||||
color="muted"
|
||||
>
|
||||
© {new Date().getFullYear()} Hack Club. 501(c)(3) nonprofit (EIN:
|
||||
81-2908499)
|
||||
</Text>
|
||||
</Container>
|
||||
</Base>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -92,9 +92,8 @@ const layout = props =>
|
|||
overflow-y: auto;
|
||||
text-align: left;
|
||||
height: 100vh;
|
||||
animation: ${slide} 0.25s ease-in;
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: ${slide} 0.25s ease-in;
|
||||
}
|
||||
a {
|
||||
color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
|
||||
|
|
@ -220,13 +219,13 @@ class Header extends Component {
|
|||
const baseColor = dark
|
||||
? color || 'white'
|
||||
: color === 'white' && scrolled
|
||||
? 'black'
|
||||
: color
|
||||
? 'black'
|
||||
: color
|
||||
const toggleColor = dark
|
||||
? color || 'snow'
|
||||
: toggled || (color === 'white' && scrolled)
|
||||
? 'slate'
|
||||
: color
|
||||
? 'slate'
|
||||
: color
|
||||
|
||||
return (
|
||||
<Root
|
||||
|
|
|
|||
192
pages/404.js
Normal file
192
pages/404.js
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
import React from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import { keyframes } from '@emotion/core'
|
||||
import { Heading, Container, Button, Text } from 'theme-ui'
|
||||
import NextLink from 'next/link'
|
||||
import Head from 'next/head'
|
||||
import Meta from '@hackclub/meta'
|
||||
import theme from '../lib/theme'
|
||||
import ForceTheme from '../components/force-theme'
|
||||
import Nav from '../components/nav'
|
||||
import Icon from '../components/icon'
|
||||
import Footer from '../components/footer'
|
||||
|
||||
const animation1 = keyframes`
|
||||
0% {
|
||||
clip: rect(62px, 9999px, 68px, 0);
|
||||
}
|
||||
5% {
|
||||
clip: rect(45px, 9999px, 9px, 0);
|
||||
}
|
||||
10% {
|
||||
clip: rect(9px, 9999px, 76px, 0);
|
||||
}
|
||||
15% {
|
||||
clip: rect(89px, 9999px, 83px, 0);
|
||||
}
|
||||
20% {
|
||||
clip: rect(44px, 9999px, 8px, 0);
|
||||
}
|
||||
25% {
|
||||
clip: rect(59px, 9999px, 24px, 0);
|
||||
}
|
||||
30% {
|
||||
clip: rect(96px, 9999px, 51px, 0);
|
||||
}
|
||||
35% {
|
||||
clip: rect(38px, 9999px, 28px, 0);
|
||||
}
|
||||
40% {
|
||||
clip: rect(92px, 9999px, 1px, 0);
|
||||
}
|
||||
45% {
|
||||
clip: rect(63px, 9999px, 80px, 0);
|
||||
}
|
||||
50% {
|
||||
clip: rect(1px, 9999px, 49px, 0);
|
||||
}
|
||||
55% {
|
||||
clip: rect(7px, 9999px, 49px, 0);
|
||||
}
|
||||
60% {
|
||||
clip: rect(35px, 9999px, 16px, 0);
|
||||
}
|
||||
65% {
|
||||
clip: rect(93px, 9999px, 72px, 0);
|
||||
}
|
||||
70% {
|
||||
clip: rect(55px, 9999px, 52px, 0);
|
||||
}
|
||||
75% {
|
||||
clip: rect(58px, 9999px, 68px, 0);
|
||||
}
|
||||
80% {
|
||||
clip: rect(94px, 9999px, 95px, 0);
|
||||
}
|
||||
85% {
|
||||
clip: rect(81px, 9999px, 24px, 0);
|
||||
}
|
||||
90% {
|
||||
clip: rect(98px, 9999px, 12px, 0);
|
||||
}
|
||||
95% {
|
||||
clip: rect(2px, 9999px, 96px, 0);
|
||||
}
|
||||
100% {
|
||||
clip: rect(95px, 9999px, 47px, 0);
|
||||
}
|
||||
`
|
||||
const animation2 = keyframes`
|
||||
0% {
|
||||
clip: rect(57px, 9999px, 7px, 0);
|
||||
}
|
||||
5% {
|
||||
clip: rect(61px, 9999px, 22px, 0);
|
||||
}
|
||||
10% {
|
||||
clip: rect(34px, 9999px, 47px, 0);
|
||||
}
|
||||
15% {
|
||||
clip: rect(92px, 9999px, 40px, 0);
|
||||
}
|
||||
20% {
|
||||
clip: rect(6px, 9999px, 40px, 0);
|
||||
}
|
||||
25% {
|
||||
clip: rect(39px, 9999px, 46px, 0);
|
||||
}
|
||||
30% {
|
||||
clip: rect(33px, 9999px, 17px, 0);
|
||||
}
|
||||
35% {
|
||||
clip: rect(5px, 9999px, 17px, 0);
|
||||
}
|
||||
40% {
|
||||
clip: rect(40px, 9999px, 70px, 0);
|
||||
}
|
||||
45% {
|
||||
clip: rect(14px, 9999px, 34px, 0);
|
||||
}
|
||||
50% {
|
||||
clip: rect(26px, 9999px, 30px, 0);
|
||||
}
|
||||
55% {
|
||||
clip: rect(15px, 9999px, 100px, 0);
|
||||
}
|
||||
60% {
|
||||
clip: rect(10px, 9999px, 32px, 0);
|
||||
}
|
||||
65% {
|
||||
clip: rect(49px, 9999px, 61px, 0);
|
||||
}
|
||||
70% {
|
||||
clip: rect(61px, 9999px, 22px, 0);
|
||||
}
|
||||
75% {
|
||||
clip: rect(85px, 9999px, 36px, 0);
|
||||
}
|
||||
80% {
|
||||
clip: rect(38px, 9999px, 59px, 0);
|
||||
}
|
||||
85% {
|
||||
clip: rect(21px, 9999px, 88px, 0);
|
||||
}
|
||||
90% {
|
||||
clip: rect(46px, 9999px, 16px, 0);
|
||||
}
|
||||
95% {
|
||||
clip: rect(13px, 9999px, 35px, 0);
|
||||
}
|
||||
100% {
|
||||
clip: rect(75px, 9999px, 13px, 0);
|
||||
}
|
||||
`
|
||||
|
||||
const Blinking = styled(Heading)`
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '${props => props.children}';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
color: ${theme.colors.smoke};
|
||||
background: ${theme.colors.dark};
|
||||
overflow: hidden;
|
||||
clip: rect(0, 512px, 0, 0);
|
||||
}
|
||||
&:after {
|
||||
left: 2px;
|
||||
text-shadow: -2px 0 ${theme.colors.red};
|
||||
animation: ${animation1} 2s infinite linear alternate-reverse;
|
||||
}
|
||||
&:before {
|
||||
left: -2px;
|
||||
text-shadow: -2px 0 ${theme.colors.cyan};
|
||||
animation: ${animation2} 4s infinite linear alternate-reverse;
|
||||
}
|
||||
`
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
<Meta as={Head} title="404" />
|
||||
<ForceTheme theme="dark" />
|
||||
<Nav color="primary" dark />
|
||||
<Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
|
||||
<Blinking as="h1" variant="title" sx={{ fontSize: [128, 256] }}>
|
||||
404!
|
||||
</Blinking>
|
||||
<Text mt={2} mb={4} color="muted" variant="subtitle">
|
||||
We couldn’t find that page.
|
||||
</Text>
|
||||
<NextLink href="/" passHref>
|
||||
<Button as="a" variant="cta">
|
||||
<Icon glyph="home" size={32} />
|
||||
Go Home
|
||||
</Button>
|
||||
</NextLink>
|
||||
</Container>
|
||||
<Footer dark />
|
||||
</>
|
||||
)
|
||||
Loading…
Add table
Reference in a new issue