From 2678a9522e56a71064d4cd0465661ee090e194e2 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.dyndns.org>
Date: Tue, 28 Jul 2020 11:48:15 -0400
Subject: [PATCH] header of the page

---
 public/favicon.png        | Bin 0 -> 3127 bytes
 public/fonts/faktos.css   |   5 ++
 public/global.css         |  19 ++++--
 public/index.html         |   2 +
 src/App.svelte            | 114 ----------------------------------
 src/components/App.svelte | 127 ++++++++++++++++++++++++++++++++++++++
 src/main.js               |   2 +-
 7 files changed, 148 insertions(+), 121 deletions(-)
 create mode 100644 public/favicon.png
 create mode 100644 public/fonts/faktos.css
 delete mode 100644 src/App.svelte
 create mode 100644 src/components/App.svelte

diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e6f5eb5a2f1f1c882d265cf479de25caa925645
GIT binary patch
literal 3127
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
RDuVz3002ovPDHLkV1lTymTLe2

literal 0
HcmV?d00001

diff --git a/public/fonts/faktos.css b/public/fonts/faktos.css
new file mode 100644
index 0000000..626e0e5
--- /dev/null
+++ b/public/fonts/faktos.css
@@ -0,0 +1,5 @@
+@font-face {
+    font-family: 'Faktos';
+    font-style: normal;
+    src: url(Faktos.ttf) format('truetype');
+}
diff --git a/public/global.css b/public/global.css
index 57b9a99..b2626b3 100644
--- a/public/global.css
+++ b/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 {
diff --git a/public/index.html b/public/index.html
index b724992..20df4fe 100644
--- a/public/index.html
+++ b/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'>
diff --git a/src/App.svelte b/src/App.svelte
deleted file mode 100644
index 646fef4..0000000
--- a/src/App.svelte
+++ /dev/null
@@ -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>
diff --git a/src/components/App.svelte b/src/components/App.svelte
new file mode 100644
index 0000000..9007ce6
--- /dev/null
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 2c27a25..929b403 100644
--- a/src/main.js
+++ b/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