Add footer

src/components/organisms/Footer.svelte

@@ -0,0 +1,56 @@
+<script>
+  import "$lib/vars.scss";
+    import Box from "../atoms/Box.svelte";
+</script>
+
+<div class="footer">
+  <Box color="purple">
+    <div class="justified">
+      <div class="left">
+        <span><i>CC0 Public Domain, 2024</i></span>
+      </div>
+      <div class="center">
+      <span>Made with and powered by 🐇</span>
+      </div>
+      <div class="right">
+      <a href="/privacy">Privacy</a>
+        </div>
+    </div>
+  </Box>
+</div>
+
+<style lang="scss">
+  @layer component {
+    .footer {
+      height: auto;
+      min-height: 3em;
+      max-height: 10em;
+      display: block;
+      width: 100%;
+      padding: 1em;
+
+      .justified {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .left, .right, .center {
+          width: 33%;
+          display: flex;
+          flex-direction: row;
+        }
+        .left {
+          justify-content: start;
+          padding-left: 0.5em;
+        }
+        .center {
+          justify-content: center;
+        }
+        .right {
+          justify-content: end;
+          padding-right: 0.5em;
+        }
+      }
+    }    
+  } 
+</style>

src/routes/+layout.svelte

@@ -1,13 +1,16 @@
 <script>
   import "../global.scss";
   import Header from "../components/organisms/Header.svelte";
+    import Footer from "../components/organisms/Footer.svelte";
 </script>
 
 <Header />
-
 <div class="content">
   <slot />
 </div>
+<div class="footer-position">
+<Footer/>
+</div>
 
 <style lang="scss">
   @import "$lib/vars.scss";
@@ -18,6 +21,7 @@
     .content {
       margin: 0 20%;
       transition-duration: 1s;
+      display: block;
 
       @include portrait {
         margin: 0 5%;
@@ -27,5 +31,12 @@
         margin: 0 30%;
       }
     }
+
+    .footer-position {
+      margin: 0;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    }
   }
 </style>