prettifying

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;
   }

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;

src/components/Section/index.svelte

@@ -1,8 +1,23 @@
-<fieldset>
-    <legend>{label}</legend>
+<div>
+<h2>{label}</h2>
+  <hr/>
+</div>
+
 <slot />
-</fieldset>
 
 <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>

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;
   }

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;
   }