From 49c42375b9769ed317eb27e8e09b24b11be9d1a9 Mon Sep 17 00:00:00 2001
From: Chris Dill <chris.rj.dill@gmail.com>
Date: Sat, 6 Feb 2021 21:51:55 +0000
Subject: [PATCH] Update _error layout - Added Banner component. - Cleanup
 formatting and indentation issues. - Made CSS clearer and easier to change.

---
 src/routes/_error.svelte | 202 +++++++++++++++++++--------------------
 1 file changed, 96 insertions(+), 106 deletions(-)

diff --git a/src/routes/_error.svelte b/src/routes/_error.svelte
index 85987c0..f804622 100644
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@@ -1,12 +1,12 @@
 <script>
     import {onMount} from 'svelte'
+    import Banner from '../components/banner.svelte'
 
     export let status;
     export let error;
 
     const dev = process.env.NODE_ENV === 'development';
 
-
     var appa = `             .,-:;//;:=,
          . :H@@@MM@M#H/.,+%;,
       ,/X+ +M@@M@MM%=,-%HMMM@X/,
@@ -217,11 +217,8 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
           ,:/%XM####H/.
                 ,.:=-.`;
 
-    //appa
-    //atom
-    //nuke
+    // appa, atom, nuke
     var options = [cake, heart, fire, tick, bang, mesa, cube];
-
     let active = cake
 
     function updateView() {
@@ -230,41 +227,32 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
     }
 
     onMount(() => updateView());
-
 </script>
 
 <style>
     * {
-        all: unset;
+        color: white !important;
         font-family: monospace;
         white-space: pre;
     }
 
-
-    div {
-        text-align: center;
+    .ascii {
+      text-align: center;
+      width: 100%;
     }
 
-
-    h1, p {
-        margin: 0 auto;
-    }
-
-    h1 {
-        font-size: 2.8em;
-        font-weight: 700;
-        margin: 0 0 0.5em 0;
-    }
-
-    p {
-        margin: 1em auto;
+    .info {
+      margin-bottom: 30px;
+      position: relative;
+      white-space: pre;
+      text-align: center;
     }
 
     pre {
-        display: inline-block;
+        /* display: inline-block; */
         margin: 0 auto;
-        position: center;
-        text-align: left;
+        /* position: center; */
+        /* text-align: left; */
         font-family: monospace;
         white-space: pre;
     }
@@ -277,100 +265,102 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
 </style>
 
 <svelte:head>
-    <title>{status}</title>
+    <title>Quartnzet - {status}</title>
 </svelte:head>
 
-<h1>{status}</h1>
+<Banner title="{status}"/>
 
-<p>{error.message}</p>
+<main class="container">
+    <p>{error.message}</p>
 
-{#if dev && error.stack}
-    <pre>{error.stack}</pre>
-{:else}
-    <audio controls autoplay>
-        <track kind="captions"/>
-        <source src="http://quartznet.info/alive.ogg" type="audio/wav">
-    </audio>
-    <div style="text-align: center; width: 100%; display: inline-block">
-        <br>
-        <div style="">
-    <pre>
-        <br>{active}</pre>
+    {#if dev && error.stack}
+        <pre>{error.stack}</pre>
+    {:else}
+        <audio controls autoplay>
+            <track kind="captions"/>
+            <source src="http://quartznet.info/alive.ogg" type="audio/wav">
+        </audio>
+        <div class="ascii">
+            <div>
+              <pre><br>{active}</pre>
+            </div>
         </div>
-        <br>
-        This was a triumph!
-        I'm making a note here:
-        Huge success!
+        <hr>
+        <p class="info">
+This was a triumph!
+I'm making a note here:
+Huge success!
 
-        It's hard to overstate
-        my satisfaction.
+It's hard to overstate
+my satisfaction.
 
-        Aperture Science:
-        We do what we must
-        because we can
-        For the good of all of us.
-        Except the ones who are dead.
+Aperture Science:
+We do what we must
+because we can
+For the good of all of us.
+Except the ones who are dead.
 
-        But there's no sense crying
-        over every mistake.
-        You just keep on trying
-        'til you run out of cake.
-        And the science gets done.
-        And you make a neat gun
-        for the people who are
-        still alive.
+But there's no sense crying
+over every mistake.
+You just keep on trying
+'til you run out of cake.
+And the science gets done.
+And you make a neat gun
+for the people who are
+still alive.
 
-        I'm not even angry...
-        I'm being so sincere right now.
-        Even though you broke my heart,
-        and killed me.
+I'm not even angry...
+I'm being so sincere right now.
+Even though you broke my heart,
+and killed me.
 
-        And tore me to pieces.
-        And threw every piece into a fire.
-        As they burned it hurt because
-        I was so happy for you!
+And tore me to pieces.
+And threw every piece into a fire.
+As they burned it hurt because
+I was so happy for you!
 
-        Now, these points of data
-        make a beautiful line.
-        And we're out of beta.
-        We're releasing on time!
-        So I'm GLaD I got burned!
-        Think of all the things we learned!
-        for the people who are
-        still alive.
+Now, these points of data
+make a beautiful line.
+And we're out of beta.
+We're releasing on time!
+So I'm GLaD I got burned!
+Think of all the things we learned!
+for the people who are
+still alive.
 
-        Go ahead and leave me...
-        I think I'd prefer to stay inside...
-        Maybe you'll find someone else
-        to help you.
-        Maybe Black Mesa?
-        That was a joke. Ha Ha. Fat Chance!
+Go ahead and leave me...
+I think I'd prefer to stay inside...
+Maybe you'll find someone else
+to help you.
+Maybe Black Mesa?
+That was a joke. Ha Ha. Fat Chance!
 
-        Anyway this cake is great!
-        It's so delicious and moist!
+Anyway this cake is great!
+It's so delicious and moist!
 
-        Look at me: still talking
-        when there's science to do!
-        When I look out there,
-        it makes me glad I'm not you.
+Look at me: still talking
+when there's science to do!
+When I look out there,
+it makes me glad I'm not you.
 
-        I've experiments to run.
-        There is research to be done.
-        On the people who are
-        still alive.
-        And believe me I am
-        still alive.
-        I'm doing science and I'm
-        still alive.
-        I feel fantastic and I'm
-        still alive.
-        While you're dying I'll be
-        still alive.
-        And when you're dead I will be
-        still alive
+I've experiments to run.
+There is research to be done.
+On the people who are
+still alive.
+And believe me I am
+still alive.
+I'm doing science and I'm
+still alive.
+I feel fantastic and I'm
+still alive.
+While you're dying I'll be
+still alive.
+And when you're dead I will be
+still alive
 
-        Still alive.
+Still alive.
 
-        Still alive.
-    </div>
-{/if}
+Still alive.
+        </p>
+    {/if}
+</main>