First bits of layout

Also changed footer text to not claim rights we don't have.

src/components/Footer.svelte

@@ -1,9 +1,7 @@
 <footer>
-  The above variably-named Shark Game<br />
+  The above variably-named Shark Game courtesy of:<br />
-  &copy; <a href="https://cirri.al/">Cirrial</a>, 2014-2016<br />
+  <a href="https://cirri.al/">Cirrial</a>, 2014-2016<br />
-  &copy; <a href="https://github.com/spencers145/">spencers145</a>, 2020-2021<br
+  <a href="https://github.com/spencers145/">spencers145</a>, 2020-2021
-  />
-  All rights reserved.
 </footer>
 
 <style lang="scss">

src/components/Header.svelte

@@ -1 +1,105 @@
-<header id="title">save</header>
+<script>
+  const discordLink = "https://discord.gg/eYqApFkFPY";
+
+  const mainHeaderButtons = {
+    save() {
+      console.log("save");
+    },
+    options() {
+      console.log("options");
+    },
+    help() {
+      console.log("help");
+    },
+    reset() {
+      console.log("reset");
+    },
+  };
+  const otherHeaderButtons = {
+    changelog() {
+      console.log("changelog");
+    },
+    credits() {
+      console.log("credits");
+    },
+    donate() {
+      console.log("donate");
+    },
+    discord() {
+      console.log("discord");
+    },
+    notice() {
+      console.log("notice");
+    },
+  };
+</script>
+
+<header>
+  <ul id="main-header-buttons">
+    {#each Object.entries(mainHeaderButtons) as [name, onClick]}
+      <li><a on:click={onClick} href={"javascript:;"}>{name}</a></li>
+    {/each}
+  </ul>
+  <ul id="other-header-buttons">
+    {#each Object.entries(otherHeaderButtons) as [name, onClick]}
+      <li><a on:click={name === "discord" ? undefined : onClick} href={name === "discord" ? discordLink : "javascript:;"}>{name}</a></li>
+    {/each}
+  </ul>
+</header>
+
+<style lang="scss">
+  header {
+    width: 100%;
+    background-color: var(--color-med);
+    text-shadow: 2px 2px 3px var(--color-darker);
+    color: var(--color-lighter);
+
+    margin: 0;
+    padding: 0;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    pointer-events: none;
+
+    > ul {
+      text-align: center;
+      font-weight: bold;
+
+      margin: 0.2em 0.8em;
+      padding: 0.2em 0.8em;
+
+      > li {
+        pointer-events: initial;
+        list-style-type: none;
+        display: inline;
+
+        &:before {
+          content: " | ";
+        }
+
+        &:first-child:before {
+          content: none;
+        }
+
+        > a:link,
+        > a:visited {
+          color: var(--color-lighter);
+          filter: none;
+        }
+        > a:hover {
+          filter: brightness(130%);
+        }
+      }
+
+      &#main-header-buttons {
+        float: left;
+      }
+      &#other-header-buttons {
+        float: right;
+      }
+    }
+  }
+</style>

src/components/Wrapper.svelte

@@ -1 +1,12 @@
-<main id="wrapper">Wrapper</main>
+<main>Wrapper</main>
+
+<style>
+  main {
+    background-color: var(--color-dark);
+    margin: 2.5em auto;
+
+    padding: 10px;
+    border-radius: 10px;
+    height: 100%;
+  }
+</style>