From 297bafcdc8875eadf0cbae6c206dd64cba6434cd Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sat, 20 Nov 2021 22:55:25 +0100
Subject: [PATCH] Add style to error pages

---
 src/assets/views/errors/Error.svelte | 103 +++++++++++++++++++++++++--
 1 file changed, 99 insertions(+), 4 deletions(-)

diff --git a/src/assets/views/errors/Error.svelte b/src/assets/views/errors/Error.svelte
index 00248a1..a881ef5 100644
--- a/src/assets/views/errors/Error.svelte
+++ b/src/assets/views/errors/Error.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import {locals} from "../../ts/stores.js";
+    import FlashMessages from "../components/FlashMessages.svelte";
+    import Icon from "../utils/Icon.svelte";
 
     const previousUrl = $locals.getPreviousUrl();
 
@@ -15,13 +17,14 @@
 
 <svelte:head>
     <title>{code + ' - ' + message}</title>
-    <link rel="stylesheet" href="/css/error.css">
+
+    <link rel="stylesheet" href="/css/layout.css">
 </svelte:head>
 
 <div class="logo"><a href="/">{$locals.app.name}</a></div>
 
 <main>
-    <!--TODO: flash messages-->
+    <FlashMessages/>
 
     <div class="error-code">{code}</div>
     <div class="error-message">{message}</div>
@@ -31,10 +34,10 @@
 
     <nav>
         {#if previousUrl && previousUrl !== '/' && previousUrl !== $locals.url}
-            <a href={previousUrl} class="button"><i data-feather="arrow-left"></i> Go back</a>
+            <a href={previousUrl} class="button bold"><Icon name="arrow-left"/> Go back</a>
         {/if}
 
-        <a href="/" class="button"><i data-feather="home"></i> Go to homepage</a>
+        <a href="/" class="button"><Icon name="home"/> Go to homepage</a>
     </nav>
 </main>
 
@@ -45,3 +48,95 @@
         <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>