From 728e39a83de201bfb1c5086a4a207e6e4c8c707a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 24 Sep 2021 00:12:59 +0100
Subject: [PATCH] :sparkles: Builds a 404 not-found page

---
 src/views/404.vue | 90 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 src/views/404.vue

diff --git a/src/views/404.vue b/src/views/404.vue
new file mode 100644
index 00000000..7024fc3d
--- /dev/null
+++ b/src/views/404.vue
@@ -0,0 +1,90 @@
+<template>
+  <main class="not-found-page">
+    <h1 class="not-found-title">404</h1>
+    <h2 class="not-found-sad-face">:(</h2>
+    <p class="not-found-subtitle">Page Not Found</p>
+    <p class="not-found-message">
+      Facing Issues?
+      <a href="https://github.com/lissy93/dashy">Get Support</a>.
+    </p>
+    <router-link to="/" class="go-home">Back Home</router-link>
+  </main>
+</template>
+
+<script>
+
+export default {
+  name: 'not-found',
+  methods: {
+    setTheme() {
+      document.getElementsByTagName('html')[0].setAttribute('data-theme', 'dashy-docs');
+    },
+  },
+  mounted() {
+    this.setTheme();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+main.not-found-page {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: default;
+  background: #202020;
+  min-height: calc(99vh - var(--footer-height));
+  background-color: #202020;
+  h1.not-found-title, h2.not-found-sad-face {
+    font-size: 20vh;
+    font-family: Tahoma, monospace;
+    cursor: default;
+    color: #0c0c0c;
+    text-shadow: 0px 4px 4px #090909, 0 0 0 #000, 0px 2px 2px #000000;
+    margin: 1rem 0 0;
+  }
+  h2.not-found-sad-face {
+    font-size: 4rem;
+    margin: 0 0 1.5rem 0;
+  }
+  p {
+    font-family: monospace;
+    cursor: default;
+    color: #0c0c0c;
+    margin: 0.2rem 0;
+    text-shadow: 0 1px 1px #090909, 0 0 0 #000, 0 1px 1px #000000;
+  }
+  p.not-found-subtitle {
+    font-size: 2.8rem;
+  }
+  p.not-found-message {
+    font-size: 1.4rem;
+    font-weight: normal;
+    a {
+      color: #0c0c0c;
+      font-family: monospace;
+    }
+  }
+  a.go-home {
+    padding: 0.3rem 1rem;
+    border-radius: 3px;
+    font-size: 1.7rem;
+    cursor: pointer;
+    font-family: Tahoma, monospace;
+    color: #0c0c0c;
+    margin: 2rem 0 0;
+    text-decoration: none;
+    box-shadow: 0 4px #b83ddd;
+    background: #db78fc; box-shadow: 0 4px #b83ddd;
+    &:hover { box-shadow: 0 2px #b83ddd; }
+  }
+  ::selection { background-color: #db78fc; color: #121212; }
+}
+</style>