Update _error layout

- Added Banner component.
- Cleanup formatting and indentation issues.
- Made CSS clearer and easier to change.
This commit is contained in:
Chris Dill 2021-02-06 21:51:55 +00:00
parent ef909d0246
commit 49c42375b9

View File

@ -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;
}
.ascii {
text-align: center;
width: 100%;
}
div {
.info {
margin-bottom: 30px;
position: relative;
white-space: pre;
text-align: center;
}
h1, p {
margin: 0 auto;
}
h1 {
font-size: 2.8em;
font-weight: 700;
margin: 0 0 0.5em 0;
}
p {
margin: 1em auto;
}
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,11 +265,12 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
</style>
<svelte:head>
<title>{status}</title>
<title>Quartnzet - {status}</title>
</svelte:head>
<h1>{status}</h1>
<Banner title="{status}"/>
<main class="container">
<p>{error.message}</p>
{#if dev && error.stack}
@ -291,13 +280,13 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
<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>
<div class="ascii">
<div>
<pre><br>{active}</pre>
</div>
<br>
</div>
<hr>
<p class="info">
This was a triumph!
I'm making a note here:
Huge success!
@ -372,5 +361,6 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
Still alive.
Still alive.
</div>
</p>
{/if}
</main>