overhauling error page

public/s/css/f0ck.css

@@ -279,6 +279,11 @@ html[theme="paper"] {
   --img-border-color: #363636;
 }
 
+html[theme="paper"] .err {
+  background: black;
+  color: white;
+}
+
 html[theme="paper"] ._204863 {
   color: white;
 }
@@ -756,7 +761,8 @@ html[theme="f0ck95"] .err span {
 }
 
 html[theme="f0ck95"] .err {
-  background: #3f9595;
+  background: silver;
+  border: outset 2px gray;
 }
 
 html[theme="f0ck95"] div.posts > a::after {
@@ -853,6 +859,15 @@ html[theme="f0ck95"] .embed-responsive-image {
   right: 2px;
 }
 
+html[theme="f0ck95"] ._error_message {
+  color: black;
+  text-shadow: none;
+}
+
+html[theme="f0ck95"] ._error_topbar {
+  background: -webkit-linear-gradient(left,#08216b,#a5cef7);
+}
+
 /* f0ck95dARK */
 html[theme='f0ck95d'] {
   --accent: #fff;
@@ -862,7 +877,7 @@ html[theme='f0ck95d'] {
   --gray: silver;
   --nav-bg: #0b0a0a;
   --nav-brand-border: inset 1px black;
-  --nav-brand-bg: #022544;
+  --nav-brand-bg: #4c4c4c;
   --navigation-links-bg: #0b0b0b;
   --navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
   --navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
@@ -894,6 +909,15 @@ html[theme='f0ck95d'] {
   --img-border-color: #808080;
 }
 
+html[theme="f0ck95d"] .err {
+  background: #4c4c4c;
+  border: 2px outset gray;
+}
+
+html[theme="f0ck95d"] ._error_topbar {
+  background: #081f3e;
+}
+
 html[theme="f0ck95d"] ._204863 {
   content: " ";
   background: -webkit-linear-gradient(left,#0e111a,#073c71);
@@ -1004,20 +1028,16 @@ html[theme="f0ck95d"] .pagination > span {
 }
 
 html[theme="f0ck95d"] .dropdown-menu {
-  border-left: inset 1px silver;
+  border-left: inset 1px #4c4c4c;
-  border-bottom: outset 1px silver;
+  border-bottom: outset 1px #4c4c4c;
-  border-right: outset 1px silver;
+  border-right: outset 1px #4c4c4c;
-  border-top: outset 1px gray;
+  border-top: outset 0px #4c4c4c;
 }
 
 html[theme="f0ck95d"] .err span {
   text-shadow: 0px 0px transparent;
 }
 
-html[theme="f0ck95d"] .err {
-  background: #3f9595;
-}
-
 html[theme="f0ck95d"] div.posts > a::after {
   color: var(--white);
 }
@@ -2390,22 +2410,45 @@ a[data-mime^="audio"] {
 }
 
 /* err page */
-.err {
+._error_wrapper {
-  display: grid;
+  display: flex;
-  grid-template-rows: auto 1fr;
+  justify-content: center;
-  grid-template-columns: 1fr auto;
-  margin: 50px;
-  box-shadow: 5px 5px 5px black;
-  border-radius: .45rem;
-  background: #bb880b;
 }
 
-.err span {
+.err {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: auto;
+  margin: 50px;
+  background: #bb880b;
+  max-width: 100%;
+  width: 500px;
+}
+
+._error_topbar {
+  border-bottom: inset 2px gray;
+  text-align: left;
+  padding-left: 10px;
+}
+
+._error_content {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+._error_message {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto 1fr;
+  margin: 5px;
+  padding: 5px;
+  text-shadow: 1px 1px black;
+}
+
+.err code {
   font-weight: bold;
   text-align: left;
-  align-self: center;
+  align-self: baseline;
-  margin: 35px;
-  text-shadow: 1px 1px black;
   font-size: 15px;
 }
 

views/error.html

@@ -1,8 +1,18 @@
 @include(snippets/header)
 <div class="container">
-    <div class="err">
+    <div class="_error_wrapper">
-        <span>{{ message }}</span>
+        <div class="err">
-        <img src="/s/img/favicon.gif" alt="f0ck?!">
+            <div class="_error_topbar">
+                <span>x.x</span>
+            </div>
+            <div class="_error_content">
+                <img src="/s/img/favicon.gif" alt="f0ck?!">
+                <div class="_error_message">
+                    <span>Error</span>
+                    <code>{{ message }}</code>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 @include(snippets/footer)