Nicer error page for Item page

front/src/pages/Page404.svelte

@@ -23,7 +23,7 @@
         justify-content: center;
         align-items: center;
 
-        font-size: 50px;
+        font-size: $font-size-very-fucking-big;
         text-align: center;
     }
     p {

front/src/pages/Page500.svelte

@@ -23,7 +23,7 @@
         justify-content: center;
         align-items: center;
 
-        font-size: 50px;
+        font-size: $font-size-very-fucking-big;
         text-align: center;
     }
     p {

front/src/pages/PageItem.svelte

@@ -1,5 +1,6 @@
 <script>
     import { replace } from "svelte-spa-router";
+    import { SmileySad } from "phosphor-svelte";
 
     import MenuList from "%/components/MenuList.svelte";
     import LoadingBar from "%/components/LoadingBar.svelte";
@@ -65,8 +66,10 @@
             </div>
         </div>
     {:catch error}
-        <p>Server fucking died...</p>
-        <p>{error}</p>
+        <div id="error">
+            <h1>Server fucking died...&nbsp;<SmileySad weight="fill" /></h1>
+            <p>Error: {error.message}</p>
+        </div>
     {/await}
 </div>
 
@@ -160,7 +163,8 @@
     }
 
     .other {
-        margin: 0 auto;
+        margin-left: auto;
+        margin-right: auto;
         max-width: $sizing-default-width;
     }
 
@@ -168,6 +172,29 @@
         position: relative;
     }
 
+    #error {
+        margin-left: auto;
+        margin-right: auto;
+        padding: $spacing-large;
+
+        max-width: $sizing-default-width;
+
+        display: flex;
+        flex-direction: column;
+
+        > h1 {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            font-size: $font-size-very-fucking-big;
+            text-align: center;
+        }
+        > p {
+            text-align: center;
+        }
+    }
+
     .loading {
         position: relative;
 
@@ -208,14 +235,6 @@
         }
     }
 
-    @media only screen and (max-width: 670px) {
-        .announcement-banner-loading {
-            margin: -$spacing-small;
-            margin-bottom: 0;
-            height: 250px;
-        }
-    }
-
     @keyframes loading{
         0%{
             background-position: -500px 0

front/src/styles/vars.scss

@@ -35,6 +35,7 @@ $spacing-large: 32px;
 // FONT
 $font-family: 'Erode', serif;
 
+$font-size-very-fucking-big: 50px;
 $font-size-h1: 32.44px;
 $font-size-h2: 28.83px;
 $font-size-h3: 25.63px;