From a79414aefb09ccb451f653af1e37f97b5c60e401 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Mon, 13 Sep 2021 23:45:44 +0200
Subject: [PATCH] Move particles
---
components/home/HomeHero.vue | 11 -------
components/home/HomeHeroParticles.vue | 26 ++++-------------
components/layout/LayoutFooter.vue | 2 +-
layouts/error.vue | 41 +++++++++++++++++++++------
4 files changed, 38 insertions(+), 42 deletions(-)
diff --git a/components/home/HomeHero.vue b/components/home/HomeHero.vue
index e5b4deb4..875f16e2 100644
--- a/components/home/HomeHero.vue
+++ b/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>
diff --git a/components/home/HomeHeroParticles.vue b/components/home/HomeHeroParticles.vue
index 750e0e19..0bd65e8e 100644
--- a/components/home/HomeHeroParticles.vue
+++ b/components/home/HomeHeroParticles.vue
@@ -1,15 +1,9 @@
<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>
diff --git a/components/layout/LayoutFooter.vue b/components/layout/LayoutFooter.vue
index 6f4ee5b6..3bdc1e8e 100644
--- a/components/layout/LayoutFooter.vue
+++ b/components/layout/LayoutFooter.vue
@@ -1,6 +1,6 @@
<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">
diff --git a/layouts/error.vue b/layouts/error.vue
index fab49987..7ca1d2b5 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,11 +1,10 @@
<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>
--
GitLab