From 6bfb7baa15d755476dd8041263428d7f9a0170f7 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 17 Oct 2024 23:42:26 +0200
Subject: [PATCH] feat: stars behind Lilou and reduce amount

---
 components/AppBody.vue          | 4 ++--
 components/StarshineGlitter.vue | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/AppBody.vue b/components/AppBody.vue
index 56aaffe..baa54e9 100644
--- a/components/AppBody.vue
+++ b/components/AppBody.vue
@@ -1,6 +1,6 @@
 <template>
   <main
-    class="h-full items-center p-5 justify-center flex flex-col space-y-4 bg-[#fa86c4]"
+    class="h-full items-center relative p-5 justify-center flex flex-col space-y-4 bg-[#fa86c4] z-10"
   >
     <NuxtRouteAnnouncer />
     <h1
@@ -19,7 +19,7 @@
       ✨ Lilou ✨
     </h1>
 
-    <div class="fixed inset-0">
+    <div class="absolute inset-0">
       <StarshineGlitter />
     </div>
   </main>
diff --git a/components/StarshineGlitter.vue b/components/StarshineGlitter.vue
index 0668a57..4d8166f 100644
--- a/components/StarshineGlitter.vue
+++ b/components/StarshineGlitter.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-const STARS = 500;
+const STARS = 250;
 
 const MIN_SPARKLE = 2;
-const MAX_SPARKLE = 20;
+const MAX_SPARKLE = 15;
 
 const MIN_SIZE = 15;
 const MAX_SIZE = 30;
@@ -39,7 +39,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="container" class="fixed inset-0" />
+  <div ref="container" class="fixed inset-0 -z-10" />
 </template>
 
 <style>
@@ -53,7 +53,6 @@ onMounted(() => {
   background-position: center;
   background-size: 100% 100%;
   overflow: hidden;
-  z-index: 2;
   color: tansparent;
   opacity: 0;
   animation: glitter 6s linear 0s infinite normal;