From 364984fe38ca997c413adb58536ca8a954c04807 Mon Sep 17 00:00:00 2001
From: William Felker <gndclouds@icloud.com>
Date: Fri, 31 Jul 2020 17:09:18 +0800
Subject: [PATCH 1/5] First 404 page

---
 pages/404.js   | 381 +++++++++++++++++++++++++++++++++++++++++++++++++
 pages/index.js |  15 ++
 2 files changed, 396 insertions(+)
 create mode 100644 pages/404.js

diff --git a/pages/404.js b/pages/404.js
new file mode 100644
index 00000000..7dd6db3b
--- /dev/null
+++ b/pages/404.js
@@ -0,0 +1,381 @@
+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`
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+const STYLES_404 = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 60vh;
+  h1 {
+    font-size: 120px;
+  }
+`;
+
+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`
+  :hover::before,
+  :hover::after {
+    right: 0;
+    margin: auto;
+    content: "404";
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 80vh;
+    min-width: 50vh;
+    overflow: hidden;
+    background-color: #f7f7f7;
+    color: #000;
+  }
+  :hover::before {
+    left: 8px;
+    text-shadow: 2px 0 #00ffea;
+    animation: glitch 3s infinite linear;
+  }
+  :hover::after {
+    left: 8px;
+    text-shadow: -2px 0 #fe3a7f;
+    animation: glitch 2s infinite linear;
+  }
+  @-moz-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);
+    }
+  }
+  @-webkit-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);
+    }
+  }
+  @-o-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);
+    }
+  }
+  @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 IndexPage 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>
+    );
+  }
+}
diff --git a/pages/index.js b/pages/index.js
index 1b471f95..b8592124 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -13,6 +13,21 @@ const STYLES_ROOT = css`
     padding: 128px 24px 128px 24px;
   }
 `;
+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_HEADING = css`
   font-weight: 400;

From 8f6bcd6a90c3ba8148582d580c2652624a8f050d Mon Sep 17 00:00:00 2001
From: William Felker <gndclouds@icloud.com>
Date: Fri, 31 Jul 2020 17:15:12 +0800
Subject: [PATCH 2/5] removed on hover effect

---
 pages/404.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/404.js b/pages/404.js
index 7dd6db3b..758abdd6 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -40,8 +40,8 @@ const STYLES_NAVLINKS = css`
   `;
 
 const STYLES_GLITCH = css`
-  :hover::before,
-  :hover::after {
+  ::before,
+  ::after {
     right: 0;
     margin: auto;
     content: "404";
@@ -55,12 +55,12 @@ const STYLES_GLITCH = css`
     background-color: #f7f7f7;
     color: #000;
   }
-  :hover::before {
+  ::before {
     left: 8px;
     text-shadow: 2px 0 #00ffea;
     animation: glitch 3s infinite linear;
   }
-  :hover::after {
+  ::after {
     left: 8px;
     text-shadow: -2px 0 #fe3a7f;
     animation: glitch 2s infinite linear;

From fee1657d8f8096495141200aa46d9c4bd8e822f7 Mon Sep 17 00:00:00 2001
From: William Felker <gndclouds@icloud.com>
Date: Sat, 1 Aug 2020 09:34:01 +0800
Subject: [PATCH 3/5] PR #133 update + rolled back index.js

---
 pages/404.js   | 204 ++-----------------------------------------------
 pages/index.js |  20 +----
 2 files changed, 6 insertions(+), 218 deletions(-)

diff --git a/pages/404.js b/pages/404.js
index 758abdd6..626d6638 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -6,9 +6,10 @@ import { css } from "@emotion/react";
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 
 const STYLES_ROOT = css`
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
+  padding: 0px 88px ;
+  @media (max-width: 768px) {
+    padding: 0px 24px ;
+}
 `;
 
 const STYLES_404 = css`
@@ -65,201 +66,6 @@ const STYLES_GLITCH = css`
     text-shadow: -2px 0 #fe3a7f;
     animation: glitch 2s infinite linear;
   }
-  @-moz-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);
-    }
-  }
-  @-webkit-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);
-    }
-  }
-  @-o-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);
-    }
-  }
   @keyframes glitch {
     0% {
       clip: rect(64px, 9999px, 66px, 0);
@@ -343,7 +149,7 @@ const STYLES_FOOTERLINKS = css`
   }
 `;
 
-export default class IndexPage extends React.Component {
+export default class NotFoundPage extends React.Component {
   render() {
     const title = `404`;
     const description = "Oops something broke";
diff --git a/pages/index.js b/pages/index.js
index b8592124..0959f973 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -8,33 +8,16 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 
 const STYLES_ROOT = css`
   padding: 128px 88px 256px 88px;
-
   @media (max-width: 768px) {
     padding: 128px 24px 128px 24px;
   }
 `;
-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_HEADING = css`
   font-weight: 400;
   font-size: 2.88rem;
   line-height: 1.5;
   color: ${Constants.system.black};
-
   @media (max-width: 768px) {
     font-size: 1rem;
   }
@@ -45,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;
   }
@@ -95,4 +77,4 @@ export default class IndexPage extends React.Component {
       </WebsitePrototypeWrapper>
     );
   }
-}
+}
\ No newline at end of file

From 83cd2b68f026900a147cf4b9157cf1e4ee52e3d9 Mon Sep 17 00:00:00 2001
From: William Felker <gndclouds@icloud.com>
Date: Sat, 1 Aug 2020 09:38:43 +0800
Subject: [PATCH 4/5] PR #133 debugging safari

---
 pages/404.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pages/404.js b/pages/404.js
index 626d6638..7f5026f9 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -19,9 +19,6 @@ const STYLES_404 = css`
   align-items: center;
   text-align: center;
   min-height: 60vh;
-  h1 {
-    font-size: 120px;
-  }
 `;
 
 const STYLES_NAV = css`
@@ -41,6 +38,7 @@ const STYLES_NAVLINKS = css`
   `;
 
 const STYLES_GLITCH = css`
+  font-size: 120px;
   ::before,
   ::after {
     right: 0;

From 7e909fb24e5a8b5eb90da2a5e967b84c064f5f25 Mon Sep 17 00:00:00 2001
From: William Felker <gndclouds@icloud.com>
Date: Sat, 1 Aug 2020 10:35:24 +0800
Subject: [PATCH 5/5] FIXED: Safari content dislay issue.

---
 pages/404.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/pages/404.js b/pages/404.js
index 7f5026f9..14a458c6 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -45,11 +45,6 @@ const STYLES_GLITCH = css`
     margin: auto;
     content: "404";
     position: absolute;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    min-height: 80vh;
-    min-width: 50vh;
     overflow: hidden;
     background-color: #f7f7f7;
     color: #000;