Move particles

components/home/HomeHero.vue

@@ -3,9 +3,6 @@
     <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full z-10">
       <nuxt-content :document="hero" />
     </div>
-    <HomeHeroSky class="fill-current text-white absolute" />
-
-    <LazyHomeHeroParticles v-if="isDesktop" />
   </div>
 </template>
 
@@ -17,14 +14,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      isDesktop: false,
-    }
-  },
-  mounted() {
-    if (window.innerWidth > 640) this.isDesktop = true
-  },
 }
 </script>
 

components/home/HomeHeroParticles.vue

 <template>
-  <div>
-    <div
-      id="tsparticles-limit"
-      class="absolute bg-blue-50 dark:bg-black left-0 top-0"
-    />
-    <Particles
-      id="tsparticles"
-      :options="$options.config"
-      class="h-screen absolute right-0 top-0 opacity-70 dark:opacity-50"
-    />
-  </div>
+  <Particles
+    id="tsparticles"
+    :options="$options.config"
+    class="h-screen absolute right-0 top-0 opacity-70 dark:opacity-50"
+  />
 </template>
 
 <script>
@@ -234,14 +228,4 @@ export default {
 #tsparticles {
   width: 100vw;
 }
-#tsparticles-limit {
-  box-shadow: rgb(239 246 255) 0px 0px 80px 100px;
-  width: 60vw;
-  height: 60vh;
-  border-radius: 0 0 40vh;
-  z-index: 1;
-}
-.dark #tsparticles-limit {
-  box-shadow: black 0px 0px 80px 100px;
-}
 </style>

components/layout/LayoutFooter.vue

 <template>
   <div
-    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 p-6 text-white"
+    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 p-6 text-white z-10"
   >
     <div class="container">
       <div class="flex flex-wrap mb-4 w-full">

layouts/error.vue

 <template>
-  <div class="prose mx-auto">
-    <div
-      class="flex justify-center items-center"
-      style="height: calc(80vh - 5rem)"
-    >
-      <div>
-        <div class="flex items-center text-red-400 scale-150 transform">
+  <div class="h-screen -mb-44 flex bg-gradient-to-b from-blue-100 to-blue-50">
+    <div class="container text404">
+      <div class="absolute z-10">
+        <div
+          class="flex items-center text-red-400 dark:text-red-600 scale-150 transform"
+        >
           <span class="text-9xl">4</span>
           <fa
             :icon="['fab', 'creative-commons-nc-eu']"
@@ -18,17 +17,41 @@
         <div class="v-full flex">
           <t-button
             variant="custom"
-            class="m-auto mt-20 bg-gray-500 hover:bg-gray-600"
+            class="m-auto mt-20 bg-gray-500 hover:bg-gray-600 shadow-xl"
             icon="chevron-left"
             @click="$router.go(-1)"
           >
             <fa icon="chevron-left" class="mr-3" />{{ $t('goBack') }}
           </t-button>
-          <t-button class="m-auto mt-20" @click="$router.push('/')">
+          <t-button class="m-auto mt-20 shadow-xl" @click="$router.push('/')">
             <fa icon="home" class="mr-3" />{{ $t('home.title') }}
           </t-button>
         </div>
       </div>
     </div>
+
+    <HomeHeroSky class="fill-current text-white absolute" />
+
+    <LazyHomeHeroParticles v-if="isDesktop" />
   </div>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      isDesktop: false,
+    }
+  },
+  mounted() {
+    if (window.innerWidth > 640) this.isDesktop = true
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+.text404 {
+  margin-top: calc(min(2vh, 10rem) + 10rem);
+  padding-left: calc(min(2vw, 10rem) + 10rem);
+}
+</style>