Merge pull request #133 from filecoin-project/@gndclouds/404

@gndclouds/404

pages/404.js

@@ -0,0 +1,180 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import { css } from "@emotion/react";
+
+import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
+
+const STYLES_ROOT = css`
+  padding: 0px 88px ;
+  @media (max-width: 768px) {
+    padding: 0px 24px ;
+}
+`;
+
+const STYLES_404 = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 60vh;
+`;
+
+const STYLES_NAV = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 88px 0px;
+  font-family: ${Constants.font.text};
+`;
+
+const STYLES_NAVLINKS = css`
+  display: flex;
+  a{
+    margin-left: 20px;
+    text-decoration none;
+  }
+  `;
+
+const STYLES_GLITCH = css`
+  font-size: 120px;
+  ::before,
+  ::after {
+    right: 0;
+    margin: auto;
+    content: "404";
+    position: absolute;
+    overflow: hidden;
+    background-color: #f7f7f7;
+    color: #000;
+  }
+  ::before {
+    left: 8px;
+    text-shadow: 2px 0 #00ffea;
+    animation: glitch 3s infinite linear;
+  }
+  ::after {
+    left: 8px;
+    text-shadow: -2px 0 #fe3a7f;
+    animation: glitch 2s infinite linear;
+  }
+  @keyframes glitch {
+    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_FOOTER = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 88px 0px;
+  font-family: ${Constants.font.text};
+`;
+
+const STYLES_FOOTERLINKS = css`
+  display: flex;
+  a {
+    margin-left: 20px;
+    text-decoration: none;
+  }
+`;
+
+export default class NotFoundPage extends React.Component {
+  render() {
+    const title = `404`;
+    const description = "Oops something broke";
+    const url = "https://slate.host/404";
+
+    return (
+      <WebsitePrototypeWrapper
+        title={title}
+        description={description}
+        url={url}
+      >
+        <div css={STYLES_ROOT}>
+          <div css={STYLES_NAV}>
+            <a href="/">Slate {Constants.values.version}</a>
+            <div css={STYLES_NAVLINKS}>
+              <a href="/system">Design System</a>
+              <a href="https://github.com/filecoin-project/slate">View Source</a>
+            </div>
+          </div>
+          <div css={STYLES_404}>
+            <h1 css={STYLES_GLITCH}>404</h1>
+            <h2>Page not found</h2>
+          </div>
+          <div css={STYLES_FOOTER} >
+          <p>Powered by <a href="https://textile.io">Textile</a> and <a href="https://filecoin.io">Filecoin</a></p>
+          <div css={STYLES_FOOTERLINKS} >
+                <a href="https://filecoin.io/slack">Slack</a>
+                <a href="https://github.com/filecoin-project/slate/issues">Contact</a>
+          </div>
+      </div>
+        </div>
+      </WebsitePrototypeWrapper>
+    );
+  }
+}

pages/index.js

@@ -8,7 +8,6 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 
 const STYLES_ROOT = css`
   padding: 128px 88px 256px 88px;
-
   @media (max-width: 768px) {
     padding: 128px 24px 128px 24px;
   }
@@ -19,7 +18,6 @@ const STYLES_HEADING = css`
   font-size: 2.88rem;
   line-height: 1.5;
   color: ${Constants.system.black};
-
   @media (max-width: 768px) {
     font-size: 1rem;
   }
@@ -30,7 +28,6 @@ const STYLES_PARAGRAPH = css`
   font-size: 2.88rem;
   line-height: 1.5;
   color: ${Constants.system.pitchBlack};
-
   @media (max-width: 768px) {
     font-size: 1rem;
   }