add about component

src/lib/components/About.svelte

@@ -1,13 +1,5 @@
-<aside transition:fly={{ x: -800, opacity: 1 }}>
+<Card>
-  <div>
+  <h2 slot="header">Welcome to the docks</h2>
-    <input
-      type="button"
-      class="button small red"
-      value="close"
-      on:click={close}
-    />
-  </div>
-  <h3>welcome to the docks</h3>
 
   <p>
     This app is a ship builder for the game
@@ -16,7 +8,7 @@
   </p>
 
   <p>
-    The app, beside any exception mentioned here, is trying to follow the
+    The contruction rules are following the
     <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
       Cross Dimensions rules
     </a>
@@ -35,17 +27,22 @@
     . Code available on
     <a href="https://github.com/aotds/aotds-shipyard">Github</a>
   </p>
-</aside>
+        <div slot="footer" />
+</Card>
 
 <script>
-  import { fly } from "svelte/transition";
+import {
-  import { createEventDispatcher } from "svelte";
+    Modal, Card
+} from 'svelte-chota';
 
-  const dispatch = createEventDispatcher();
-  const close = () => dispatch("close");
 </script>
 
 <style>
+h2 {
+    margin-bottom: 1em;
+    font-size: var(--font-scale-14);
+    font-family: Faktos;
+}
   aside {
     background-color: rgb(254, 218, 184);
     position: absolute;
@@ -68,7 +65,7 @@
     text-align: center;
     margin: 0px;
   }
-  div {
+p {
-    text-align: right;
+    margin-left: 2em;
-  }
+}
 </style>

src/lib/components/App.svelte

@@ -1,13 +1,25 @@
 <Ribbon />
 <Header />
 
+
 <ShipEdit />
 
 <script>
+import {
+    Modal, Card, Nav
+} from 'svelte-chota';
+
   import Ribbon from "./Ribbon.svelte";
   import Header from "./Header.svelte";
   import ShipEdit from './ShipEdit/index.svelte';
+import About from './About.svelte';
+
 </script>
 
 <style>
+.nav {
+        width: var(--main-width);
+        margin-left: auto;
+        margin-right: auto;
+}
 </style>

src/lib/components/Header.svelte

@@ -4,8 +4,22 @@
     a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
     builder
   </h2>
+    <a  on:click|preventDefault={() => showAbout = true}>about the app</a>
 </header>
 
+    <Modal bind:open={showAbout}>
+    <About/>
+    </Modal>
+
+    <script>
+import {
+    Modal, Card, Nav
+} from 'svelte-chota';
+
+import About from './About.svelte';
+  let showAbout = false;
+</script>
+
 <style>
   header {
     display: flex;
@@ -13,18 +27,27 @@
     width: var(--main-width);
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 3em;
   }
   h1,
   h2 {
+    text-align: left;
     font-family: Faktos;
     padding: 0px;
     margin: 0px;
   }
 
+  h1 {
+    font-size: var(--font-scale-15);
+
+  }
   h2 {
-    text-align: right;
     flex: 1;
-    padding-left: 2em;
+    padding-left: 1em;
-    font-size: var(--font-scale-12);
+    font-size: var(--font-scale-13);
+  }
+  header > a {
+      margin: 0px 2em;
+      font-size: var(--font-scale-10);
   }
 </style>

src/lib/style/index.css

@@ -1,8 +1,17 @@
 :root {
   --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+
+    --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;
 }
 
 input.short {
     width: 5em !important;
 }
+

static/global.css

@@ -1,11 +1,4 @@
 :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;
 
     --oxford-blue: hsla(226, 60%, 10%, 1);
     --royal-blue-dark: hsla(218, 100%, 16%, 1);