Added footer component

3 files changed, 64 insertions, 0 deletions

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..ea53b25
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,61 @@
+---
+import { Icon } from "astro-icon/components";
+import dayjs from "dayjs";
+---
+
+<style lang="scss">
+	@import "../scss/_variables.scss";
+
+	footer {
+		bottom: 0;
+		height: 4em;
+		left: 0;
+		padding: 1em 4em;
+		position: absolute;
+		right: 0;
+	}
+
+	.left-nav,
+	.right-nav {
+		display: inline-block;
+		vertical-align: top;
+		width: 49%;
+	}
+
+	.left-nav {
+		float: left;
+		font-size: $fontSizeBase * 0.75;
+		text-align: left;
+	}
+
+	.right-nav {
+		float: right;
+		text-align: right;
+	}
+
+	@media (width <=684px) {
+		footer {
+			padding: 4em 1em 2em;
+		}
+	}
+
+	a {
+		color: $colorText;
+
+		&:visited {
+			color: $colorText;
+		}
+	}
+</style>
+
+<footer>
+	<div class="left-nav">
+		<span>&copy; {dayjs().year()} <a href="mailto:valentin@popov.link">Valentin Popov</a></span>
+	</div>
+	<div class="right-nav">
+		<a href="https://github.com/valentineus" target="_blank"><Icon name="hugeicons:github-01" /></a>
+		<a href="https://www.linkedin.com/in/valentineus/" target="_blank"><Icon name="hugeicons:linkedin-01" /></a>
+		<a href="https://analytics.popov.link" target="_blank"><Icon name="hugeicons:analytics-up" /></a>
+		<a href="/feed.xml" target="_blank"><Icon name="hugeicons:rss" /></a>
+	</div>
+</footer>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8456916..142b398 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";
@@ -24,5 +25,6 @@ const { description, title } = Astro.props;
 			<slot />
 		</main>
 		<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />
+		<Footer />
 	</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;
 }