146 lines
2.7 KiB
Svelte
146 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import {locals} from "../../ts/stores.js";
|
|
import FlashMessages from "../components/FlashMessages.svelte";
|
|
import Icon from "../utils/Icon.svelte";
|
|
import CommonScripts from "./CommonScripts.svelte";
|
|
|
|
const previousUrl = $locals.previousUrl;
|
|
|
|
export let code;
|
|
code = $locals.error_code || code;
|
|
|
|
export let message;
|
|
message = $locals.error_message || message;
|
|
|
|
export let instructions;
|
|
instructions = $locals.error_instructions || instructions;
|
|
</script>
|
|
|
|
<CommonScripts/>
|
|
|
|
<svelte:head>
|
|
<title>{code + ' - ' + message}</title>
|
|
|
|
<link rel="stylesheet" href="/css/layout.css">
|
|
</svelte:head>
|
|
|
|
<div class="logo"><a href="/">{$locals.app.name}</a></div>
|
|
|
|
<main>
|
|
<FlashMessages/>
|
|
|
|
<div class="error-code">{code}</div>
|
|
<div class="error-message">{message}</div>
|
|
{#if instructions}
|
|
<div class="error-instructions">{@html instructions}</div>
|
|
{/if}
|
|
|
|
<nav>
|
|
{#if previousUrl && previousUrl !== '/' && previousUrl !== $locals.url}
|
|
<a href={previousUrl} class="button bold"><Icon name="arrow-left"/> Go back</a>
|
|
{/if}
|
|
|
|
<a href="/" class="button"><Icon name="home"/> Go to homepage</a>
|
|
</nav>
|
|
</main>
|
|
|
|
<div class="contact">
|
|
<p>Error ID: {$locals.error_id || 'Request has no indentifier.'}</p>
|
|
<p>
|
|
If you think this isn't right, please contact us with the above error ID at
|
|
<a href="mailto:{$locals.app.contact_email}">{$locals.app.contact_email}</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
header, footer {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 0;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.messages {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.error-code {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.error-message {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.error-instructions {
|
|
margin-top: 32px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
nav {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
&::before {
|
|
content: "Oops";
|
|
position: absolute;
|
|
z-index: -1;
|
|
|
|
font-size: #{'min(50vh, 40vw)'};
|
|
opacity: 0.025;
|
|
}
|
|
}
|
|
|
|
.contact {
|
|
text-align: center;
|
|
padding: 8px;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
margin-top: 24px;
|
|
text-align: center;
|
|
|
|
a {
|
|
position: relative;
|
|
padding: 16px;
|
|
|
|
color: var(--on-background);
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
|
|
&::before {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
background-image: url(../../img/logo.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
|
|
opacity: 0.075;
|
|
filter: contrast(0);
|
|
}
|
|
}
|
|
}
|
|
</style>
|