From 1066ea51a9960c6141de706fde83494ca2bedd6b Mon Sep 17 00:00:00 2001
From: Max Nuding <max.nuding@icloud.com>
Date: Sun, 2 Apr 2023 20:47:31 +0200
Subject: [PATCH] Implement #1

---
 src/app.html                              | 29 +++++++++++++++
 src/lib/assets/git-branch-fill.svg        |  1 +
 src/lib/components/FooterComponent.svelte | 43 +++++++++++++++++++++++
 src/routes/+layout.svelte                 | 15 ++++++++
 4 files changed, 88 insertions(+)
 create mode 100644 src/lib/assets/git-branch-fill.svg
 create mode 100644 src/lib/components/FooterComponent.svelte
 create mode 100644 src/routes/+layout.svelte
diff --git a/src/app.html b/src/app.html
index 2371da7..37e46d3 100644
--- a/src/app.html
+++ b/src/app.html
@@ -8,6 +8,35 @@
 		<meta name="theme-color" content="#17063B" media="(prefers-color-scheme: dark)" />
 		<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
 		%sveltekit.head%
+		<style>
+			body {
+				--color-text: #2F0C7A;
+				--color-bg: white;
+				--color-border: #17063B;
+				--color-link: #563ACC;
+				--color-link-visited: #858AFA;
+
+				color: var(--color-text);
+				background-color: var(--color-bg);
+			}
+
+			a {
+				color: var(--color-link);
+			}
+			a:visited {
+				color: var(--color-link-visited);
+			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					--color-text: white;
+					--color-bg: #17063B;
+					--color-border: white;
+					--color-link: #8A9BF0;
+					--color-link-visited: #C384FB;
+				}
+			}
+		</style>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
diff --git a/src/lib/assets/git-branch-fill.svg b/src/lib/assets/git-branch-fill.svg
new file mode 100644
index 0000000..477ba39
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/FooterComponent.svelte b/src/lib/components/FooterComponent.svelte
new file mode 100644
index 0000000..07b9478
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..223e975
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import FooterComponent from '$lib/components/FooterComponent.svelte'
+</script>
+<slot />
+<div class="footer">
+  <FooterComponent />
+</div>
+
+<style>
+  .footer {
+    position: sticky;
+    bottom: 0px;
+    display: inline-block;
+  }
+</style>
\ No newline at end of file
