rework fleurs

resources/js/components/BottomFleur.vue

@@ -1,7 +1,5 @@
 <template>
- <footer>
     <img :src="'skonk/board/bottom/Quest_Board_bottom_fleur0005.png'" style="width: 100%;">
- </footer>
 </template>
 
 <script>
@@ -9,14 +7,10 @@
 </script>
 
 <style scoped>
-footer {
-    position: fixed;
-    width: 100%;
-    bottom: 0;
-    z-index: 300;
+img {
+    z-index: 100;
     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/Header.vue

@@ -0,0 +1,21 @@
+<template>
+   <div class="header-main">
+        <a href="/">Home</a>
+   </div> 
+
+    <img :src="'/skonk/divider.png'" style="width: 90%; margin: auto;">
+</template>
+
+<style scoped>
+.header-main {
+    height: auto;
+    width: 100%;
+    background-color: var(--background-color);
+    padding: 10px;
+    text-align: left;
+}
+a {
+    font-size: 2vh;
+    margin: 10px;
+}
+</style>

resources/js/components/TopFleur.vue

@@ -13,14 +13,13 @@
     84% {background-image: url(/skonk/board/top/Quest_Board_top_fleur0005.png);}
     100% {background-image: url(/skonk/board/top/Quest_Board_top_fleur0006.png);}
 }
-.animate {
-    animation-duration: 600ms;
-    mask-repeat: no-repeat;
-    animation-name: fleur;
-    height: 100px;
-}
-.image {
+div {
     width: 100%;
     padding: 15px;
+    position: sticky;
+    top: 0;
+    background: var(--background-color);
+    z-index: 100;
+    background: linear-gradient(180deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);
 }
 </style>

resources/js/components/Wish.vue

@@ -86,7 +86,10 @@ img.cursor{
 .opposite-corner {
     rotate: 180deg;
     right: 10px;
-    bottom: 10px;
+    bottom: 0px;
+}
+.large-container:hover {
+    scale: 1.01;
 }
 .cursor {
     position: absolute;