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

💻 | Working

Browse Source
This commit is contained in:
Arthur Danjou
2021-04-16 21:52:29 +02:00
parent 2ecad33096
commit 8450d8bebf
25 changed files with 162 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Footer.vue
View File

@@ -6,21 +6,22 @@
<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">
<img class="inline img" src="@/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
<img class="inline" src="@/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
<span class="link">Twitch</span>
</a>,
<a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
<img class="inline img" src="@/assets/images/socials/github.svg" alt="Github logo" height="20" width="20" />
<img v-if="!isDarkMode" class="inline black" src="@/assets/images/socials/github-black.svg" alt="Github logo" height="20" width="20" />
<img v-else class="inline black" src="@/assets/images/socials/github-white.svg" alt="Github logo" height="20" width="20" />
<span class="link">Github</span>
</a> &
<a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
<img class="inline img" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
<img class="inline" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
<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">
<svg class="inline img" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg class="inline" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span class="link">Mail</span>
@@ -34,7 +35,7 @@
<p>
{{ $t('footer.credits') }}
<a class="font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
<img class="inline img" src="@/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
<img class="inline" src="@/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
<span class="link">NuxtJs</span>
</a>
{{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
@@ -46,15 +47,21 @@
</template>
<script>
import {ref} from "@nuxtjs/composition-api";
import {computed, ref, useContext} from "@nuxtjs/composition-api";
export default {
name: "Footer",
setup() {
const {$colorMode} = useContext()
const isDarkMode = computed(() => {
return $colorMode.preference === 'dark' | undefined
})
const getDate = ref(new Date().getFullYear())
return {
getDate
getDate,
isDarkMode
}
}
}
@@ -62,16 +69,12 @@ export default {
<style scoped lang="scss">
.footer {
.img {
transform: translateY(-3px);
.link {
@apply border-b-2 border-gray-200 hover:border-black dark:border-gray-700 dark:hover:border-white;
}
.link {
@apply duration-100;
&:hover {
@apply border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid;
}
.black {
@apply fill-black dark:fill-white dark:text-white dark:stroke-black
}
}
</style>