Relative typography for the dashboard

Signed-off-by: Romein van Buren <romein@vburen.nl>

gui/dashboard/tile-rawvalue.svelte

@@ -10,22 +10,20 @@
   export let weight = 600;
 </script>
 
-<Tile {title} {subtitle} {color} {date}>
-  <div class="value {color}" class:center style:font-weight={weight}>
+<Tile {title} {subtitle} {color} {date} {center}>
+  <div class="value {color}" style:font-weight={weight} class:center>
     {value}
   </div>
 </Tile>
 
 <style>
   .value {
-    font-size: 3rem;
+    font-size: 3vw;
     font-weight: 600;
+    margin-top: auto;
   }
 
   .value.center {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    margin: auto 0;
   }
 </style>

gui/dashboard/tile.svelte

@@ -3,6 +3,7 @@
   export let subtitle;
   export let color;
   export let date;
+  export let center = false;
 </script>
 
 <div class="tile {color}">
@@ -26,7 +27,7 @@
     </div>
   {/if}
 
-  <div class="content"><slot /></div>
+  <div class="content" class:center><slot /></div>
 </div>
 
 <style>
@@ -60,25 +61,33 @@
   }
 
   .desc {
-    font-size: 1.3rem;
     margin-bottom: 1rem;
     display: flex;
   }
 
   .desc .title {
     font-weight: 300;
+    font-size: 1.7vw;
   }
 
   .desc .subtitle {
-    font-weight: 100;
+    font-weight: 200;
+    font-size: 1.5vw;
   }
 
   .desc .time {
     opacity: 0.6;
     margin-left: auto;
+    font-size: 1.3vw;
   }
 
   .content {
     flex-grow: 1;
+    display: flex;
+  }
+
+  .content.center {
+    justify-content: center;
+    align-items: center;
   }
 </style>

lib/dashboard/build.js

@@ -56,14 +56,14 @@ async function build({ server, settings }) {
     });
 
     const { output } = await bundle.generate({
-      sourcemap: true,
+      sourcemap: false,
       format: 'iife',
       name: 'app',
       file: 'public/build/bundle.js',
     });
 
     return {
-      map: output[0].map.toUrl(),
+      map: output[0].map ? output[0].map.toUrl() : '',
       code: output[0].code,
       css: cssOutput.css,
     };