atropos v3

components/zero-a.vue

@@ -5,8 +5,7 @@
       <img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
       <img src="/zero/zero-a.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" />
-      <a href="#" data-atropos-offset="0"
-        class="absolute w-10 h-5 p-4 bg-red-700 text-center inset-0 rounded-full hover:bg-opacity-70 duration-200">play</a>
+      <slot class="absolute" ></slot>
     </atropos-component>
   </div>
 </template>

pages/index.vue

@@ -18,12 +18,14 @@
     <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)">
+      <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
+        media="all and (max-width: 640px)">
     </video>
     <div class="mix screen hide">
       <video class="mixPlayer screen" controls ref="mixPlayer">
         <source src="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4">
-          <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm" media="all and (max-width: 640px)">
+        <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm"
+          media="all and (max-width: 640px)">
       </video>
       <button class="button button--close flex justify-center items-center" @click="closePlayer()">
         <svg width="40px" height="30px">
@@ -33,22 +35,32 @@
       </button>
     </div>
   </section>
-  </template>
-  <script setup lang="ts">
-  // SEO
-  useSeoMeta({
+  <section class="flex">
+    <zero-a>
+      <button class="button flex justify-center items-center" @click="play()">
+        <svg width="40px" height="30px">
+          <polygon points="0,0 0,30 30,15" />
+        </svg>
+      </button>
+    </zero-a>
+    <zero-b></zero-b>
+  </section>
+</template>
+<script setup lang="ts">
+// SEO
+useSeoMeta({
   title: 'evilSpins, compilations indépendantes',
   ogTitle: 'evilSpins, compilations indépendantes',
   description: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
   ogDescription: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
   ogImage: 'https://evilspins.com/logo.svg'
-  })
+})
 
 
-  // animate player
-  const mixPlayer = ref()
+// animate player
+const mixPlayer = ref()
 
-  const play = () => {
+const play = () => {
   fadeOut(document.querySelector('.button'))
   fadeOut(document.querySelector('.logo'))
   fadeOut(document.querySelector('.animation'))
@@ -56,73 +68,77 @@
   fadeOut(document.querySelector('.shadow'))
   mixPlayer.value.play()
   mixPlayer.value.focus()
-  }
+}
 
-  const closePlayer = () => {
+const closePlayer = () => {
   fadeIn(document.querySelector('.animation'))
   fadeIn(document.querySelector('.button'))
   fadeIn(document.querySelector('.logo'))
   fadeOut(document.querySelector('.mix'))
   fadeIn(document.querySelector('.shadow'))
   mixPlayer.value.pause()
-  }
+}
 
-  const fadeOut = (elt: HTMLElement) => {
+const fadeOut = (elt: HTMLElement) => {
   elt.classList.add('hide')
-  }
-  const fadeIn = (elt: HTMLElement) => {
+}
+const fadeIn = (elt: HTMLElement) => {
   elt.classList.remove('hide')
-  }
+}
 
-  // load data
-  const { data: artists} = await useFetch('/api/artists')
-  const { data: styles, status: statusStyles} = await useFetch('/api/styles', { lazy: true })
-  const { data: compilations} = await useFetch('/api/compilations')
-  console.log(compilations.value)
-  console.log(styles.value)
-  console.log(statusStyles.value)
-  </script>
+// load data
+const { data: artists } = await useFetch('/api/artists')
+const { data: styles, status: statusStyles } = await useFetch('/api/styles', { lazy: true })
+const { data: compilations } = await useFetch('/api/compilations')
+console.log(compilations.value)
+console.log(styles.value)
+console.log(statusStyles.value)
+</script>
 
-  <style lang="scss">
-  body {
+<style lang="scss">
+body {
   margin: 0;
-  }
+}
 
-  .logo, .button, .shadow, .animation, .mix {
+.logo,
+.button,
+.shadow,
+.animation,
+.mix {
   transition: .7s opacity;
-  }
+}
 
-  .screen {
+.screen {
   position: absolute;
   height: 100vh;
   min-width: 100%;
   max-width: 100%;
-  }
+}
 
-  .splash-screen {
+.splash-screen {
   position: relative;
   height: 100vh;
   background-color: black;
-  }
+}
 
-  .animation {
+.animation {
   z-index: 1;
   object-fit: cover;
   opacity: .8;
   /* opacity: 0; */
-  }
+}
 
-  .mix {
+.mix {
   z-index: 4;
-  }
+}
 
-  .shadow {
+.shadow {
   z-index: 3;
   box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
   opacity: .9;
-  }
+}
 
-  .ui {
+.ui {
   z-index: 4;
   position: absolute;
   top: 50%;
@@ -132,13 +148,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  }
+}
 
-  .logo {
+.logo {
   filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
-  }
+}
 
-  .button {
+.button {
   position: relative;
   top: 70px;
   padding-left: 16px;
@@ -155,27 +171,30 @@
   color: #fdec50ff;
   font-size: 26px;
   background-color: #ffffff59;
+
   &:hover {
     background-color: #fdec50ff;
     color: black;
   }
+
   &:active {
     top: 64px;
     box-shadow: 0 0 0 0 black;
   }
+
   &--close {
     right: 24px;
     padding-top: 10px;
     position: absolute;
   }
-  }
+}
 
-  .hide {
+.hide {
   opacity: 0;
   z-index: 0;
-  }
-  .show {
-    opacity: 1;
-  }
-  </style>
+}
 
+.show {
+  opacity: 1;
+}
+</style>