create new styling for desktops

resources/js/components/BottomFleur.vue

@@ -10,6 +10,10 @@
 img {
     z-index: 100;
     padding: 0;
+    max-width: 553px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
     background: var(--background-color);
     background: linear-gradient(0deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);
 }

resources/js/components/TopFleur.vue

@@ -15,9 +15,14 @@
 }
 div {
     width: 100%;
+    max-width: 662px;
     padding: 15px;
     position: sticky;
     top: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+
     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%);

resources/js/components/Wish.vue

@@ -55,7 +55,7 @@ function openWish() {
                         <div class="large-text-title z-index-normal" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
                             Lorem Ipsum
                         </div>
-                        <div class="z-index-normal">
+                        <div class="z-index-normal" style="text-align: left;">
                             {{ wish.title }}
                         </div>
                     </div>
@@ -101,7 +101,7 @@ img.cursor{
 .large-container {
     display: absolute;
     height: 100px;
-    margin: 10px;
+    margin: 20px;
 }
 .large-absolute {
     display: absolute;
@@ -109,6 +109,7 @@ img.cursor{
 }
 .large-text-title {
     text-transform: uppercase;
+    text-align: left;
     font-size: 2.3vh;
     margin-top: 15px;
 }
@@ -124,6 +125,7 @@ img.cursor{
 .large-text {
     display: flex;
     font-size: 2vh;
+    text-align: center;
     flex-direction: column;
     margin-left: 15px;
     margin-bottom: 15px;

resources/js/pages/HomeView.vue

@@ -11,6 +11,7 @@ let interval;
 
 const wishes = ref([]);
 const selected = ref(-1);
+const mobile = ref(screen.width < 760);
 
 const call = () => {
     axios
@@ -34,6 +35,7 @@ onMounted(() => {
 <template>
     <body>
     <Header></Header>
+    <template v-if="mobile">
         <TopFleur/>
         <div class="wrapper">
             <Transition>
@@ -53,6 +55,32 @@ onMounted(() => {
         </div>
         <div class="push"></div>
         <BottomFleur/>
+    </template>
+    <div v-else style="text-align: center;">
+
+        <TopFleur/>
+        <div class="desktop-container">
+            <div>
+                <template v-if="wishes.length>0">
+                    <template v-for="i in 5">
+                            <Wish :wish="wishes[i-1]" :selected="i-1 == selected" :index="i-1"  @selectedWish="selectedWish" v-if="wishes.length>=i"/>
+                    </template> 
+                </template>
+            </div>
+            <div>
+                <template v-if="wishes.length>5">
+                    <template v-for="i in 5">
+                            <Wish :wish="wishes[i + 4]" :selected="i + 4 == selected" :index="i + 4"  @selectedWish="selectedWish" v-if="wishes.length>=(i+5)"/>
+                    </template> 
+                </template>
+            </div>
+            <div>
+                    <WishPanel :wish="wishes[selected]" @closeWish="selected = -1" v-if="selected != -1"/>
+            </div>
+        </div>
+
+        <BottomFleur/>
+    </div>
     </body>
 </template>
 
@@ -71,4 +99,10 @@ onMounted(() => {
 .v-enter-from {
   opacity: 0;
 }
+
+.desktop-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
 </style>