From 316cd14ed2199dcf8298a0dc8c305625ef211b85 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Mon, 29 May 2023 12:30:55 +0200
Subject: [PATCH] Page & component wrapping element consistent style w/ .card

---
 src/lib/components/Graph.svelte               |  3 ++-
 src/lib/components/RelayControls.svelte       | 25 +++++--------------
 .../components/VerticalSensorDisplay.svelte   | 14 +----------
 src/routes/+layout.svelte                     |  2 +-
 src/routes/brews/+page.svelte                 |  5 ++--
 src/routes/brews/[date]/+page.svelte          |  2 +-
 6 files changed, 14 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/Graph.svelte b/src/lib/components/Graph.svelte
index 695d458..ca6a80c 100644
--- a/src/lib/components/Graph.svelte
+++ b/src/lib/components/Graph.svelte
@@ -196,4 +196,5 @@
   });
 </script>
 
-<canvas id="{name}" bind:this="{chartCanvas}" width="400" height="400"></canvas>
+<canvas class="card" id="{name}" bind:this="{chartCanvas}" width="400" height="400"></canvas>
+
diff --git a/src/lib/components/RelayControls.svelte b/src/lib/components/RelayControls.svelte
index 329eece..706c5b7 100644
--- a/src/lib/components/RelayControls.svelte
+++ b/src/lib/components/RelayControls.svelte
@@ -22,7 +22,7 @@
   }
 </script>
 
-<div class="relays-container">
+<div class="card">
   <h1>Manual relay controls</h1>
 
   <div class="vertical-sensor-display">
@@ -41,28 +41,15 @@
 <style lang="scss" module="scoped">
   @import '../../styles/media-queries.scss';
 
-  .relays-container {
-    height: fit-content;
-    border-radius: 12px;
-    background-color: var(--background);
-    transition: background-color var(--color-transition-duration) ease-in-out;
-    padding: 2.25rem 1rem;
-
-    @include tablet {
-      padding: 2.25rem 3rem;
-    }
-
-    h1 {
-      margin-top: 0;
-    }
-  }
-
   .vertical-sensor-display {
     position: relative;
-    height: fit-content;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     flex-wrap: wrap;
+
+    @include desktop {
+      justify-content: space-between;
+    }
   }
 
   h2 {
diff --git a/src/lib/components/VerticalSensorDisplay.svelte b/src/lib/components/VerticalSensorDisplay.svelte
index e5c39da..d8d40e6 100644
--- a/src/lib/components/VerticalSensorDisplay.svelte
+++ b/src/lib/components/VerticalSensorDisplay.svelte
@@ -23,7 +23,7 @@
 </script>
 
 
-<div class="vertical-sensor-display">
+<div class="card">
   <CardButton>
     <Activity on:click={flipCard} />
   </CardButton>
@@ -76,18 +76,6 @@
 <style lang="scss" module="scoped">
   @import '../../styles/media-queries.scss';
 
-.vertical-sensor-display {
-  position: relative;
-  padding: 2.25rem 1rem;
-  border-radius: 12px;
-  background-color: var(--background);
-  transition: background-color var(--color-transition-duration) ease-in-out;
-
-  @include tablet {
-    padding: 2.25rem 3rem;
-  }
-}
-
 h2 {
   font-size: 1.4rem;
   margin-bottom: 1.5rem;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2f9bd51..f00b7cd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,7 +8,7 @@
 <!-- <Darkmode/> -->
 
 <div class="page-content">
-  <slot></slot>
+  <slot />
 </div>
 
 <style lang="scss">
diff --git a/src/routes/brews/+page.svelte b/src/routes/brews/+page.svelte
index 5bd640a..15fe004 100644
--- a/src/routes/brews/+page.svelte
+++ b/src/routes/brews/+page.svelte
@@ -9,7 +9,7 @@
 
 </script>
 
-<main class="page-content">
+<main class="card">
   <h1>Past brews</h1>
 
   <ul>
@@ -20,7 +20,8 @@
 </main>
 
 <style lang="scss">
-  main.page-content {
+  main.card {
+    height: calc(100vh - var(--header-height) * 2);
 
     ul {
       margin-left: 1.2em;
diff --git a/src/routes/brews/[date]/+page.svelte b/src/routes/brews/[date]/+page.svelte
index 0224e13..9a653bc 100644
--- a/src/routes/brews/[date]/+page.svelte
+++ b/src/routes/brews/[date]/+page.svelte
@@ -16,7 +16,7 @@
   const wizards = brew.by.join(', ');
 </script>
 
-<section>
+<section class="card">
   <div class="desktop-only image-container" style="height: {height}px">
     <img src="/images/{ brew.image }" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
   </div>