feat: add footer

src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropArea, InstructionModal } from 'src/lib/components';
+	import { DropArea, Footer, InstructionModal } from 'src/lib/components';
 </script>
 
 <main class="center-everything">
@@ -11,6 +11,8 @@
 	</div>
 
 	<DropArea />
+
+	<Footer />
 </main>
 
 <style>
@@ -32,7 +34,7 @@
 	}
 
 	.header-background {
-		background: #3f2a1f;
+		background: var(--brown);
 		position: absolute;
 		top: 0;
 		bottom: 0;

src/app.css

@@ -1,3 +1,7 @@
+:root {
+	--brown: #3f2a1f;
+}
+
 html {
 	background: linear-gradient(#dbb098, #67985d);
 	background-attachment: fixed;

src/lib/components/Footer/Footer.svelte

@@ -0,0 +1,16 @@
+<p class="footer">
+	Made with 💚 by <a href="https://jessekuntz.github.io/" target="_blank" class="website-link"
+		>Jesse Kuntz</a
+	>
+</p>
+
+<style>
+	.footer {
+		font-size: 16px;
+	}
+
+	.website-link {
+		text-decoration: none;
+		color: var(--brown);
+	}
+</style>

src/lib/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from './Footer.svelte';

src/lib/components/InstructionModal/Content.svelte

@@ -33,7 +33,7 @@
 <ul>
 	<li>
 		Avoid skin colored clothes or things in the background of the picture. Those will likely get
-		turned green. And yes, I mean all skin colors.
+		turned green.
 	</li>
 	<li>
 		Make sure all faces are turned toward the camera, otherwise they might not get detected and will

src/lib/components/InstructionModal/InstructionModal.svelte

@@ -11,7 +11,7 @@
 <Modal
 	show={$modal}
 	styleContent={{
-		border: '4px solid #3f2a1f',
+		border: '4px solid var(--brown)',
 		borderRadius: '8px',
 		background: 'linear-gradient(#dbb098, #67985d)',
 		maxHeight: 'calc(100vh - 32px)',

src/lib/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Button';
 export * from './DropArea';
+export * from './Footer';
 export * from './Icon';
 export * from './InstructionModal';