Adding more pages and fixing some links and layout.

- Added test page for a game.
- Added link data to list of games.
- Moved blog content into main and section tags.
- Fixed typo in the about page.

src/components/gameProjectThumb.svelte

@@ -1,18 +1,14 @@
 <script>
     export let name;
+    export let link;
     export let src = "https://placehold.it/600x300";
     export let description;
     export let imgClass = "img-fluid mb-3 mb-md-0";
-
 </script>
 
-<style>
-
-</style>
-
 <div class="row">
     <div class="thumb col-md-7">
-        <a href="{name}">
+        <a href="{link}">
             <img class={imgClass} {src} alt={name}>
         </a>
     </div>
@@ -22,7 +18,3 @@
     </div>
 </div>
 <br>
-
-
-
-

src/routes/about.svelte

@@ -16,7 +16,7 @@
 
         <h3>Why the name Quartznet</h3>
         <p>Naming things is hard. We ended up with the name quartz and added net to it to make quartznet. Also it
-            includes the letters q and z so it is cleary a great name!
+            includes the letters q and z so it is clearly a great name!
 
         <h2>Contact</h2>
         <p>We can be reached at contact@quartznet.com. If you are requesting a key for reviewing, steaming, or youtube,

src/routes/blog/index.svelte

@@ -1,4 +1,6 @@
 <script context="module">
+    import Banner from '../../components/banner.svelte'
+
     export function preload({params, query}) {
         return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
             return {posts};
@@ -18,17 +20,23 @@
 </style>
 
 <svelte:head>
-    <title>Blog</title>
+    <title>Sirius - Blog</title>
 </svelte:head>
 
-<h1>Recent posts</h1>
+<Banner title="Blog"/>
 
-<ul>
+<main class="container">
-    {#each posts as post}
+    <section>
-        <!-- we're using the non-standard `rel=prefetch` attribute to
+        <h1>Recent posts</h1>
-                tell Sapper to load the data for the page as soon as
+
-                the user hovers over the link or taps it, instead of
+        <ul>
-                waiting for the 'click' event -->
+            {#each posts as post}
-        <li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+                <!-- we're using the non-standard `rel=prefetch` attribute to
-    {/each}
+                        tell Sapper to load the data for the page as soon as
-</ul>
+                        the user hovers over the link or taps it, instead of
+                        waiting for the 'click' event -->
+                <li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+            {/each}
+        </ul>
+    </section>
+</main>

src/routes/index.svelte

@@ -6,12 +6,14 @@
     let games = [
         {
             name: "Sirius",
+            link: "./sirius",
             thumb: "https://placehold.it/600x300",
             description: "A 2D sci-fi game about wannabe space captain trying to find their path.",
             imgClass: "img-fluid mb-3 mb-md-0"
         },
         {
             name: "Quartz",
+            link: "./sirius",
             thumb: "https://placehold.it/600x300",
             description: ""
         }
@@ -26,7 +28,6 @@
     <title>Quartznet</title>
 </svelte:head>
 
-
 <Banner/>
 
 <main class="container">
@@ -37,7 +38,6 @@
     </section>
 </main>
 
-
 <style>
     section {
         border-radius: 5px;

src/routes/sirius/index.svelte

@@ -0,0 +1,17 @@
+<script>
+  import Banner from '../../components/banner.svelte'
+</script>
+
+<svelte:head>
+  <title>Quartznet - Sirius</title>
+</svelte:head>
+
+<Banner title="Quartznet - Sirius"/>
+
+<main>
+  <section class="content container">
+    <h1>Sirius game</h1>
+    <p>Sirius game. Work in progress</p>
+    <a href="https://quartznet.info/presskit">Presskit</a>
+  </section>
+</main>