Page & component wrapping element consistent style w/ .card

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>
+

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 {

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;

src/routes/+layout.svelte

@@ -8,7 +8,7 @@
 <!-- <Darkmode/> -->
 
 <div class="page-content">
-  <slot></slot>
+  <slot />
 </div>
 
 <style lang="scss">

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;

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>