arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-14 20:19:35 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Improve footer design

Browse Source
This commit is contained in:
Arthur Danjou
2021-07-04 14:27:51 +02:00
parent 514b1e51ea
commit ce78c5c382
1 changed files with 48 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/Footer.vue
View File

@@ -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>