valere/evilspins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: playlsits

Browse Source
This commit is contained in:
valere
2024-12-30 12:30:39 +01:00
parent 480e8f008c
commit 8541050011
10 changed files with 1593 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/compilations/[id].vue
View File

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

33
pages/index.vue
View File

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