Add status/error message display

src/routes/+error.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
+    import { page } from "$app/stores";
     import { onMount } from "svelte";
     import Banner from "../components/Banner.svelte";
 
-  export let status: string;
-  export let error: Error;
-
+    const status = $page.status?.toString() ?? "";
     const dev = process.env.NODE_ENV === "development";
 
     var appa = `             .,-:;//;:=,
@@ -230,17 +229,14 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
 </script>
 
 <svelte:head>
-  <title>Quartnzet -</title>
+    <title>Quartznet - {status}</title>
 </svelte:head>
 
 <Banner title={status} />
 
 <main class="container">
-  <!-- <p>{error.message}</p> -->
-
-  <!-- {#if dev && error.stack} -->
-  <!-- <pre>{error.stack}</pre> -->
-  <!-- {:else} -->
+    <section>
+        <h2>{status} {$page.error?.message ?? ""}</h2>
         <audio controls autoplay>
             <track kind="captions" />
             <source src="http://quartznet.info/alive.ogg" type="audio/wav" />
@@ -251,7 +247,8 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
             </div>
         </div>
         <br />
-  <p class="info">This was a triumph! I'm making a note here: Huge success!
+        <p class="info">
+This was a triumph! I'm making a note here: Huge success!
 It's hard to overstate my satisfaction.
 
 Aperture Science: We do what we must because we can.
@@ -289,7 +286,7 @@ And when you're dead I will be still alive.
 
 Still alive.
 Still alive.</p>
-  <!-- {/if} -->
+    </section>
 </main>
 
 <style>

static/css/global.css

@@ -143,6 +143,7 @@ footer {
   color: var(--font-color);
   font-family: var(--font1);
   margin-top: 30px;
+  margin-bottom: 30px;
 }
 
 /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */