1
0
mirror of https://git.pleroma.social/sjw/pleroma-fe.git synced 2025-01-18 18:29:55 +01:00
Your New SJW Waifu 1271545c83 update 500 page
2021-01-15 01:23:14 -06:00

150 lines
4.4 KiB
HTML

<head>
<title> Shit's broken yo!</title>
<style>
:root {
font-size: 20px;
font-family: 'IBM Plex Mono';
line-height: 1.5;
color: rgba(255, 255, 255, 0.25);
}
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #333333;
}
a {
color: white;
display: inline;
}
#error {
margin-bottom: 1rem;
font-size: 2rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.075em;
color: #C94D4D;
-webkit-animation: pulse 4s infinite alternate;
animation: pulse 4s infinite alternate;
position: relative;
}
@-webkit-keyframes pulse {
from {
opacity: 0.5;
}
50% {
opacity: 0.5;
}
}
@keyframes pulse {
from {
opacity: 0.5;
}
50% {
opacity: 0.5;
}
}
#error::before {
content: '';
width: 0.75rem;
height: 50vh;
margin-bottom: 0.75em;
position: absolute;
left: 50%;
bottom: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1)
60%, transparent 100%);
}
#desc {
margin: 2em 0 1em;
}
.error-num, .error-num__clip, .error-num__clip::before,
.error-num__clip-left {
position: relative;
font-size: 10rem;
font-family: 'Oswald';
letter-spacing: -0.01em;
color: white;
-webkit-animation: colorSplit 1.25s steps(2, end) infinite;
animation: colorSplit 1.25s steps(2, end) infinite;
}
@-webkit-keyframes colorSplit {
25% {
text-shadow: -0.02em 0 0 #ED008C, 0.025em 0 0 #0087EF;
}
75% {
text-shadow: -0.035em 0 0 #ED008C, 0.04em 0 0 #0087EF;
}
}
@keyframes colorSplit {
25% {
text-shadow: -0.02em 0 0 #ED008C, 0.025em 0 0 #0087EF;
}
75% {
text-shadow: -0.035em 0 0 #ED008C, 0.04em 0 0 #0087EF;
}
}
.error-num__clip, .error-num__clip::before, .error-num__clip-left {
position: absolute;
top: 0;
left: -2px;
z-index: 10;
color: #333;
overflow: visible;
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 25%, 0 25%, 0 30%,
100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 65%, 0 65%, 0 80%,
100% 80%, 100% 85%, 0 85%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0, 100% 25%, 0 25%, 0 30%,
100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 65%, 0 65%, 0 80%,
100% 80%, 100% 85%, 0 85%, 0% 0%);
-webkit-animation: glitch 1s steps(2, start) infinite;
animation: glitch 1s steps(2, start) infinite;
}
@-webkit-keyframes glitch {
30% {
left: 0;
}
to {
left: 0;
}
}
@keyframes glitch {
30% {
left: 0;
}
to {
left: 0;
}
}
.error-num__clip::before, .error-num__clip-left::before {
content: '500';
left: 0.05em;
color: white;
z-index: 9;
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 26%, 0 26%, 0 29%,
100% 29%, 100% 51%, 0 51%, 0 59%, 100% 59%, 100% 66%, 0 66%, 0 79%,
100% 79%, 100% 86%, 0 86%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0, 100% 26%, 0 26%, 0 29%,
100% 29%, 100% 51%, 0 51%, 0 59%, 100% 59%, 100% 66%, 0 66%, 0 79%,
100% 79%, 100% 86%, 0 86%, 0% 0%);
}
</style>
</head>
<div id="error">Error</div> <div class="error-num">500
<div class="error-num__clip">500</div>
</div>
<p id="desc">Shit's broken yo</p>
<p>Bitch to @sjw about it in an email</p>
<p><a href='mailto&#58;&#115;jw%40&#102;&#101;dor&#37;61&#46;&#101;ma&#37;6&#57;l'>&#115;jw&#64;f&#101;dora&#46;&#101;mail</a></p>
<p>While you wait, see if <a href="https://captain.neckbeard.xyz/?song=恋する☆宇宙戦争っ!! あばばばみっくす" target="_blank">this</a> is still up.</p>
<p>I'm probably on one of the following instances:</p>
<p><a href="https://gameliberty.club/@sjw" target="_blank">@sjw@gameliberty.club</a></p>
<p><a href="https://queer.hacktivis.me/sjw" target="_blank">@sjw@queer.hacktivis.me</a></p>
<p><a href="https://freespeechextremist.com/sjw" target="_blank">@sjw@freespeechextremist.com</a></p>
<p><a href="https://blob.cat/sjw" target="_blank">@sjw@blob.cat</a></p>