From afe2c3bef57739c2de10f07d88c5724e157aaa50 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.dyndns.org>
Date: Tue, 28 Jul 2020 14:38:40 -0400
Subject: [PATCH] prettifying

---
 src/components/App.svelte                |  3 ++-
 src/components/Field/index.svelte        |  6 ++++++
 src/components/Section/index.svelte      | 23 +++++++++++++++++++----
 src/components/ShipItem/index.svelte     | 13 +++++++++----
 src/components/ShipSpecs/ShipCost.svelte |  4 ++++
 5 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/components/App.svelte b/src/components/App.svelte
index 0742f09..46df1e5 100644
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -3,6 +3,7 @@
   <input class="reset" type="button" value="reset" on:click={reset} />
 
   <ShipSpecs />
+
   <Propulsion
     ftl={$ship.ftl}
     engine={$ship.engine}
@@ -99,7 +100,7 @@
   main {
     display: grid;
     width: 60em;
-    grid-template-columns: 4fr 1fr 1fr;
+    grid-template-columns: 1fr 14em 8em;
     margin-left: auto;
     margin-right: auto;
   }
diff --git a/src/components/Field/index.svelte b/src/components/Field/index.svelte
index d068325..0a36d19 100644
--- a/src/components/Field/index.svelte
+++ b/src/components/Field/index.svelte
@@ -14,6 +14,12 @@
 </script>
 
 <style>
+  div > :global(*) {
+    margin-left: 1em;
+  }
+  div > label {
+    margin-left: 0em;
+  }
 label {
     font-size: var(--font-scale-8);
     font-weight: lighter;
diff --git a/src/components/Section/index.svelte b/src/components/Section/index.svelte
index e25a39e..934edf2 100644
--- a/src/components/Section/index.svelte
+++ b/src/components/Section/index.svelte
@@ -1,8 +1,23 @@
-<fieldset>
-    <legend>{label}</legend>
-    <slot />
-</fieldset>
+<div>
+<h2>{label}</h2>
+  <hr/>
+</div>
+
+<slot />
 
 <script>
     export let label;
 </script>
+
+<style>
+  div {
+    display: flex;
+    grid-column: 1 / span 3 !important;
+    align-items: baseline;
+    gap: 1em;
+  }
+  hr {
+    flex: 1;
+    heigth: 0px;
+  }
+  </style>
diff --git a/src/components/ShipItem/index.svelte b/src/components/ShipItem/index.svelte
index 36f781e..53c2fdb 100644
--- a/src/components/ShipItem/index.svelte
+++ b/src/components/ShipItem/index.svelte
@@ -1,9 +1,7 @@
-<div class="ship-item">
-    <slot />
+    <div><slot /></div>
 
     <div class="mass" bind:this={mass_el}>{ mass }</div>
     <div class="cost" bind:this={cost_el}>{ cost }</div>
-</div>
 
 <script>
   import { tick } from 'svelte';
@@ -27,6 +25,14 @@
 </script>
 
 <style>
+  div {
+    margin-bottom: 1em;
+
+  }
+  .cost,.mass { padding: 0px 2em;  text-align: right; }
+  .cost { grid-column: 3 }
+  .mass { grid-column: 2 }
+
   .ship-item {
     display: flex;
   }
@@ -35,7 +41,6 @@
         flex: 1;
     }
 
-  .cost,.mass { width: 4em; flex: inherit; }
   img {
     width: 0.75em;
   }
diff --git a/src/components/ShipSpecs/ShipCost.svelte b/src/components/ShipSpecs/ShipCost.svelte
index a5f0360..d52dbc5 100644
--- a/src/components/ShipSpecs/ShipCost.svelte
+++ b/src/components/ShipSpecs/ShipCost.svelte
@@ -60,6 +60,10 @@
     font-size: smaller;
   }
 
+  .mass,div.cost {
+    padding: 0px 2em; justify-self: right;
+  }
+
   .mass {
     grid-column: 2;
   }