change bkg (need update home !)

components/compilationObject.vue

@@ -5,6 +5,7 @@
       <img :src="props.data.id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
       <img :src="props.data.id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover" />
       <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
+      <img src="/play.svg" width="20%" class="absolute play" />
     </atropos-component>
   </NuxtLink>
 </template>
@@ -19,4 +20,9 @@ const props = defineProps(['data', 'template'])
   left: 14%;
   top: 10%;
 }
+.play {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

pages/compilations/[id].vue

@@ -8,15 +8,15 @@
     </video>
     <nav class="text-esyellow w-full flex" v-if="currentTrack">
       <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-wihte-400 border-l-1 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 lg:text-3xl bold">
+        <span class="block lg:text-3xl font-bold">
           {{ index + 1 }}
         </span>
-        <span class="hidden 2xl:block">
+        <span class="hidden 2xl:block hover:text-black" :class="{'text-white': track.id !== currentTrack.id, 'text-black': track.id === currentTrack.id }">
           {{ track.title }}
         </span>
-        <span class="hidden lg:block">
+        <span class="hidden lg:block font-bold">
           {{ getArtistName(track.artist) }}
         </span>
       </button>
@@ -151,4 +151,8 @@ nav>button:first-child {
     content: "\00d7";
   }
 }
+
+.border-l-1 {
+  border-left: grey solid 1px;
+}
 </style>

pages/index.vue

@@ -19,7 +19,7 @@
     <section class="splash-screen flex items-center flex-col">
       <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
+        <h1 class="text-white pt-6 text-lg md:text-xl lg:text-2xl text-center font-bold tracking-widest text-shadow">compilations
           Indépendantes 
         </h1>
         <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
@@ -89,6 +89,7 @@ body {
 .splash-screen {
   position: relative;
   height: 100vh;
+  box-shadow: inset black 0px 1px 800px 200px;
 }
 
 .animation {
@@ -138,4 +139,8 @@ body {
 .show {
   opacity: 1;
 }
+
+.text-shadow {
+  text-shadow: 3px 2px 8px black;
+}
 </style>

public/play.svg

@@ -1,38 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="iso-8859-1"?>
-<svg
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-   version="1.1"
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-   id="svg1"
+	 viewBox="0 0 60 60" xml:space="preserve">
-   sodipodi:docname="play.svg"
+<g>
-   width="25.177818"
+	<path d="M45.563,29.174l-22-15c-0.307-0.208-0.703-0.231-1.031-0.058C22.205,14.289,22,14.629,22,15v30
-   height="31.875"
+		c0,0.371,0.205,0.711,0.533,0.884C22.679,45.962,22.84,46,23,46c0.197,0,0.394-0.059,0.563-0.174l22-15
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+		C45.836,30.64,46,30.331,46,30S45.836,29.36,45.563,29.174z M24,43.107V16.893L43.225,30L24,43.107z"/>
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+	<path d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+		S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"/>
-   xmlns="http://www.w3.org/2000/svg"
+</g>
-   xmlns:svg="http://www.w3.org/2000/svg">
+</svg>
-  <defs
-     id="defs1" />
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:zoom="1.9448516"
-     inkscape:cx="202.07197"
-     inkscape:cy="136.00009"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg1" />
-  <path
-     style="font-size:64px;line-height:0.6;font-family:'Noto Sans Rejang';-inkscape-font-specification:'Noto Sans Rejang';letter-spacing:0.03px;word-spacing:0.16px;stroke-width:5.38174;stroke-miterlimit:2.3;stroke-dasharray:1.07635, 5.91989"
-     d="M 0,31.875 V 0 l 25.177818,15.9375 z"
-     id="text1"
-     aria-label="▸" />
-</svg>