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">

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@pinia/nuxt": "^0.5.5",
     "atropos": "^2.0.2",
+    "cypress": "^13.16.0",
     "nuxt": "^3.12.3",
     "pinia": "^2.2.4",
     "unhead": "^1.9.15",

pages/compilations/[id].vue

@@ -10,7 +10,7 @@
       <button v-for="(track, index) in tracks" @click="listenTo(track.start)" :index="track.id"
         class="border-l-wihte-400 border-l-2 p-2 flex-grow hover:bg-esyellow hover:text-black"
         :class="{ 'border-l-0': index === 0, 'bg-esyellow text-black': track.id === currentTrack.id }">
-        <span class="block">
+        <span class="block lg:text-3xl bold">
           {{ index + 1 }}
         </span>
         <span class="hidden 2xl:block">

pages/index.vue

@@ -1,5 +1,12 @@
 <template>
   <div>
+    <div class="background fixed w-full h-full">
+      <video class="animation screen" loop autoplay muted ref="animation">
+        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
+        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
+          media="all and (max-width: 640px)">
+      </video>
+    </div>
     <div class="w-full flex justify-center">
       <nav class="[&>*]:p-2 text-white bottom-0 right-0 fixed flex justify-center z-50">
         <a href="https://www.youtube.com/channel/UCATtFHnOLDCv8qroi2KW3ZA" target="about:blank" class="mt-1">
@@ -13,22 +20,18 @@
       <figure class="ui">
         <img class="logo" src="/logo.svg">
         <h1 class="text-white pt-6 text-sm md:text-md lg:text-lg text-center font-bold tracking-widest">compilations
-          Indépendantes
+          Indépendantes 
         </h1>
         <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
           ↓
         </button>
       </figure>
-      <div class="shadow screen" />
-      <video class="animation screen" loop autoplay muted ref="animation">
-        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
-        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
-          media="all and (max-width: 640px)">
-      </video>
     </section>
     <section class="flex justify-center">
-      <div class="flex flex-col max-w-2xl">
+      <div class="flex gap-[2%] flex-wrap max-w-7xl justify-center">
+        <h2 class="w-full my-12 text-white pt-6 text-3xl capitalize text-center font-bold tracking-widest">compilations</h2>
         <compilationsList />
+        <h2 class="w-full my-12 text-white pt-6 text-3xl capitalize text-center font-bold tracking-widest">playlists</h2>
         <playlistsList />
       </div>
     </section>
@@ -45,10 +48,21 @@ useSeoMeta({
 })
 
 const dataStore = useDataStore()
+const animation = ref()
 
 const scrollDown = function () {
   window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })
 }
+
+onMounted(async () => {
+  window.addEventListener('scroll', () => {
+  const scrollTop = window.scrollY || document.documentElement.scrollTop;
+  const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+    // console.log(1 / (screenHeight / scrollTop))
+  animation.value.style.opacity = screenHeight / (scrollTop * 4)
+});
+})
+
 </script>
 
 <style lang="scss" scoped>
@@ -75,7 +89,6 @@ body {
 .splash-screen {
   position: relative;
   height: 100vh;
-  background-color: black;
 }
 
 .animation {
@@ -125,4 +138,4 @@ body {
 .show {
   opacity: 1;
 }
-</style>
+</style>