139 lines
4.4 KiB
HTML
139 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>{{.Host}}: {{ph "http.request.uri.path"}}</title>
|
|
<style>
|
|
body {
|
|
background-image: url(./dark-matter.png);
|
|
animation: 7s infinite ease-in-out day-cycle-bg;
|
|
}
|
|
@keyframes day-cycle-bg {
|
|
0% {
|
|
background-color: #000;
|
|
}
|
|
15% {
|
|
background-color: #121212;
|
|
}
|
|
75% {
|
|
background-color: #121212;
|
|
}
|
|
100% {
|
|
background-color: #000;
|
|
}
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
margin: 3vh auto;
|
|
max-width: 25vw;
|
|
animation: 7s infinite alternate day-cycle-filter;
|
|
}
|
|
@keyframes day-cycle-filter {
|
|
0% {
|
|
filter: brightness(1.00) contrast(0.66) grayscale(0.75);
|
|
}
|
|
15% {
|
|
filter: brightness(1.33) contrast(1.00) grayscale(0.66);
|
|
}
|
|
75% {
|
|
filter: brightness(1.33) contrast(1.10) grayscale(0.66);
|
|
}
|
|
100% {
|
|
filter: brightness(1.00) contrast(0.66) grayscale(0.75);
|
|
}
|
|
}
|
|
|
|
#sun {
|
|
display: block;
|
|
content: "";
|
|
margin: 0 auto;
|
|
height: 10vw;
|
|
max-width: 100vw;
|
|
background-color: #993333;
|
|
box-shadow: 0 0 10px 5px #000 inset;
|
|
position: relative;
|
|
top: 3vh;
|
|
transform: rotateX(180deg) rotateY(180deg);
|
|
animation: 7s infinite linear day-cycle-celestial;
|
|
}
|
|
@keyframes day-cycle-celestial {
|
|
0% {
|
|
clip-path: circle(33px at 100% 0%);
|
|
}
|
|
25% {
|
|
clip-path: circle(33px at 75% 25%);
|
|
}
|
|
50% {
|
|
clip-path: circle(33px at center 66%);
|
|
}
|
|
75% {
|
|
clip-path: circle(33px at 25% 25%);
|
|
}
|
|
100% {
|
|
clip-path: circle(33px at 0% 0%);
|
|
}
|
|
}
|
|
|
|
#err-message, #err-trace {
|
|
display: block;
|
|
margin: 50px auto;
|
|
}
|
|
#err {
|
|
margin: 2vh auto;
|
|
max-width: 75vw;
|
|
color: #fff;
|
|
background-color: #000;
|
|
border-radius: 10px;
|
|
padding: 3%;
|
|
position: relative;
|
|
top: -50px;
|
|
z-index: -1;
|
|
animation: 7s infinite ease-in-out day-cycle-bxsh;
|
|
}
|
|
@keyframes day-cycle-bxsh {
|
|
0% {
|
|
box-shadow: 0 0 25px 15px #000 inset;
|
|
}
|
|
15% {
|
|
box-shadow: 0 0 25px 15px #121212 inset;
|
|
}
|
|
75% {
|
|
box-shadow: 0 0 25px 15px #121212 inset;
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 25px 15px #000 inset;
|
|
}
|
|
}
|
|
|
|
#err-message {
|
|
max-width: 66%;
|
|
text-align: justify;
|
|
}
|
|
#err-trace {
|
|
max-width: 50%;
|
|
}
|
|
#err-summary {
|
|
text-align: center;
|
|
color: #993333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="sun"></div>
|
|
<img src="mythe-sisyphus-klein.png" alt="Sisyphus carrying a boulder" srcset="https://kariannekirsten.com/wp-content/uploads/2022/12/mythe-klein.png"/>
|
|
<main>
|
|
<article id="err">
|
|
<section id="err-summary" class="post frontmatter">
|
|
<h1>Under Construction</h1>
|
|
<h2>Err. {{ph "http.error.status_code"}}: {{ph "http.error.status_text"}}</h2>
|
|
</section>
|
|
<section id="err-body" class="post body">
|
|
<p id="err-message" class="message">{{ph "http.error.message"}}</p>
|
|
<code id="err-trace" class="trace http">
|
|
{{ph "http.error.trace"}}
|
|
</code>
|
|
</section>
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html> |