-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
404.html
95 lines (90 loc) · 2.31 KB
/
404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
---
layout: default
title: "404: Page not found"
permalink: 404.html
---
<style>
#site-title::before, #site-title::after {
position: absolute;
}
#site-title::before {
content: '0x404cc';
animation: glitch-b .9s steps(1) infinite alternate, peek-b 20s steps(1) infinite alternate;
}
#site-title::after {
content: '{{ site.title }}';
animation: glitch-a 1s steps(1) infinite alternate, peek-a 20s steps(1) infinite alternate;
}
@keyframes peek-a {
0%, 12%, 20%, 26%, 30%, 45%, 48%, 55%, 61%, 69%, 80%, 87%, 95% {
visibility: hidden;
}
10%, 15%, 25%, 28%, 40%, 47%, 50%, 60%, 65%, 75%, 82%, 91% {
visibility: visible;
}
}
@keyframes peek-b {
0%, 17%, 20%, 52%, 80%, 84%, 89% {
visibility: hidden;
}
15%, 18%, 50%, 78%, 83%, 88% {
visibility: visible;
}
}
@keyframes glitch-a {
0%, 30%, 50%, 70%, 90% {
text-shadow: 0 0 .02em lime, 0 0 .02em magenta;
}
20% {
transform: translateX(-2%);
text-shadow: -.015em 0 .02em lime, -.03em 0 .02em magenta;
}
40% {
transform: translateX(1%);
text-shadow: -.03em 0 .02em lime, -.06em 0 .02em magenta;
}
60% {
transform: translateX(-3%);
text-shadow: -.1em 0 .02em lime, -.2em 0 .02em magenta;
}
80% {
transform: translateX(7%);
text-shadow: -.2em 0 .02em lime, -.4em 0 .02em magenta;
}
100% {
transform: translateX(2%);
text-shadow: -.25em 0 .02em lime, -.5em 0 .02em magenta;
}
}
@keyframes glitch-b {
10%, 30%, 50%, 70%, 100% {
text-shadow: 0 0 .02em lime, 0 0 .02em magenta;
}
0% {
transform: translateX(-2%);
text-shadow: .25em 0 .02em lime, .5em 0 .02em magenta;
}
20% {
transform: translateX(-7%);
text-shadow: .2em 0 .02em lime, .4em 0 .02em magenta;
}
40% {
transform: translateX(3%);
text-shadow: .1em 0 .02em lime, .2em 0 .02em magenta;
}
60% {
transform: translateX(-1%);
text-shadow: .03em 0 .02em lime, .06em 0 .02em magenta;
}
80% {
transform: translateX(2%);
text-shadow: .015em 0 .02em lime, .03em 0 .02em magenta;
}
}
</style>
<header>
<h1 class="page-title">4😱4, !found</h1>
</header>
<div class="content">
:(<br>colonel panik 🎷🎸<br>sementation false 🥛❌<br><br><img src="{{ site.baseurl }}/assets/media/kaboomboom.gif"/>0x4040403F out !! []<br><a href="{{ site.url }}">ctrl-z</a>
</div>