Redid HTTP error pages.

2025-01-30 14:52:01 +00:00 · 2025-01-30 14:52:01 +00:00 · 3e14f63bdb
commit 3e14f63bdb
parent 312be0e7fe
16 changed files with 261 additions and 92 deletions
--- a/assets/errors.css/main.css
+++ b/assets/errors.css/main.css
@ -0,0 +1,146 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    position: relative;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+html {
+    scrollbar-color: #8559a5;
+    scrollbar-color: var(--error-colour, #8559a5) #111;
+}
+
+body {
+    color: #fff;
+    font-size: 16px;
+    line-height: 25px;
+    font-family: Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+    background-color: #8559a5;
+    background-color: var(--error-colour, #8559a5);
+    background-image: url('/images/clouds.png');
+    background-blend-mode: multiply;
+    position: static;
+    display: flex;
+    flex-direction: column;
+}
+
+.error {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    margin-bottom: 10px;
+}
+
+.error-wrapper {
+    display: flex;
+    flex: 1 0 auto;
+    padding: 10px;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.error-container {
+    max-width: 700px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 4px;
+    background-color: #111;
+    box-shadow: 0 2px 4px #000;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.error-top {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #444;
+}
+
+.error-top a {
+    color: #fff;
+    text-decoration: none;
+}
+.error-top a:hover,
+.error-top a:focus {
+    text-decoration: underline;
+}
+
+.error-logo {
+    width: 50px;
+    height: 50px;
+}
+
+.error-logo a {
+    color: inherit !important;
+    text-decoration: none !important;
+}
+
+.error-logo img {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    border-width: 0;
+    object-fit: contain;
+}
+
+.error-home {
+    font-size: 1.5em;
+    line-height: 1.4em;
+}
+
+.error-nav {
+    margin-left: auto; /* lmao */
+    display: flex;
+    gap: 8px;
+    padding: 4px;
+}
+
+.error-body {
+    text-align: center;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.error-icon {
+    font-size: 4em;
+    line-height: 1.4em;
+}
+
+.error-blerb {
+    margin: 10px auto;
+    font-size: .9em;
+    line-height: 1.4em;
+}
+
+.error-footer {
+    text-align: center;
+    font-size: 12px;
+    line-height: 1.4em;
+    color: #888;
+    border-top: 1px solid #444;
+    padding-top: 4px;
+}
+
+.error-footer a {
+    color: #88a;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+}
+.error-footer a:hover,
+.error-footer a:focus {
+    text-decoration-style: solid;
+}
+.error-footer a:active {
+    color: #a88;
+}