Implement #1

src/lib/assets/git-branch-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7.10508 15.2101C8.21506 15.6501 9 16.7334 9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.6938 3.83481 15.5825 5 15.1707V8.82929C3.83481 8.41746 3 7.30622 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V11.9996C7.83566 11.3719 8.87439 11 10 11H14C15.3835 11 16.5482 10.0635 16.8949 8.78991C15.7849 8.34988 15 7.26661 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.3332 20.1303 8.46329 18.9274 8.85392C18.5222 11.2085 16.4703 13 14 13H10C8.61653 13 7.45179 13.9365 7.10508 15.2101Z" fill="#000"></path></svg>

src/lib/components/FooterComponent.svelte

@@ -0,0 +1,43 @@
+<script>
+  import git from '$lib/assets/git-branch-fill.svg';
+</script>
+
+<div class="footer">
+    <div>
+        <span>Made with &#x1F918; by&nbsp;</span>
+        <a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a>
+    </div>
+    |
+    <div>
+        <a href="https://phlaym.net/git/phlaym/moshing-mammut">Source Code&nbsp;<img alt="Git branch" src={git} class="icon" /></a>
+    </div>
+</div>
+
+<style>
+  .footer {
+    position: sticky;
+    bottom: 0px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+    gap: 10px;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    background-color: #54546788;
+    padding: 0.3em 1em;
+    margin: 0 -8px;
+  }
+  .icon {
+    position: relative;
+    top: 0.5em;
+    color: white;
+  }
+  @media (prefers-color-scheme: dark) {
+    .icon {
+      filter: invert();
+    }
+    .footer {
+      background-color: #6364FF88;
+    }
+  }
+</style>