slate/pages/404.js

147 lines
3.0 KiB
JavaScript
Raw Normal View History

2020-07-31 12:09:18 +03:00
import * as React from "react";
2020-11-30 08:24:22 +03:00
import { css } from "@emotion/react";
2020-07-31 12:09:18 +03:00
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
2020-07-31 12:09:18 +03:00
const STYLES_ROOT = css`
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh;
text-align: center;
2020-08-02 01:54:55 +03:00
font-size: 1rem;
`;
2020-08-02 01:54:55 +03:00
// TODO(jim): Brand system colors.
2020-07-31 12:09:18 +03:00
const STYLES_GLITCH = css`
2020-08-01 04:38:43 +03:00
font-size: 120px;
position: relative;
2020-07-31 12:15:12 +03:00
::before,
::after {
content: "404";
2020-07-31 12:09:18 +03:00
right: 0;
left: 0;
top: 0;
bottom: 0;
2020-07-31 12:09:18 +03:00
margin: auto;
position: absolute;
background-color: #f7f7f7;
color: #000;
}
2020-07-31 12:15:12 +03:00
::before {
2020-07-31 12:09:18 +03:00
text-shadow: 2px 0 #00ffea;
animation: slate-client-animation-glitch 3s infinite linear;
2020-07-31 12:09:18 +03:00
}
2020-07-31 12:15:12 +03:00
::after {
2020-07-31 12:09:18 +03:00
text-shadow: -2px 0 #fe3a7f;
animation: slate-client-animation-glitch 2s infinite linear;
2020-07-31 12:09:18 +03:00
}
@keyframes slate-client-animation-glitch {
2020-07-31 12:09:18 +03:00
0% {
clip: rect(64px, 9999px, 66px, 0);
}
5% {
clip: rect(30px, 9999px, 36px, 0);
}
10% {
clip: rect(80px, 9999px, 71px, 0);
}
15% {
clip: rect(65px, 9999px, 64px, 0);
}
20% {
clip: rect(88px, 9999px, 40px, 0);
}
25% {
clip: rect(17px, 9999px, 79px, 0);
}
30% {
clip: rect(24px, 9999px, 26px, 0);
}
35% {
clip: rect(88px, 9999px, 26px, 0);
}
40% {
clip: rect(88px, 9999px, 80px, 0);
}
45% {
clip: rect(28px, 9999px, 51px, 0);
}
50% {
clip: rect(23px, 9999px, 40px, 0);
}
55% {
clip: rect(16px, 9999px, 86px, 0);
}
60% {
clip: rect(23px, 9999px, 94px, 0);
}
65% {
clip: rect(82px, 9999px, 39px, 0);
}
70% {
clip: rect(37px, 9999px, 92px, 0);
}
75% {
clip: rect(71px, 9999px, 52px, 0);
}
80% {
clip: rect(28px, 9999px, 74px, 0);
}
85% {
clip: rect(67px, 9999px, 96px, 0);
}
90% {
clip: rect(40px, 9999px, 88px, 0);
}
95% {
clip: rect(99px, 9999px, 61px, 0);
}
100% {
clip: rect(76px, 9999px, 77px, 0);
}
}
`;
const STYLES_MIDDLE = css`
position: relative;
min-height: 10%;
height: 100%;
2020-07-31 12:09:18 +03:00
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 24px;
`;
2020-08-01 04:34:01 +03:00
export default class NotFoundPage extends React.Component {
2020-07-31 12:09:18 +03:00
render() {
const title = `404`;
const description = "The page you are looking for does not exist";
2020-07-31 12:09:18 +03:00
const url = "https://slate.host/404";
return (
<WebsitePrototypeWrapper title={title} description={description} url={url}>
2020-07-31 12:09:18 +03:00
<div css={STYLES_ROOT}>
<WebsitePrototypeHeader />
<div css={STYLES_MIDDLE}>
2020-07-31 12:09:18 +03:00
<h1 css={STYLES_GLITCH}>404</h1>
<h2>The page you are looking for does not exist</h2>
2020-07-31 12:09:18 +03:00
</div>
<WebsitePrototypeFooter />
2020-07-31 12:09:18 +03:00
</div>
</WebsitePrototypeWrapper>
);
}
}