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

Improve 404 page + improve first article + Add favicon + fix content

Browse Source
This commit is contained in:
Arthur Danjou
2020-12-14 19:26:24 +01:00
parent 8e89c954e9
commit 312890a3ad
18 changed files with 359 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
layouts/error.vue
View File

@@ -1,20 +1,30 @@
<template>
<main class="error">
<div v-if="error.statusCode === 404">
<div class="mt-16 flex flex-col items-center justify-center">
<img src="@/assets/img/404.svg" alt="404 Icon" height="768" width="768" />
<nuxt-link to="/" class="home-btn">
<div class="py-3 px-6 mb-16 font-bold border-2 border-solid border-red-500 hover:bg-red-500 duration-300 rounded">
Revenir à l'accueil
<svg class="inline arrow-img" height="32" width="32" 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="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</div>
</nuxt-link>
</div>
<main class="error relative">
<div class="w-full h-screen">
<img class="w-full h-full" src="~/assets/img/404.png" alt="404 Image" />
</div>
<div v-else>
<div class="text absolute inset-1/4 w-full h-screen mb-8">
<div class="flex items-center justify-center h-full">
<div class="flex flex-col justify-center text-center">
<h1 class="title dark:text-white font-bold">
404
</h1>
<h2 class="text-4xl dark:text-white">
{{ $t('404.description') }}
</h2>
<p class="text-2xl dark:text-dark-100 mb-4">
{{ $t('404.no_page') }}
</p>
<nuxt-link class="home-btn" to="/">
<div class="py-3 px-6 font-bold border-2 border-solid border-red-500 hover:bg-red-500 duration-300 rounded">
{{ $t('404.back') }}
<svg class="inline arrow-img" height="32" width="32" 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="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</div>
</nuxt-link>
</div>
</div>
</div>
</main>
</template>
@@ -22,12 +32,23 @@
<script>
export default {
name: "error",
props: ['error']
layout: "error-2"
}
</script>
<style scoped lang="scss">
.error {
.text {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
font-size: 14rem;
}
.home-btn:hover .arrow-img {
transform: translate(3px, 0);
}