added 404 page, configured jekyll a little more

This commit is contained in:
Benjamin Jones 2019-11-10 12:42:37 +01:00
parent d9056639be
commit 8907eb6820
3 changed files with 79 additions and 5 deletions

View File

@ -17,9 +17,18 @@ layout: default
} }
</style> </style>
<div class="container"> <div class="container error-404">
<h1>404</h1> <div class="fourohfour">
<h1>4</h1>
<p><strong>Page not found :(</strong></p> <h1>0</h1>
<p>The requested page could not be found.</p> <h1>4</h1>
</div>
<p><strong>Page not found</strong></p>
<p>¯\_(ツ)_/¯</p>
<a href="/">return home</a>
<script>
const f404 = document.querySelectorAll('h1, strong, p')
f404.forEach(elem => elem.addEventListener('mouseover', () => elem.parentNode.removeChild(elem)))
</script>
</div> </div>

View File

@ -18,7 +18,7 @@
# You can create any custom variable you would like, and they will be accessible # You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}. # in the templates via {{ site.myvariable }}.
title: Your awesome title title: ReclaimFutures
email: your-email@example.com email: your-email@example.com
description: >- # this means to ignore newlines until "baseurl:" description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this Write an awesome description for your new site here. You can edit this

65
_sass/layouts/404.scss Normal file
View File

@ -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%);
}
}