fix 404 & logo favicon

app/error.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  error: Object as () => NuxtError
+})
+</script>
+
+<template>
+  <div>
+    <div class="background fixed w-full h-full">
+      <video class="animation screen" loop autoplay muted ref="animation">
+        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
+        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
+          media="all and (max-width: 640px)">
+      </video>
+    </div>
+    <section class="splash-screen flex items-center flex-col">
+      <figure class="ui">
+        <h1 class="text-white pt-6 text-lg md:text-xl lg:text-2xl text-center font-bold tracking-widest text-shadow">
+          {{ error.statusCode }}
+        </h1>
+        <NuxtLink to="/">Go back home</NuxtLink>
+      </figure>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+body {
+  margin: 0;
+  overflow-x: hidden;
+}
+
+.logo,
+.button,
+.shadow,
+.animation,
+.mix {
+  transition: .7s opacity;
+}
+
+.screen {
+  position: absolute;
+  height: 100vh;
+  min-width: 100%;
+  max-width: 100%;
+}
+
+.splash-screen {
+  position: relative;
+  height: 100vh;
+  box-shadow: inset black 0px 1px 800px 200px;
+}
+
+.animation {
+  z-index: 1;
+  object-fit: cover;
+  opacity: .8;
+  /* opacity: 0; */
+}
+
+.mix {
+  z-index: 4;
+  position: fixed;
+}
+
+.shadow {
+  z-index: 3;
+  box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
+  opacity: .9;
+}
+
+.ui {
+  z-index: 4;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 80%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
+}
+
+.mixPlayer {
+  background: black;
+  max-height: 70vh;
+}
+
+.hide {
+  opacity: 0;
+  z-index: 0;
+}
+
+.show {
+  opacity: 1;
+}
+
+.text-shadow {
+  text-shadow: 3px 2px 8px black;
+}
+</style>