From 6241de18fe37bc6095b331da5d8e3e7c8045838e Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Fri, 8 Jul 2022 14:50:15 +0200
Subject: [PATCH] Dashboard aspect ratio

Signed-off-by: Romein van Buren <romein@vburen.nl>
---
 gui/dashboard/app.svelte                    | 20 +++++++++++++-
 gui/dashboard/components/aspectratio.svelte | 29 +++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 gui/dashboard/components/aspectratio.svelte

diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte
index 0239d19..727f2dd 100644
--- a/gui/dashboard/app.svelte
+++ b/gui/dashboard/app.svelte
@@ -1 +1,19 @@
-<h1>here comes the dashboard</h1>
+<script>
+  import AspectRatio from './components/aspectratio.svelte';
+</script>
+
+<AspectRatio>
+  <h1>here comes the dashboard</h1>
+</AspectRatio>
+
+<style>
+  :global(html, body) {
+    --radius: 10px;
+    --dark: #181818;
+
+    background-color: #000;
+    color: #fff;
+    padding: 0;
+    margin: 0;
+  }
+</style>
diff --git a/gui/dashboard/components/aspectratio.svelte b/gui/dashboard/components/aspectratio.svelte
new file mode 100644
index 0000000..fd0c387
--- /dev/null
+++ b/gui/dashboard/components/aspectratio.svelte
@@ -0,0 +1,29 @@
+<div class="center">
+  <div class="ratio">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .ratio {
+    border-radius: var(--radius);
+    background-color: var(--dark);
+    background-color: red;
+    height: 56.25vw;
+    left: 50%;
+    max-height: 100vh;
+    max-width: 177.77778vh;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    width: 100vw;
+  }
+</style>