diff --git a/404.html b/404.html index 086a5c9..d11bede 100644 --- a/404.html +++ b/404.html @@ -17,9 +17,18 @@ layout: default } -
-

404

+
+
+

4

+

0

+

4

+
+

Page not found

+

¯\_(ツ)_/¯

+ return home +
diff --git a/_config.yml b/_config.yml index 60e14aa..802d480 100644 --- a/_config.yml +++ b/_config.yml @@ -18,7 +18,7 @@ # You can create any custom variable you would like, and they will be accessible # in the templates via {{ site.myvariable }}. -title: Your awesome title +title: ReclaimFutures email: your-email@example.com description: >- # this means to ignore newlines until "baseurl:" Write an awesome description for your new site here. You can edit this diff --git a/_sass/layouts/404.scss b/_sass/layouts/404.scss new file mode 100644 index 0000000..9a318da --- /dev/null +++ b/_sass/layouts/404.scss @@ -0,0 +1,65 @@ +.error-404 { + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .fourohfour { + display: flex; + flex-direction: row; + h1 { + animation: grain 1s steps(10) infinite; + + &:first-of-type { + animation-duration: 2s; + } + &:last-of-type { + animation-duration: 3s; + } + } + } + + a { + transition: transform 5s ease-in-out; + + &:hover { + transform: scale(20) rotate(360deg); + } + } +} + +@keyframes grain { + 0%, + 100% { + transform: translate(0, 0); + } + 10% { + transform: translate(-5%, -10%); + } + 20% { + transform: translate(-15%, 5%); + } + 30% { + transform: translate(7%, -25%); + } + 40% { + transform: translate(-5%, 25%); + } + 50% { + transform: translate(-15%, 10%); + } + 60% { + transform: translate(15%, 0%); + } + 70% { + transform: translate(0%, 15%); + } + 80% { + transform: translate(3%, 35%); + } + 90% { + transform: translate(-10%, 10%); + } +}