header of the page

public/fonts/faktos.css

@@ -0,0 +1,5 @@
+@font-face {
+    font-family: 'Faktos';
+    font-style: normal;
+    src: url(Faktos.ttf) format('truetype');
+}

public/global.css

@@ -1,11 +1,18 @@
-:root { 
-    --font-scale-8: calc(1rem/1.125/1.125);
-    --font-scale-9: calc(1rem/1.125);
-    --font-scale-10: 1rem;
-    --font-scale-11: calc(1rem * 1.125);
-    --font-scale-12: calc(1rem * 1.125 * 1.125);
+:root {
+    --font-scale-9: 0.75rem;
+    --font-scale-10: 1em;
+    --font-scale-11: 1.333rem;
+    --font-scale-12: 1.777rem;
+    --font-scale-13: 2.369rem;
+    --font-scale-14: 3.157rem;
+    --font-scale-15: 4.209rem;
 }
 
+small {font-size: var(--font-scale-9); }
+
+h1 {
+    font-size: var(--font-scale-14);
+}
 
 
 html, body {

public/index.html

@@ -10,6 +10,8 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
 
+    <link rel="stylesheet" href="./fonts/faktos.css">
+
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='./global.css'>
 	<link rel='stylesheet' href='./bundle.css'>

src/App.svelte

@@ -1,114 +0,0 @@
-<script>
-    import { setContext } from 'svelte';
-
-    import shipStore from './stores/ship';
-
-  import ShipItem from './components/ShipItem/index.svelte';
-  import ShipCost from './components/ShipCost.svelte';
-  import Field from './components/Field/index.svelte';
-    import Hull from './components/Hull.svelte';
-  import Identification from './components/Identification.svelte';
-  import Firecons from './components/Firecons.svelte';
-  import Propulsion from './components/Propulsion/index.svelte';
-  import Section from '~C/Section';
-  import Weapon from '~C/Weapon';
-  import Cargo from '~C/Cargo/index.svelte';
-  import Streamlining from '~C/Streamlining/index.svelte';
-  import Carrier from '~C/Carrier';
-  import ADFC from '~C/Weaponry/ADFC';
-  import AddWeapon from '~C/Weaponry/AddWeapon';
-
-    const ship = shipStore();
-
-    setContext('ship',ship);
-
-    let ship_name = $ship.general.name;
-
-    const change_name = event => ship.dispatch(
-        ship.actions.set_name( event.target.value) );
-
-  const change_mass = ({target: {value}}) => ship.dispatch(ship.actions.set_ship_mass(parseInt(value)));
-
-  const add_weapon = () => ship.dispatch.add_weapon();
-
-  const change_ftl = ({detail}) => ship.dispatch.set_ftl(detail);
-  const change_engine = ({detail}) => ship.dispatch.set_engine(detail);
-  const change_hull = ({detail}) => ship.dispatch.set_hull(detail);
-  const change_firecons = ({detail}) => ship.dispatch.set_firecons(detail);
-  const change_weapon = ({detail}) => ship.dispatch.set_weapon(detail);
-
-  let weapons = [];
-  $: console.log(weapons);
-  $: weapons= $ship.weaponry.weapons;
-
-  const reset = ship.dispatch.reset;
-
-  const set_screens = ({detail}) => ship.dispatch.set_screens(detail);
-
-  const ship_dispatch = ({detail}) => ship.dispatch(detail);
-
-  setContext( 'ship_change', ship.dispatch );
-
-</script>
-
-<main>
-    <input class="reset" type="button" value="reset" on:click={reset} />
-
-    <Identification />
-
-    <ShipCost />
-
-    <Propulsion
-        ftl={$ship.ftl}
-        engine={$ship.engine}
-        on:change_ftl={change_ftl}
-        on:change_engine={change_engine}
-        />
-
-    <Hull ship_mass={$ship.general.mass}
-        { ... $ship.structure.hull }
-        on:change_hull={change_hull}
-        screens={ $ship.structure.screens}
-        armour={$ship.structure.armour}
-        on:set_screens={set_screens}
-        on:ship_change={ship_dispatch}
-        />
-
-
-    <Section label="weaponry">
-        <Firecons { ... $ship.weaponry.firecons }
-            on:change_firecons={ change_firecons }/>
-
-          <ADFC {...$ship.weaponry.adfc } />
-
-        <AddWeapon />
-
-        {#each weapons as weapon (weapon.id)}
-            <Weapon {weapon} id={weapon.id} cost={weapon.cost} mass={weapon.mass} />
-        {/each}
-
-
-    </Section>
-
-    <Section label="misc">
-      <Cargo {...$ship.cargo} on:set_cargo={ship_dispatch}/>
-      <Streamlining {...$ship.streamlining} />
-    </Section>
-
-    <Carrier {...$ship.carrier} />
-
-</main>
-
-<style>
-  main {
-    display: grid;
-    width: 60em;
-    grid-template-columns: 4fr 1fr 1fr;
-  }
-
-  main :global(> *) {
-    grid-column: 1;
-  }
-
-  input.reset { grid-column: 2 }
-</style>

src/components/App.svelte

@@ -0,0 +1,127 @@
+<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} />
+
+  <Identification />
+
+  <ShipCost />
+
+  <Propulsion
+    ftl={$ship.ftl}
+    engine={$ship.engine}
+    on:change_ftl={change_ftl}
+    on:change_engine={change_engine} />
+
+  <Hull
+    ship_mass={$ship.general.mass}
+    {...$ship.structure.hull}
+    on:change_hull={change_hull}
+    screens={$ship.structure.screens}
+    armour={$ship.structure.armour}
+    on:set_screens={set_screens}
+    on:ship_change={ship_dispatch} />
+
+  <Section label="weaponry">
+    <Firecons
+      {...$ship.weaponry.firecons}
+      on:change_firecons={change_firecons} />
+
+    <ADFC {...$ship.weaponry.adfc} />
+
+    <AddWeapon />
+
+    {#each weapons as weapon (weapon.id)}
+      <Weapon {weapon} id={weapon.id} cost={weapon.cost} mass={weapon.mass} />
+    {/each}
+
+  </Section>
+
+  <Section label="misc">
+    <Cargo {...$ship.cargo} on:set_cargo={ship_dispatch} />
+    <Streamlining {...$ship.streamlining} />
+  </Section>
+
+  <Carrier {...$ship.carrier} />
+
+</main>
+
+<script>
+  import { setContext } from "svelte";
+
+  import shipStore from "~/stores/ship";
+
+  import ShipItem from "./ShipItem/index.svelte";
+  import ShipCost from "./ShipCost.svelte";
+  import Field from "./Field/index.svelte";
+  import Hull from "./Hull.svelte";
+  import Identification from "./Identification.svelte";
+  import Firecons from "./Firecons.svelte";
+  import Propulsion from "./Propulsion/index.svelte";
+  import Section from "~C/Section";
+  import Weapon from "~C/Weapon";
+  import Cargo from "~C/Cargo/index.svelte";
+  import Streamlining from "~C/Streamlining/index.svelte";
+  import Carrier from "~C/Carrier";
+  import ADFC from "~C/Weaponry/ADFC";
+  import AddWeapon from "~C/Weaponry/AddWeapon";
+
+  const ship = shipStore();
+
+  setContext("ship", ship);
+
+  let ship_name = $ship.general.name;
+
+  const change_name = (event) =>
+    ship.dispatch(ship.actions.set_name(event.target.value));
+
+  const change_mass = ({ target: { value } }) =>
+    ship.dispatch(ship.actions.set_ship_mass(parseInt(value)));
+
+  const add_weapon = () => ship.dispatch.add_weapon();
+
+  const change_ftl = ({ detail }) => ship.dispatch.set_ftl(detail);
+  const change_engine = ({ detail }) => ship.dispatch.set_engine(detail);
+  const change_hull = ({ detail }) => ship.dispatch.set_hull(detail);
+  const change_firecons = ({ detail }) => ship.dispatch.set_firecons(detail);
+  const change_weapon = ({ detail }) => ship.dispatch.set_weapon(detail);
+
+  let weapons = [];
+  $: console.log(weapons);
+  $: weapons = $ship.weaponry.weapons;
+
+  const reset = ship.dispatch.reset;
+
+  const set_screens = ({ detail }) => ship.dispatch.set_screens(detail);
+
+  const ship_dispatch = ({ detail }) => ship.dispatch(detail);
+
+  setContext("ship_change", ship.dispatch);
+</script>
+
+<style>
+  main {
+    display: grid;
+    width: 60em;
+    grid-template-columns: 4fr 1fr 1fr;
+  }
+
+  main :global(> *) {
+    grid-column: 1;
+  }
+
+  input.reset {
+    grid-column: 2;
+  }
+  h1 {
+    font-family: Faktos;
+  }
+
+  h1 .subtitle {
+    padding-left: 2em;
+    font-size: var(--font-scale-12);
+  }
+</style>

src/main.js

@@ -1,4 +1,4 @@
-import App from './App.svelte';
+import App from './components/App.svelte';
 
 const app = new App({
 	target: document.body