Linting & minor style changes

src/lib/components/Header.svelte

@@ -20,7 +20,7 @@
   <div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
     <h1>Navigation</h1>
 
-    <Navigation on:click={close} />
+    <Navigation on:click="{close}" />
 
     <ul class="bottom-content">
       <li>
@@ -34,15 +34,15 @@
 {/if}
 
 <header>
-	<div on:click={toggleMenu} class:open aria-label="Open menu" class="menu">
+  <div on:click="{toggleMenu}" class:open="{open}" aria-label="Open menu" class="menu">
     {#if !open}
       <span class="page-header-buttons__open">
-				<span /> <span /> <span />
+        <span></span> <span></span> <span></span>
       </span>
     {:else}
       <span class="page-header-buttons__close">
-        <span />
+        <span></span>
-				<span />
+        <span></span>
       </span>
     {/if}
 
@@ -60,7 +60,7 @@
     max-width: 550px;
     right: 0;
     top: 0;
-		z-index: 1;
+    z-index: 10;
 
     background-color: #fff3f6;
     color: black;
@@ -78,7 +78,8 @@
     .bottom-content {
       margin-top: auto;
 
-      li, li a {
+      li,
+      li a {
         display: flex;
         align-items: center;
 

src/routes/+layout.svelte

@@ -17,14 +17,11 @@
   .page-content {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    min-height: calc(100vh - var(--header-height));
-    min-height: 100vh;
+    margin: var(--header-height) 2.5rem 0;
-    margin: 0 auto;
-    padding: 2.5em;
-    margin-top: var(--header-height);
 
     @include mobile {
-      padding: 1em;
+      margin: var(--header-height) 1rem 0;
     }
   }
 </style>

src/routes/brews/+page.svelte

@@ -32,6 +32,7 @@
       line-height: 1.5;
 
       a {
+        font-size: 1.2rem;
         color: #19A786;
       }
     }

src/routes/brews/[date]/+page.svelte

@@ -18,7 +18,7 @@
 
 <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" />
+    <img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
   </div>
 
   <div class="beer-container" bind:clientHeight="{height}">
@@ -34,28 +34,28 @@
       <tbody>
         <tr>
           <td><b>Brygget:</b></td>
-          <td>{ dateString }</td>
+          <td>{dateString}</td>
         </tr>
 
         <tr>
           <td><b>Laget av:</b></td>
-          <td>{ wizards }</td>
+          <td>{wizards}</td>
         </tr>
 
         <tr>
           <td><b>Kategori:</b></td>
-          <td>{ brew.beer.category }</td>
+          <td>{brew.beer.category}</td>
         </tr>
 
         <tr>
           <td><b>Alkoholprosent:</b></td>
-          <td>~ { brew.abv }%</td>
+          <td>~ {brew.abv}%</td>
         </tr>
       </tbody>
     </table>
 
     <div class="mobile-only image-container">
-      <img src="/images/{ brew.image }" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
+      <img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
     </div>
 
     <h3>Historie</h3>
@@ -88,9 +88,27 @@
   section {
     @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap');
     font-family: 'Epilogue', sans-serif;
-    position: absolute;
+
-    top: 0;
+    padding: unset !important;
-    left: 0;
+    margin-bottom: 3rem;
+
+    @include mobile {
+      .beer-container {
+        border-radius: inherit;
+      }
+    }
+
+    @include tablet {
+      .beer-container {
+        border-top-right-radius: inherit;
+        border-bottom-right-radius: inherit;
+      }
+
+      .image-container {
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+      }
+    }
   }
 
   .image-container {
@@ -120,7 +138,7 @@
   }
 
   .beer-container {
-    background-color: rgba(215, 224, 223, 0.6);
+    background-color: rgba(215, 224, 223, 0.8);
     padding: 2rem 1rem;
 
     @include tablet {