Sort icons

Fix Footer
This commit is contained in:
2020-10-30 13:08:51 +01:00
parent 7547213960
commit 1e1f13d895
45 changed files with 137 additions and 84 deletions

View File

@@ -4,16 +4,41 @@
<div class="flex flex-col items-center border-t border-solid border-gray-400 py-4 bg-gray-200 text-center ">
<div class="mb-3">
<p class="inline">Retrouvez moi sur :
<span><a href="https://twitch.com/ArthurDanjou" target="_blank">Twitch</a></span>,
<span><a href="https://github.com/ArthurDanjou" target="_blank">Github</a></span> &
<span><a href="https://twitter.com/ArthurDanj" target="_blank">Twitter</a></span> et par
<span><a href="mailto:contact@arthurdanjou.fr" target="_blank">Mail</a></span></p>
<br class="md:hidden"/>
<a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank">
<img class="inline img" src="@/assets/img/socials/twitch.svg" alt="Twitch logo" height="18" width="18" />
Twitch
</a>,
<a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank">
<img class="inline img" src="@/assets/img/socials/github.svg" alt="Github logo" height="20" width="20" />
Github
</a> &
<a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank">
<img class="inline img" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
Twitter
</a> et par
<a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank">
<img class="inline img" src="@/assets/img/socials/twitter.svg" alt="Mail logo" height="20" width="20" />
Mail
</a>
</p>
<span class="inline text-gray-600 text-xs">
(Clique c'est gratuit 🔗)
</span>
</div>
<p>
Développé et conçu avec en utilisant <span>NuxtJs</span> & <span>AdonisJs</span> par <span>Arthur DANJOU</span>
Développé et conçu avec en utilisant
<a class="font-semibold" target="_blank" href="https://nuxtjs.org">
<img class="inline img" src="@/assets/img/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
NuxtJs
</a>
&
<a class="font-semibold" target="_blank" href="https://preview.adonisjs.com/">
<img class="inline img" src="@/assets/img/socials/adonisjs.svg" alt="AdonisJs logo" height="20" width="20" />
AdonisJs
</a>
par <span>Arthur DANJOU</span>
</p>
<p>© Copyright {{date}} - Tous droits réservés</p>
</div>
@@ -34,8 +59,8 @@ export default {
<style scoped lang="scss">
.footer {
.footer-top {
padding: 1rem 15%;
.img {
transform: translateY(-3px);
}
}
</style>

View File

@@ -1,9 +1,11 @@
<template>
<header class="fixed top-0 left-0 bg-white header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24">
<header class="fixed top-0 left-0 bg-white dark:bg-black header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24">
<div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500 dark:text-white dark:bg-black">
Arthur Danjou
</div>
<nuxt-link to="/">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500 dark:text-white dark:bg-black">
Arthur Danjou
</div>
</nuxt-link>
<nav class="right">
<div class="flex flex-col md:flex-row items-center">
<ul class="flex text-xl">
@@ -12,10 +14,10 @@
</li>
<li class="mx-2 cursor-pointer flex items-center">
<div @click="changeColorMode()" v-if="this.$colorMode.value === 'light'" class="">
<img alt="Moon Logo" src="@/assets/img/icons/moon.svg" height="25" width="25"/>
<img alt="Moon Logo" src="@/assets/img/utilities/moon.svg" height="25" width="25"/>
</div>
<div @click="changeColorMode()" v-else class="">
<img src="@/assets/img/icons/sun.svg" alt="Sun Logo" height="25" width="25"/>
<img src="@/assets/img/utilities/sun.svg" alt="Sun Logo" height="25" width="25"/>
</div>
</li>
<nuxt-link class="red hidden md:inline-block" to="/">
@@ -48,31 +50,31 @@
<ul class="z-index-50 bg-white md:hidden fixed bottom-0 left-0 z-index-20 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<nuxt-link class="red" to="/">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/home.svg" alt="Home icon" height="15" width="15" />
<img class="inline-block" src="@/assets/img/sections/home.svg" alt="Home icon" height="15" width="15" />
Accueil
</li>
</nuxt-link>
<nuxt-link to="/about" class="orange">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/profile.svg" alt="About icon" height="15" width="15" />
<img class="inline-block" src="@/assets/img/sections/profile.svg" alt="About icon" height="15" width="15" />
Moi
</li>
</nuxt-link>
<nuxt-link to="/blog" class="green">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/quill.svg" alt="Blog icon" height="15" width="15" />
<img class="inline-block" src="@/assets/img/sections/quill.svg" alt="Blog icon" height="15" width="15" />
Blog
</li>
</nuxt-link>
<nuxt-link to="/work" class="blue">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/case.svg" alt="Work icon" height="15" width="15" />
<img class="inline-block" src="@/assets/img/sections/case.svg" alt="Work icon" height="15" width="15" />
Travail
</li>
</nuxt-link>
<nuxt-link to="/contact" class="purple">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/pin.svg" alt="Contact icon" height="15" width="15" />
<img class="inline-block" src="@/assets/img/sections/pin.svg" alt="Contact icon" height="15" width="15" />
Contact
</li>
</nuxt-link>

View File

@@ -1,8 +1,8 @@
<template>
<article class="border border-solid border-gray-300 w-full lg:w-1/3 h-auto h-blog p-2 flex flex-col justify-between my-5 lg:my-0 lg:mx-5">
<div>
<p class="text-3xl font-bold text-justify leading-7">{{title}}</p>
<p class="text-gray-900 text-lg italic text-justify">{{description}}</p>
<p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
<p class="text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
</div>
<div class="flex justify-between mt-8">
<div>

View File

@@ -1,8 +1,8 @@
<template>
<article class="border border-solid border-gray-300 w-full h-auto h-blog p-2 flex flex-col justify-between my-5">
<div>
<p class="text-3xl font-bold text-justify">{{title}}</p>
<p class="text-gray-900 text-lg italic text-justify">{{description}}</p>
<p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
<p class="text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
</div>
<div class="flex justify-between mt-8">
<div>