add top menu and about page

src/routes/+layout.svelte

@@ -9,3 +9,13 @@
     import 'beercss/dist/cdn/beer.min.css';
     //import beercss from "./dist/cdn/beer.min.js";
 </script>
+
+<style>
+    :global(:root) {
+        --font-size-10: 1rem;
+        --font-size-11: 1.5rem;
+        --font-size-12: 1.75rem;
+        --font-size-13: 2rem;
+        --font-size-14: 2.25rem;
+    }
+</style>

src/routes/+page.svelte

@@ -1,33 +1,13 @@
+<header>
+    <nav>
+        <h5 class="max left-align">Ottawa board games for sale and trade</h5>
+        <a class="button circle transparent" href="/about">
+            <i>question_mark</i>
+        </a>
+    </nav>
+</header>
+
 <article>
-    <h1>Ottawa board games for sale and to trade</h1>
-
-    <p>
-        This is a list of games for sale or trade of people living in the Ottawa
-        region, taken from their profiles on
-        <a href="https://boardgamegeek.com">Board Game Geek</a>.
-    </p>
-
-    <p>
-        If you want to be added to the list of sellers, you can send me a
-        <a
-            target="_blank"
-            href="https://boardgamegeek.com/geekmail/compose?touser=yenzie">
-            BGG mail</a
-        >. All I need is your BGG username, and I'll be able to gather all your
-        games tagged <em>For Trade</em>. If there is a price mentioned in the
-        <em>Trading Notes</em>
-        of the game (that is, any number prefixed with a <em>$</em>), it'll be
-        assumed to be the asking price.
-    </p>
-
-    <p>
-        Have questions, suggestions, anything else? Discussion of this service
-        happens in the <a
-            href="https://boardgamegeek.com/thread/3238117/auto-generating-ottawa-specific-saletrade-page"
-            >Ottawa Guild</a
-        >.
-    </p>
-
     {#await data.games}
         <div class="medium-height middle-align center-align">
             <div class="center-align">
@@ -57,13 +37,6 @@
 </script>
 
 <style>
-    :global(:root) {
-        --font-size-10: 1rem;
-        --font-size-11: 1.5rem;
-        --font-size-12: 1.75rem;
-        --font-size-13: 2rem;
-        --font-size-14: 2.25rem;
-    }
     p {
         font-size: var(--font-size-10);
         max-width: 60em;

src/routes/about/+page.svelte

@@ -0,0 +1,70 @@
+<header>
+    <nav>
+        <h5 class="max left-align">Ottawa board games for sale and trade</h5>
+        <a class="button circle transparent" href="/">
+            <i>arrow_back</i>
+        </a>
+    </nav>
+</header>
+
+<article>
+    <p>
+        <code>bgg.babyl.ca</code> is an aggregation of board games for sale or
+        trade of people living in the Ottawa region, taken from their profiles
+        on
+        <a href="https://boardgamegeek.com">Board Game Geek</a>.
+    </p>
+
+    <p>
+        If you want to be added to the list of sellers, you can send me a
+        <a
+            target="_blank"
+            href="https://boardgamegeek.com/geekmail/compose?touser=yenzie">
+            BGG mail</a
+        >. All I need is your BGG username, and I'll be able to gather all your
+        games tagged <em>For Trade</em>. If there is a price mentioned in the
+        <em>Trading Notes</em>
+        of the game (that is, any number prefixed with a <em>$</em>), it'll be
+        assumed to be the asking price.
+    </p>
+
+    <p>
+        Have questions, suggestions, anything else? Discussion of this service
+        happens in the <a
+            href="https://boardgamegeek.com/thread/3238117/auto-generating-ottawa-specific-saletrade-page"
+            >Ottawa Guild</a
+        >.
+    </p>
+
+    <p class="send-off">
+        Enjoy!<br /> <a href="https://boardgamegeek.com/user/yenzie">`/anick</a>
+    </p>
+</article>
+
+<script>
+</script>
+
+<style>
+    .send-off {
+        margin-top: 3em;
+    }
+    p {
+        font-size: var(--font-size-10);
+        max-width: 60em;
+        text-align: justify;
+        margin-left: 3em;
+        margin-right: 3em;
+    }
+    a {
+        color: var(--primary);
+        text-decoration: underline;
+    }
+
+    @media screen and (max-width: 730px) {
+        p {
+            font-size: inherit;
+            margin-left: 1em;
+            margin-right: 1em;
+        }
+    }
+</style>