refactor

src/routes/+error.svelte → src/routes/(main)/+error.svelte

@@ -10,7 +10,7 @@
 <article>
   <h1>{$page.status === 404 ? 'Nothing here' : $page.status}</h1>
   {#if dev}
-    <pre>{$page.error.message}</pre>
+    <pre>{$page.error?.message}</pre>
   {/if}
   {#if $page.status !== 404}
     <img src="error.webp" alt="bleerp cat" />

src/routes/(main)/+layout.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Achievements from '$lib/components/achievement/Achievements.svelte';
+  import Announcer from '$lib/components/announcement/Announcer.svelte';
+  import Loader from '$lib/components/layout/Loader.svelte';
+  import Main from '$lib/components/layout/Main.svelte';
+  import Navbar from '$lib/components/layout/Navbar.svelte';
+
+  import Confettu from '$lib/components/visuals/Confettu.svelte';
+  import Terminus from '$lib/components/visuals/terminus/Terminus.svelte';
+  import { isLocalStorageAvailable } from '$lib/utils';
+  import Snowy from '$lib/components/visuals/Snowy.svelte';
+  import { page } from '$app/stores';
+  import Bacon from '$lib/components/Bacon.svelte';
+  // import { onMount } from 'svelte';
+</script>
+
+<!-- <svelte:window
+  on:pointerup={() => {
+    // why can we do this!? ...WHY
+    const textBlob = new Blob(['mallsoft.dev'], { type: 'text/plain' });
+    const clipItem = new ClipboardItem({
+      [textBlob.type]: textBlob
+    });
+    navigator.clipboard.write([clipItem]);
+  }}
+/> -->
+
+<Navbar />
+
+<Main>
+  <slot />
+</Main>
+
+<Loader />
+
+<Announcer />
+
+{#if isLocalStorageAvailable()}
+  <Achievements />
+  <Bacon />
+{/if}
+
+<Terminus />
+
+<Confettu />
+
+{#if [11, 12, 1, 2].includes(new Date().getMonth() + 1) && $page.url.pathname === '/'}
+  <Snowy />
+{/if}

src/routes/+layout.svelte

@@ -1,57 +1,9 @@
 <script lang="ts">
   import '@fontsource/space-grotesk';
   import '../app.css';
-
-  import Achievements from '$lib/components/achievement/Achievements.svelte';
-  import Announcer from '$lib/components/announcement/Announcer.svelte';
-  import Loader from '$lib/components/layout/Loader.svelte';
-  import Main from '$lib/components/layout/Main.svelte';
   import Meta from '$lib/components/layout/Meta.svelte';
-  import Navbar from '$lib/components/layout/Navbar.svelte';
-
-  import Confettu from '$lib/components/visuals/Confettu.svelte';
-  import Terminus from '$lib/components/visuals/terminus/Terminus.svelte';
-  import { isLocalStorageAvailable } from '$lib/utils';
-  import Snowy from '$lib/components/visuals/Snowy.svelte';
-  import { page } from '$app/stores';
-  import Bacon from '$lib/components/Bacon.svelte';
-  // import { onMount } from 'svelte';
 </script>
 
-<!-- <svelte:window
-  on:pointerup={() => {
-    // why can we do this!? ...WHY
-    const textBlob = new Blob(['mallsoft.dev'], { type: 'text/plain' });
-    const clipItem = new ClipboardItem({
-      [textBlob.type]: textBlob
-    });
-    navigator.clipboard.write([clipItem]);
-  }}
-/> -->
-
 <Meta />
 
-<Navbar />
-
-<Main>
-  <slot />
-</Main>
-
-<Loader />
-
-<Announcer />
-
-{#if isLocalStorageAvailable()}
-  <Achievements />
-  <Bacon />
-{/if}
-
-{#if $page.url.pathname !== '/qrgen'}
-  <Terminus />
-{/if}
-
-<Confettu />
-
-{#if [11, 12, 1, 2].includes(new Date().getMonth() + 1) && $page.url.pathname === '/'}
-  <Snowy />
-{/if}
+<slot />

src/routes/qrgen/+page.svelte

@@ -27,15 +27,19 @@
     );
 </script>
 
-<section>
+<svelte:head>
+  <title>Qrcode in a pinch</title>
+</svelte:head>
+
+<main>
   {#if qrError}
     <pre>qrcode error: {qrError.message}</pre>
   {:else}
     <canvas bind:this={canvas} />
   {/if}
 
   <div class="io">
-    <input type="text" bind:value={code} placeholder="code" />
+    <input type="text" bind:value={code} placeholder="write stuff here" />
     <div class="colors">
       <label>
         <span>FG: {color_dark}</span>
@@ -51,36 +55,44 @@
     <input type="range" min="4" max="100" bind:value={scale} />
     <span>x{scale}</span>
   </div>
-</section>
+</main>
 
 <style>
-  section {
+  main {
+    --checker1: #aaaaaa;
+    --checker2: #e9e9e9;
+
+    --text: rgb(46, 46, 46);
+    --bg: white;
+
+    color: var(--text);
+
     display: flex;
     flex-direction: column;
-
     align-items: center;
 
+    flex-grow: 1;
+    gap: 1rem;
+
     padding: 1rem;
 
     border-radius: 0.25rem;
-
-    background: repeating-conic-gradient(#aaaaaa 0% 25%, #e9e9e9 0% 50%) 50% / 4px 4px;
+    background: repeating-conic-gradient(var(--checker1) 0% 25%, var(--checker2) 0% 50%) 50% / 6px
+      6px;
   }
 
   canvas {
-    margin: 1rem;
-    margin-bottom: 2rem;
+    margin: auto 0;
   }
 
   .colors {
-    background-color: gainsboro;
-    color: rgb(85, 85, 85);
+    background-color: var(--bg);
+    color: var(--text);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-items: flex-end;
     width: 100%;
-    margin-top: 0.25rem;
     padding: 0.25rem;
   }
 
@@ -90,12 +102,15 @@
   }
 
   .io [type='text'] {
-    color: rgb(85, 85, 85);
-    background-color: inherit;
+    color: var(--text);
+    background-color: var(--bg);
+
+    border: 0.25rem solid currentColor;
+    padding: 0 0.25rem;
   }
 
   .io span {
-    color: rgb(85, 85, 85);
+    color: var(--text);
   }
 
   label {