From d4a6772ec51ef955fc6cacd3ad6830c0d87657b1 Mon Sep 17 00:00:00 2001
From: Valentin Popov <valentin@popov.link>
Date: Fri, 13 Sep 2024 00:06:02 +0000
Subject: Refactor Footer component and add Analytics and Footer components to
 BaseLayout

---
 src/components/Footer.astro  | 49 ++++++++++++++++++++++++++++++++++++++++++++
 src/layouts/BaseLayout.astro |  2 ++
 src/scss/_framework.scss     |  1 +
 3 files changed, 52 insertions(+)
 create mode 100644 src/components/Footer.astro

(limited to 'src')

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..1219a35
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,49 @@
+---
+import dayjs from "dayjs";
+---
+
+<style lang="scss">
+	@import "../scss/_variables.scss";
+
+	footer {
+		bottom: 0;
+		display: flex;
+		font-size: $fontSizeBase * 0.85;
+		height: 4em;
+		justify-content: space-between;
+		left: 0;
+		padding: 1em 4em;
+		position: absolute;
+		right: 0;
+	}
+
+	@media (width <=684px) {
+		footer {
+			padding: 4em 1em 2em;
+		}
+	}
+	ul {
+		display: flex;
+		justify-content: space-between;
+		list-style: none;
+	}
+
+	li {
+		margin-left: 2em;
+	}
+
+	a {
+		color: $colorText;
+		&:visited {
+			color: $colorText;
+		}
+	}
+</style>
+
+<footer>
+	<div>&copy; {dayjs().year()} <a href="mailto:valentin@popov.link">Valentin Popov</a></div>
+	<ul>
+		<li><a href="https://analytics.popov.link" target="_blank">Analytics</a></li>
+		<li><a href="https://code.popov.link/valentineus/valentineus.github.io" target="_blank">Source Code</a></li>
+	</ul>
+</footer>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8456916..a76861a 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,5 +1,6 @@
 ---
 import Analytics from "../components/Analytics.astro";
+import Footer from "../components/Footer.astro";
 import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
 import "../scss/global.scss";
@@ -23,6 +24,7 @@ const { description, title } = Astro.props;
 		<main>
 			<slot />
 		</main>
+		<Footer />
 		<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />
 	</body>
 </html>
diff --git a/src/scss/_framework.scss b/src/scss/_framework.scss
index 9e26f6c..549f9df 100644
--- a/src/scss/_framework.scss
+++ b/src/scss/_framework.scss
@@ -36,6 +36,7 @@ body {
 	max-width: 52em;
 	min-height: 100vh;
 	padding: 4em;
+	position: relative;
 	text-rendering: optimizelegibility;
 }
 
-- 
cgit v1.2.3