rework fleurs

resources/css/app.css

@@ -11,8 +11,8 @@
 :root {
     --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);
+    --color-a-primary: rgb(221, 221, 221);
+    --color-a-visited: rgb(142, 142, 142);
 }
 
 @font-face {
@@ -41,6 +41,7 @@
 body {
     background-color: var(--background-color);
     width: 100%;
+    height: 100%;
     font-family: Perpetua Regular;
     color: var(--color-primary);
     cursor: url('/skonk/cursor.png');

resources/js/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Footer from "./components/Footer.vue";
+import Footer from "./components/BottomFleur.vue/index.js";
 </script>
 
 <template>

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;

resources/js/pages/HomeView.vue

@@ -4,7 +4,8 @@ import {ref, onMounted} from 'vue';
 import axios from 'axios';
 import TopFleur from '../components/TopFleur.vue';
 import WishPanel from '../components/WishPanel.vue';
-import Footer from '../components/Footer.vue';
+import BottomFleur from '../components/BottomFleur.vue';
+import Header from '../components/Header.vue';
 
 let interval;
 
@@ -32,11 +33,44 @@ onMounted(() => {
 
 <template>
     <body>
+    <Header></Header>
     <TopFleur/>
+    <div class="wrapper">
+        <Transition>
+            <div v-if="selected==-1">
                 <template v-for="(wish, i) in wishes">
-            <Wish :wish="wish" :selected="selected==i" :index="i"  @selectedWish="selectedWish" v-if="selected == i || selected == -1"/>
-            <WishPanel :wish="wish" v-if="selected == i" @closeWish="selected = -1"></WishPanel>
+                    <Wish :wish="wish" :selected="false" :index="i"  @selectedWish="selectedWish"/>
                 </template>
-    <Footer/>
+            </div>
+        </Transition>
+        <Transition>
+            <div v-if="selected!=-1">
+                <Wish :wish="wishes[selected]" selected :index="selected"  @selectedWish="selectedWish"/>
+                <WishPanel :wish="wishes[selected]" @closeWish="selected = -1"></WishPanel>
+            </div>
+        </Transition>
+
+    </div>
+    <div class="push"></div>
+    <BottomFleur/>
     </body>
 </template>
+
+<style scoped>
+.wrapper {
+    min-height: 100%;
+    margin-bottom: -50px;
+}
+.push{
+    height: 50px;
+}
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>