layout

public/global.css

@@ -6,11 +6,21 @@
     --font-scale-13: 2.369rem;
     --font-scale-14: 3.157rem;
     --font-scale-15: 4.209rem;
+
+    --oxford-blue: hsla(226, 60%, 10%, 1);
+    --royal-blue-dark: hsla(218, 100%, 16%, 1);
+    --indigo-dye: hsla(209, 95%, 24%, 1);
+    --cg-blue: hsla(193, 80%, 35%, 1);
+    --white: hsla(20, 60%, 99%, 1);
+
+    --main-width: 60em;
 }
 
 small {font-size: var(--font-scale-9); }
 
 h1 {
+    margin: 0px;
+    padding: 0px;
     font-size: var(--font-scale-14);
 }
 
@@ -22,6 +32,7 @@ html, body {
 }
 
 body {
+    background-color: var(--white);
 	color: #333;
 	margin: 0;
 	padding: 8px;

src/components/App.svelte

@@ -1,8 +1,4 @@
-<header>
+<Header />
-  <h1>The Shipyard <span class="subtitle">a <a
-        href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship builder</span></h1>
-  </header>
-
 <main>
   <input class="reset" type="button" value="reset" on:click={reset} />
 
@@ -52,6 +48,7 @@
 <script>
   import { setContext } from "svelte";
 
+  import Header from './Header';
   import shipStore from "~/stores/ship";
 
   import ShipItem from "./ShipItem/index.svelte";
@@ -116,12 +113,4 @@
   input.reset {
     grid-column: 2;
   }
-  h1 {
-    font-family: Faktos;
-  }
-
-  h1 .subtitle {
-    padding-left: 2em;
-    font-size: var(--font-scale-12);
-  }
 </style>

src/components/Header.svelte

@@ -0,0 +1,23 @@
+<header>
+  <h1>The Shipyard <span class="subtitle">a <a
+        href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship builder</span></h1>
+  </header>
+
+  <style>
+
+    header {
+      width: var(--main-width);
+      margin-left: auto;
+      margin-right: auto;
+    }
+  h1 {
+    font-family: Faktos;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  h1 .subtitle {
+    padding-left: 2em;
+    font-size: var(--font-scale-12);
+  }
+  </style>