From a7831d22026a210eca0eecdcbf2b2f56125a9cb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 3 Mar 2020 17:41:06 +0100
Subject: [PATCH] Add error page

---
 src/organisms/Footer.svelte | 62 ++++++++++++++++++------------------
 src/routes/_error.svelte    | 63 ++++++++++++++++++++++++++++++++-----
 src/style/pages/_page.scss  |  8 +++++
 3 files changed, 95 insertions(+), 38 deletions(-)

diff --git a/src/organisms/Footer.svelte b/src/organisms/Footer.svelte
index 84ea403..7f83e35 100644
--- a/src/organisms/Footer.svelte
+++ b/src/organisms/Footer.svelte
@@ -1,37 +1,39 @@
 <script>
-	// Svelte
-	import { site, currentLocation } from '../utils/store'
+    // Svelte
+    import { site, currentLocation } from '../utils/store'
 
-	// Components
-	import LinkTranslate from '../atoms/LinkTranslate'
-	import Switcher from '../molecules/Switcher'
+    // Components
+    import LinkTranslate from '../atoms/LinkTranslate'
+    import Switcher from '../molecules/Switcher'
 </script>
 
 <footer class="footer">
-	<div class="wrap">
-		<div class="footer__left">
-			<Switcher radius="30" />
-		</div>
+    <div class="wrap">
+        <div class="footer__left">
+            <Switcher radius="30" />
+        </div>
 
-		<ul class="footer__right">
-			<li>
-				<ul>
-					<li>
-						<LinkTranslate href="/credits" text="Credits" rel="prefetch" />
-					</li>
-					<li class="instagram">
-						<LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
-							<img src="/img/icons/instagram.svg" alt="Instagram">
-						</LinkTranslate>
-					</li>
-				</ul>
-			</li>
-			<li class="cetrucflotte">
-				<span>A project by</span>
-				<a href="https://cetrucflotte.com" target="_blank" rel="noopener">
-					<img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's">
-				</a>
-			</li>
-		</ul>
-	</div>
+        <ul class="footer__right">
+            <li>
+                <ul>
+                    <li>
+                        <LinkTranslate href="/credits" text="Credits" rel="prefetch" />
+                    </li>
+                    {#if $site}
+                    <li class="instagram">
+                        <LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
+                            <img src="/img/icons/instagram.svg" alt="Instagram">
+                        </LinkTranslate>
+                    </li>
+                    {/if}
+                </ul>
+            </li>
+            <li class="cetrucflotte">
+                <span>A project by</span>
+                <a href="https://cetrucflotte.com" target="_blank" rel="noopener">
+                    <img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's">
+                </a>
+            </li>
+        </ul>
+    </div>
 </footer>
diff --git a/src/routes/_error.svelte b/src/routes/_error.svelte
index aff7301..5aeadef 100644
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@@ -1,17 +1,64 @@
 <script>
-	export let status
-	export let error
+    import { onMount } from 'svelte'
 
-	const dev = process.env.NODE_ENV === 'development'
+    // Dependencies
+    import AOS from 'aos'
+
+    // Components
+    import IconArrow from '../atoms/IconArrow'
+    import TitleSite from '../atoms/TitleSite'
+    import Button from '../atoms/Button'
+    import InteractiveGlobe from '../molecules/InteractiveGlobe'
+    import Footer from '../organisms/Footer'
+
+    // Props
+    export let status
+    export let error
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // Scroll apparitions
+        if (process.browser) {
+            AOS.init()
+        }
+    })
 </script>
 
 <svelte:head>
-	<title>{status}</title>
+    <title>Houses Of - {error.message}</title>
 </svelte:head>
 
-<h1>{status}</h1>
-<p>{error.message}</p>
+<section class="page">
+    <div class="wrap">
+        <div class="page__top">
+            <a href="/" class="button-control button-control--pink dir-left">
+                <IconArrow direction="left" color="#fff" class="icon" />
+                <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
+            </a>
 
-{#if dev && error.stack}
-	<pre>{error.stack}</pre>
+            <TitleSite />
+        </div>
+
+        <div class="page__description style-description">
+            <p>
+                Oh no…
+                Looks like something wrong just happened. Like a nasty error {status}.
+            </p>
+            <Button href="/" class="button" text="Go back to the homepage" on:click={() => window.location.href = '/'} />
+        </div>
+
+        <InteractiveGlobe type="part" />
+    </div>
+
+    <Footer />
+</section>
+
+
+{#if process.env.NODE_ENV === 'development' && error.stack}
+<div class="wrap">
+    <pre>{error.stack}</pre>
+</div>
 {/if}
diff --git a/src/style/pages/_page.scss b/src/style/pages/_page.scss
index 84784f5..03f6a4d 100644
--- a/src/style/pages/_page.scss
+++ b/src/style/pages/_page.scss
@@ -38,6 +38,14 @@
             max-width: 472px;
             margin-bottom: 120px;
         }
+
+        // Some margins
+        h1 + p {
+            margin-top: 24px;
+        }
+        p + .button {
+            margin-top: 40px;
+        }
     }
 
     // Category