From 1aefa2d1c336597f5ba92b71022227a49427dfe1 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 6 Jan 2022 18:54:34 +0100
Subject: [PATCH] feat: add footer to main app

---
 src/App.vue | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7e9ed9d..b74e79d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,19 @@
   </header>
 
   <router-view />
+
+  <footer class="footer">
+    <div class="footer__copyright">
+      v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim
+    </div>
+    <ul class="footer__linklist">
+      <li class="footer__linkitem" v-for="(link, idx) in links" :key="idx">
+        <a :href="link.href" class="footer__link">
+          {{ link.text }}
+        </a>
+      </li>
+    </ul>
+  </footer>
 </template>
 
 <script>
@@ -22,6 +35,7 @@ export default {
       nsfw: false,
       isConfirmedHorny: false,
       isWarn: false,
+      version: require("../package.json").version,
       routes: [
         { path: "/", name: "Home" },
         { path: "/general", name: "General" },
@@ -30,6 +44,14 @@ export default {
         { path: "/abilities", name: "Abilities" },
         { path: "/overdrive", name: "Overdrive" },
       ],
+      links: [
+        { href: "https://twitter.com/SebinNyshkim", text: "Twitter" },
+        { href: "https://t.me/SebinNyshkim", text: "Telegram" },
+        {
+          href: "https://www.furaffinity.net/user/sonofdragons",
+          text: "Fur Affinity",
+        },
+      ],
     };
   },
   methods: {
@@ -51,7 +73,7 @@ export default {
 @import "~normalize.css";
 
 #app {
-  margin: 6em 0 2em 0;
+  padding: 3em 0 0 0;
   color: $copy-color;
   font-size: 1.125em;
   -webkit-font-smoothing: antialiased;
@@ -78,7 +100,7 @@ header {
   right: 0;
   left: 0;
 
-  z-index: 1;
+  z-index: 2;
 
   max-width: 70em;
   margin: 1em;
@@ -101,4 +123,33 @@ header {
   border-radius: 100%;
   box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
 }
+
+.footer {
+  background-color: $bg-color-light;
+  margin: 2em 0 0 0;
+  padding: 0.5em 0;
+  text-align: center;
+
+  &__copyright {
+    margin: 0;
+  }
+
+  &__linklist {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+  }
+
+  &__linkitem {
+  }
+
+  &__link {
+    color: $copy-color;
+    padding: 0.5em 0.75em;
+  }
+}
 </style>