swaf/src/assets/views/templates/ErrorTemplate.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.getPreviousUrl();

    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: 64px;

				opacity: 0.075;
				filter: contrast(0);
			}
		}
	}
</style>