rf-web/_sass/layouts/404.scss
2020-08-20 12:06:44 +02:00

75 lines
1.1 KiB
SCSS

.error-404 {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
h1,
p,
a,
strong {
color: var(--colour-graphite);
@include darkMode {
background-color: var(--colour-white);
padding: var(--size-base);
}
}
.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;
}
}
@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%);
}
}