From ce78c5c3826f7318c5658cf6ec6653a48c12d89e Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sun, 4 Jul 2021 14:27:51 +0200
Subject: [PATCH] Improve footer design

---
 src/components/Footer.vue | 93 ++++++++++++++++++++-------------------
 1 file changed, 48 insertions(+), 45 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 68dde03..3d6754a 100755
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,49 +1,47 @@
 <template>
-  <footer class="footer w-full border-t-2 border-solid border-gray-200 px-4 dark:border-gray-800 mb-20 md:mb-0">
-    <div>
-      <div class="flex flex-col items-center py-4 text-center ">
-        <div class="mb-3">
-          <p class="inline">{{ $t('footer.find_me') }}
-            <br class="md:hidden"/>
-            <a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
-              <TwitchIcon />
-              <span class="link">Twitch</span>
-            </a>,
-            <a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
-              <GithubIcon />
-              <span class="link">Github</span>
-            </a> &
-            <a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
-              <TwitterIcon />
-              <span class="link">Twitter</span>
-            </a>
-            <br class="md:hidden"/>
-            {{ $t('footer.separator') }}
-            <a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank" rel="noopener noreferrer">
-              <MailIcon />
-              <span class="link">Mail</span>
-            </a>
-          </p>
-          <br class="md:hidden"/>
-          <span class="inline dark:text-gray-400 text-gray-600 text-xs">
-            {{ $t('footer.links_click') }}
-          </span>
-        </div>
-        <p>
-          {{ $t('footer.credits') }}
-          <a class="font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
-            <NuxtIcon />
-            <span class="link">NuxtJS</span>
-          </a>
-          {{ $t('footer.credits_separator_and') }}
-          <a class="font-semibold" target="_blank" href="https://adonisjs.com" rel="noopener noreferrer">
-            <AdonisIcon />
-            <span class="link">AdonisJS</span>
-          </a>
-          {{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
-        </p>
-        <p>{{ $t('footer.copyrights', { date: getDate }) }}</p>
+  <footer class="footer w-full border-t-2 border-solid border-gray-200 px-4 xl:px-32 dark:border-gray-800 mb-20 md:mb-0">
+    <div class="flex flex-col md:flex-row justify-between pt-4 items-center">
+      <div class="inline flex space-x-4 mb-4">
+        <a class="link font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
+          <TwitchIcon /> <span>Twitch</span>,
+        </a>
+        <a class="link font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
+          <GithubIcon /> <span>Github</span>,
+        </a>
+        <a class="link font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
+          <TwitterIcon /> <span>Twitter</span>,
+        </a>
+        <a class="link font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank" rel="noopener noreferrer">
+          <MailIcon /> <span>Mail</span>
+        </a>
       </div>
+      <div class="flex space-x-4">
+        <nuxt-link class="link font-semibold" to="env">
+          <span>Tools</span>,
+        </nuxt-link>
+        <nuxt-link class="link font-semibold" to="guestbook">
+          <span>Guestbook</span>,
+        </nuxt-link>
+        <nuxt-link class="link font-semibold" to="contact">
+          <span>Contact</span>
+        </nuxt-link>
+      </div>
+    </div>
+    <div class="text-center my-4">
+      <p>
+        {{ $t('footer.credits') }}
+        <a class="link font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
+          <NuxtIcon />
+          <span>NuxtJS</span>
+        </a>
+        {{ $t('footer.credits_separator_and') }}
+        <a class="link font-semibold" target="_blank" href="https://adonisjs.com" rel="noopener noreferrer">
+          <AdonisIcon />
+          <span>AdonisJS</span>
+        </a>
+        {{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
+      </p>
+      <p>{{ $t('footer.copyrights', { date: getDate }) }}</p>
     </div>
   </footer>
 </template>
@@ -72,7 +70,12 @@ export default defineComponent({
 <style scoped lang="scss">
 .footer {
   .link {
-    @apply border-b-2 border-gray-200 hover:border-black dark:border-gray-700 dark:hover:border-white duration-300;
+    span {
+      @apply border-b-2 border-gray-200 dark:border-gray-700 duration-300;
+    }
+    &:hover span {
+      @apply border-indigo-600
+    }
   }
 }
 </style>