Move error pages to fe

static/error/404/404.conf

@@ -0,0 +1,13 @@
+error_page 403 =404 /lain_404.gif;
+error_page 404 /lain_404.gif;
+location = /lain_404.gif {
+        root /opt/pleroma/instance/static/static/error/404;
+        internal;
+        add_header Strict-Transport-Security "max-age=31536000; includeSubdomains; preload";
+        add_header X-Content-Type-Options "nosniff";
+        add_header X-XSS-Protection "1; mode=block";
+        add_header X-Permitted_Cross-Domain-Policies none;
+        add_header X-Frame-Options "self";
+        add_header Referrer-Policy "same-origin";
+        add_header X-Download-Options noopen;
+}

static/error/500/500.conf

@@ -0,0 +1,21 @@
+error_page 500 502 503 504 /500.html;
+location = /500.html {
+  root /opt/pleroma/instance/static/static/error/500;
+  internal;
+    add_header Strict-Transport-Security "max-age=31536000; includeSubdomains; preload";
+    add_header X-Content-Type-Options "nosniff";
+    add_header X-XSS-Protection "1; mode=block";
+    add_header X-Permitted_Cross-Domain-Policies none;
+    add_header X-Frame-Options "self";
+    add_header Referrer-Policy "same-origin";
+    add_header X-Download-Options noopen;
+
+    # CSP
+    add_header Content-Security-Policy "default-src 'none'; connect-src 'self'; font-src 'self'; img-src 'self' https: data:; media-src 'self' https:; script-src 'self'; style-src 'self' 'unsafe-inline'; worker-src 'self'; frame-ancestors 'self'";
+}
+
+
+
+
+
+

static/error/500/500.css

@@ -0,0 +1,133 @@
+: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%);
+}
+

static/error/500/500.html

@@ -0,0 +1,13 @@
+<head>
+  <Title> Shit's broken yo!</title>
+  <link rel="stylesheet" type="text/css" href="./500.css">
+  <script src="./500.js"></script>
+</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>neckbe&#97;rd&#64;ra&#112;e&#46;&#108;ol</p>
+<p>D016 B622 75BA BCBC 5B3A FCED A7D9 4824 0EB3 9C4E</p>

static/error/500/500.js

@@ -0,0 +1,3 @@
+/* \(")/ -( )- /(_)\
+*/
+