1 files changed, 41 insertions, 0 deletions
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..2ced366
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  let displayDog = ($page.status === 404) || false;
+</script>
+
+<div class="error-container">
+  <div class="error">
+    <h1>{$page.status ?? "oopsie daisies!"}</h1>
+    <p>{$page.error?.message ?? "website broke &gt;w&lt; "}</p>
+  </div>
+  {#if displayDog}
+    <div class="huh">
+      <img src="/huh.jpg" alt="dog looking at the camera with a question mark edited next to it"/>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .error-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    & .error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 36px 12px;
+      border-spacing: 36px;
+
+      & :not(:last-child) {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+</style>
+