style: playlsits

components/compilations-list.vue

@@ -1,9 +1,7 @@
 <template>
-  <section>
     <div v-for="compilation in store.getAllCompilations" class="text-white">
       <compilationObject :data="compilation" template="full" />
     </div>
-  </section>
 </template>
 
 <script setup lang="ts">

components/playlistObject.vue

@@ -0,0 +1,28 @@
+<template>
+  <NuxtLink :to="'/playlists/' + playlist"
+    class="compilation mx-auto p-4 inline-flex hover:text-black">
+    <atropos-component class="my-atropos" active-offset="80" shadow-scale="1.05">
+      <img :src="'ES00A/bkg.jpg'" data-atropos-offset="-8" class="invert" />
+      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
+      <p data-atropos-offset="0" class="playlist-title inset-0 object-cover relative text-center -top-16 text-4xl text-black text-shadow">
+        {{playlist}}
+      </p>
+    </atropos-component>
+  </NuxtLink>
+</template>
+
+<script setup>
+const props = defineProps(['playlist'])
+</script>
+
+<style scoped>
+.logo {
+  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
+  left: 14%;
+  top: 10%;
+}
+
+.playlist-title {
+  text-shadow: 0 0 5px #558ABB;
+}
+</style>

components/playlists-list.vue

@@ -1,12 +1,7 @@
 <template>
-  <section>
-    <div v-for="playlist in playlists.files" class="text-white">
-      <NuxtLink :to="'/playlists/' + playlist"
-        class="compilation mx-auto p-4 inline-flex hover:bg-esyellow hover:text-black">
-        {{ playlist }}
-      </NuxtLink>
+    <div v-for="playlist in playlists.files" class="w-44">
+      <playlistObject :playlist="playlist" template="full" />
     </div>
-  </section>
 </template>
 
 <script setup lang="ts">