We have a print sheet

public/index.html

@@ -18,6 +18,8 @@
 	<link rel='stylesheet' href='./css/buttons.css'>
 	<link rel='stylesheet' href='./bundle.css'>
 
+    <link rel="stylesheet" href="print.css">
+
     <!--
     <link rel='stylesheet' href='/materialize/materialize.css'>
     <script src="/materialize/materialize.js"></script>

public/print.css

@@ -0,0 +1,5 @@
+@media print {
+    header,nav {
+        display: none !important;
+    }
+}

src/components/App.svelte

@@ -1,5 +1,21 @@
 <Header />
 
+  <nav>
+    <input class="reset button small red" type="button"  value="reset" on:click={reset} />
+
+    <div class="spacer" />
+    <input type="button" class="button small notes" value="notes" on:click={toggle_notes} />
+
+    <ul class="button-group">
+    <input type="button" class="button small green" value="editor"
+      on:click={() => set_output(null)} />
+    <input type="button" class="button small green" value="json"
+      on:click={() => set_output('json')} />
+    <input type="button" class="button small green" value="print"
+      on:click={() => set_output('print')} />
+    </ul>
+  </nav>
+
 {#if show_notes}
 <Notes show={show_notes} on:close={toggle_notes} />
 {/if}
@@ -7,18 +23,11 @@
 {#if output === 'json'}
   <OutputJson ship={$ship}
     on:close={() => set_output(null)}/>
-{/if}
+  {:else if output === 'print' }
+    <Print ship={$ship} />
+{:else}
 
 <main>
-  <nav>
-    <input class="reset button small red" type="button"  value="reset" on:click={reset} />
-
-    <div class="spacer" />
-    <input type="button" class="button small notes" value="notes" on:click={toggle_notes} />
-
-    <input type="button" class="button small green" value="json"
-      on:click={() => set_output('json')} />
-  </nav>
 
   <ShipSpecs />
 
@@ -65,12 +74,14 @@
       href="https://github.com/yanick/aotds-shipyard">Github</a>
   </footer>
 
+{/if}
 <script>
   import { setContext } from "svelte";
 
   import Header from './Header';
   import shipStore from "~/stores/ship";
   import OutputJson from './Output/Json.svelte';
+  import Print from './Output/Print';
 
   import ShipSpecs from './ShipSpecs/index.svelte';
   import Notes from './Notes';
@@ -129,8 +140,8 @@
 <style>
   main {
     display: grid;
-    width: 60em;
     grid-template-columns: 1fr 14em 8em;
+    width: 60em;
     margin-left: auto;
     margin-right: auto;
   }
@@ -138,7 +149,10 @@
   nav {
     grid-column: 1 / span 3 !important;
     display: flex;
-    margin: 1em 0;
+    width: 60em;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1em;
   }
 
   nav .spacer {

src/components/Output/Json.svelte

@@ -1,8 +1,4 @@
-<aside transition:fly={{x: 2000, opacity: 1}}>
-    <div>
-      <input type="button" class="button small red" value="close"
-        on:click={close}/>
-    </div>
+<aside transition:fade>
   <pre><code>{json}</code></pre>
 </aside>
 
@@ -11,7 +7,7 @@
   let json;
   $: json = JSON.stringify(ship,null,2);
 
-    import { fly } from 'svelte/transition';
+    import { fly, fade } from 'svelte/transition';
     import {createEventDispatcher} from 'svelte';
 
     const dispatch = createEventDispatcher();
@@ -30,21 +26,10 @@
   text-align: right;
   }
   aside {
-    background-color: rgb(254, 218, 184);
-    position: absolute;
-    height: 80vh;
-    max-width: 80%;
-    min-width: 80%;
-    z-index: 200;
 
     padding: 1em;
     border: 3px solid var(--indigo-dye);
     border-radius: 1em;
-    right: 0px;
-    border-right: 0px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    top: 6em;
     font-size: var(--font-scale-11);
   }
 </style>

src/components/Output/Print/Hull/Integrity/index.svelte

@@ -1,7 +1,7 @@
 <div>
-  {#each rows as row (row)}
+  {#each rows as row,i (i)}
     <div class="row">
-      {#each row as item (item)}
+      {#each row as item,j (j)}
         <div class="cell">
           {#if item}
             <img src="icons/crew-star.svg" alt="crew loss threshold" />

src/components/Output/Print/Weapons/Beam/index.svelte

@@ -14,7 +14,6 @@
 
 <style>
   div :global(path) {
-    fill: white;
   }
   div :global(path:hover) {
     fill: white;

src/components/Output/Print/Weapons/index.svelte

@@ -22,4 +22,8 @@
   div {
     margin-bottom: 2em;
   }
+  .beams {
+    display: flex;
+    justify-content: space-evenly;
+  }
 </style>

src/components/Output/Print/index.svelte

@@ -1,4 +1,4 @@
-<div class="ship-sheet">
+<aside class="ship-sheet" transition:fade>
   <Identification {...ship.general} />
 
   <Weapons weapons={ship.weaponry.weapons} />
@@ -18,7 +18,7 @@
     engine={ship.engine.rating}
   />
 
-</div>
+</aside>
 
 <script>
   import _ from 'lodash';
@@ -31,6 +31,8 @@
 
   export let ship;
 
+    import { fly, fade } from 'svelte/transition';
+
 </script>
 
 <style>