From 00a967c2f86780a4da92a414522fde8584cb9c9d Mon Sep 17 00:00:00 2001
From: clement franckelemon <clement.franckelemon.etu@univ-lille.fr>
Date: Sun, 2 Mar 2025 10:59:04 +0100
Subject: [PATCH] :lipstick: add text effect on 404 error

---
 src/pages/ErrorNotFound.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/pages/ErrorNotFound.vue b/src/pages/ErrorNotFound.vue
index 18ed7c8..80adf50 100644
--- a/src/pages/ErrorNotFound.vue
+++ b/src/pages/ErrorNotFound.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="fullscreen bg-secondary text-white text-center q-pa-md flex flex-center">
     <div>
-      <div :style="$q.screen.lt.sm ? 'font-size: 30vh' : 'font-size: 40vh'" class="text-accent">
+      <div :style="$q.screen.lt.sm ? 'font-size: 30vh' : 'font-size: 40vh'" class="text-accent text-effect">
         404
       </div>
 
@@ -30,3 +30,25 @@
 <script setup lang="ts">
 //
 </script>
+
+<style scoped>
+@supports (-webkit-background-clip: text) {
+  .text-effect {
+    background-image: linear-gradient(45deg, #eeea14, #ffffff, #eeea14);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-size: 300% auto;
+    animation: textgradient 20s linear infinite;
+  }
+
+  @keyframes textgradient {
+    from {
+      background-position: 0 center;
+    }
+    to {
+      background-position: 300% center;
+    }
+  }
+}
+</style>
-- 
GitLab