From ace334e5a315d56e03068120413f31e9a63c040f Mon Sep 17 00:00:00 2001
From: "Jill \"oatmealine\" Monoids" <oatmealine@disroot.org>
Date: Thu, 18 May 2023 05:34:32 +0300
Subject: [PATCH] error page, cleanup +layout slightly

---
 src/routes/+error.svelte  | 39 +++++++++++++++++++++++++++++++++++++++
 src/routes/+layout.svelte | 39 ++++++++++++++++++++++++++-------------
 2 files changed, 65 insertions(+), 13 deletions(-)
 create mode 100644 src/routes/+error.svelte

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..5e6cfac
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { page } from '$app/stores';
+</script>
+
+<style>
+  .content {
+    max-width: 600px;
+    margin: auto; 
+  }
+  .gradient {
+    font-size: 5rem;
+    line-height: 1.0;
+    background: repeating-linear-gradient(98deg, rgba(190,190,190,1) 0%, rgba(190,190,190,1) 10%, rgba(207,207,207,1) 10%, rgba(207,207,207,1) 20%);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bolder;
+  }
+  h1 {
+    margin-bottom: 0.15em;
+  }
+  .error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
+  }
+</style>
+
+<div class="content">
+  <div class="error">
+    <div class="gradient">
+      <h1>{$page.status}</h1>
+    </div>
+    {$page.error.message}
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 021db88..47e6a34 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -30,20 +30,33 @@
     max-width: 1200px;
     width: 100%;
   }
+
+  .content {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .location.errored {
+    color: #e95678;
+  }
 </style>
 
-<header>
-  <CommandLine>
-    cd {(new URL($page.url)).pathname}
-  </CommandLine>
-</header>
+<div class="content">
+  <header>
+    <CommandLine>
+      cd <span class="location" class:errored={$page.error !== null}>{(new URL($page.url)).pathname}</span>
+    </CommandLine>
+  </header>
 
-<slot/>
+  <slot/>
 
-<footer>
-  <div class="inner">
-    <a href="https://cohost.org/{config.handle}/tagged/{config.tag}" target="_blank" rel="noopener noreferrer">view on cohost</a>
-    &middot;
-    <a href={constants.repo} target="_blank" rel="noopener noreferrer">powered by {constants.name}</a>
-  </div>
-</footer>
\ No newline at end of file
+  <footer>
+    <div class="inner">
+      <a href="https://cohost.org/{config.handle}/tagged/{config.tag}" target="_blank" rel="noopener noreferrer">view on cohost</a>
+      &middot;
+      <a href={constants.repo} target="_blank" rel="noopener noreferrer">powered by {constants.name}</a>
+    </div>
+  </footer>
+</div>
\ No newline at end of file