adjust footer

resources/css/app.css

@@ -9,7 +9,7 @@
 }
 
 :root {
-    --background-color: rgb(10,10,10);
+    --background-color: rgba(10,10,10,1);
     --color-primary: rgb(250, 250, 250);
     --color-a-primary: rgb(142, 234, 252);
     --color-a-visited: rgb(252, 142, 250);
@@ -36,15 +36,7 @@
     font-style: normal;
 }
 
-footer {
+
-    width: 100%;
-    text-align: center;
-    color: grey;
-    font-size: medium;
-    padding: 2% 0;
-    position: fixed;
-    bottom: 0;
-}
 
 body {
     background-color: var(--background-color);

resources/js/components/Footer.vue

@@ -1,30 +1,22 @@
 <template>
  <footer>
-    <slot>All rights reserved</slot>
+    <img :src="'skonk/board/bottom/Quest_Board_bottom_fleur0005.png'">
-   <template v-if="this.date">
+
-         • {{ this.year }}
-   </template> 
  </footer>
 </template>
 
 <script>
-new Date().getFullYear()
-
-export default {
-    data() {
-        return {
-            year: 0,
-        } 
-    },
-    props: {
-        date: {
-            type: Boolean,
-            default: true,
-        }
-    },
-    mounted() {
-        this.year = new Date().getFullYear();
-    }
-}
 
 </script>
+
+<style scoped>
+
+footer {
+    position: fixed;
+    bottom: 0;
+    padding: 0;
+    background: var(--background-color);
+    background: linear-gradient(0deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);
+    padding: 10px;
+}
+</style>

resources/js/components/Wish.vue

@@ -53,7 +53,7 @@ function openWish() {
 
 <style scoped>
 .backdrop {
-    position: absolute;
+    position: fixed;
     width: 100%;
     height: 100%;
     filter: opacity(20%);
@@ -69,7 +69,7 @@ img.cursor{
     bottom: 0;
 }
 .cursor {
-    position: absolute;
+    position: fixed;
     width: 100%;
     height: 100%;
     z-index: 10;