Node sass and layout starting.

package.json

@@ -17,6 +17,7 @@
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-svelte3": "^3.2.0",
+    "node-sass": "^6.0.1",
     "prettier": "~2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
     "svelte": "^3.34.0",
@@ -26,4 +27,4 @@
     "typescript": "^4.0.0"
   },
   "type": "module"
-}
+}

src/routes/__layout.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import Header from "../components/Header.svelte";
+  // import { theme } from './stores';
+  // import { onMount } from 'svelte';
+
+  // onMount(() => {
+  // 	if ($theme === 'dark') {
+  // 		document.querySelector('html').classList.add('dark');
+  // 	}
+  // });
+
+  export let segment: string;
+</script>
+
+<Header {segment} />
+<main>
+  <slot />
+</main>
+
+<style type="text/scss">
+  :global(figure) {
+    margin: 0 auto;
+  }
+
+  :global(p) {
+    margin: 0 auto;
+  }
+
+  :global(a.button) {
+    background: var(--shellYellow);
+    color: var(--lightShade);
+    border: 0;
+    padding: 0.6rem 1rem;
+    border-radius: 2px;
+    cursor: pointer;
+    --cast: 2px;
+    box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
+    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
+    transition: all 0.2s;
+    text-decoration: none;
+    &:hover {
+      --cast: 4px;
+    }
+    &:active {
+      --cast: 2px;
+    }
+  }
+
+  :global(button) {
+    background: var(--shellYellow);
+    color: var(--lightShade);
+    border: 0;
+    padding: 0.6rem 1rem;
+    border-radius: 2px;
+    cursor: pointer;
+    --cast: 2px;
+    box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
+    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
+    transition: all 0.2s;
+    text-decoration: none;
+    &:hover {
+      --cast: 4px;
+    }
+    &:active {
+      --cast: 2px;
+    }
+  }
+
+  :global(.card) {
+    padding: 1.5rem;
+    background: var(--cardBg);
+    box-shadow: var(--level-3);
+    border-radius: var(--borderRadius);
+    color: var(--textColor);
+
+    *:first-child {
+      margin-top: 0;
+    }
+
+    *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  main {
+    // position: relative;
+    max-width: var(--maxWidth);
+    margin: 0 auto;
+    padding: 2rem 0rem;
+
+    p,
+    li,
+    label {
+      word-wrap: normal;
+      font-size: 1.8rem;
+      color: var(--lightShade);
+    }
+  }
+</style>

src/routes/_error.svelte

@@ -0,0 +1,40 @@
+<script lant="ts">
+  export let status: number;
+  export let error: Error;
+
+  const dev = process.env.NODE_ENV === 'development';
+</script>
+
+<style>
+  h1, p {
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0 0 0.5em 0;
+  }
+
+  p {
+    margin: 1em auto;
+  }
+
+  @media (min-width: 400px) {
+    h1 {
+      font-size: 4em;
+    }
+  }
+</style>
+
+<svelte:head>
+  <title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+  <pre>{error.stack}</pre>
+{/if}