proper errors

public/s/css/f0ck.css

@@ -465,7 +465,7 @@ div#posts {
   grid-gap: 5px;
   margin: 0;
   padding: 0;
-  margin-top: 15px;
+  /* margin-top: 15px; */
   margin-bottom: 35px;
 }
 
@@ -527,7 +527,8 @@ div#posts > a:hover::after {
   text-transform: uppercase;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  /* justify-content: space-between; */
+  justify-content: start;
   border-bottom: 1px solid var(--nav-border-color);
 }
 
@@ -592,7 +593,8 @@ span.f0ck {
 }
 
 .nav-item {
-  width: 100%;
+  width: auto;
+  white-space: nowrap;
   text-align: center;
 }
 
@@ -697,11 +699,16 @@ span.placeholder {
   display: inline-block;
 }
 /* Navbar media queries */
+/* @media(max-width: 360px) {
+  .navbar {
+    justify-content: space-between;
+  }
+} */
 @media (max-width: 1056px) {
   .navbar {
     width: 100%;
-    display: grid;
+    display: flex;
-    justify-content: normal;
+    justify-content: center;
   }
   .pagination-wrapper {
     width: 100%;
@@ -799,8 +806,8 @@ span.placeholder {
   }
 
   .dropdown-menu {
-    position: relative;
+    position: absolute;
-    top: 0;
+    top: ;
     left: 0;
     margin-right: 5px;
     margin-left: 5px;
@@ -822,10 +829,8 @@ span.placeholder {
 
 .index-container {
   width: 100%;
-  padding-right: 15;
+  padding: 5px;
-  padding-left: 15;
+  background-color: var(--navigation-links-bg);
-  margin-left: auto;
-  margin-right: auto;
 }
 
 @media (min-width: 361px) {
@@ -1532,3 +1537,28 @@ span#favs {
 a[data-mime^="audio"] {
   background-color: var(--accent);
 }
+
+/* err page */
+.err {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr auto;
+  margin: 50px;
+  box-shadow: 5px 5px 5px black;
+  border-radius: .45rem;
+  background: #bb880b;
+}
+
+.err span {
+  font-weight: bold;
+  text-align: left;
+  align-self: center;
+  margin: 35px;
+  text-shadow: 1px 1px black;
+  font-size: 15px;
+}
+
+.err img {
+  margin: 10px;
+  align-self: center;
+}

src/inc/routes/inc/f0cklib.mjs

@@ -225,7 +225,7 @@ export default {
     if(!actitem) { // sfw-check!
       return {
         success: false,
-        message: "Sorry this post is currently not visible, possible causes are: not tagged, post doesn't exist(yet) or invalid filter settings"
+        message: "Sorry, this post is currently not visible."
       };
     }
   

views/error.html

@@ -1,3 +1,8 @@
 @include(snippets/header)
-<h1 style="text-align: center;">{{ message }}</h1>
+<div class="container">
+    <div class="err">
+        <span>{{ message }}</span>
+        <img src="https://f0ck.me/s/img/favicon.gif" alt="f0ck?!">
+    </div>
+</div>
 @include(snippets/footer)