FIX: bg black on body

assets/css/main.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  @apply bg-black;
+}
+
 .button {
   text-decoration: none;
   box-shadow: 0 8px 0 0 black;

pages/about.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-black text-white p-12 text-lg flex flex-col items-center">
+  <div class="text-white p-12 text-lg flex flex-col items-center">
     <a href="/" class="mb-12">
       <img class="logo" src="/logo.svg">
     </a>

pages/compilations/[id].vue

@@ -1,6 +1,7 @@
 <template @keydown.esc="closePlayer()">
-  <div class="bg-black text-white w-full flex items-center flex-col">
+  <div class="text-white w-full flex items-center flex-col">
-    <button class="text-sm md:text-5xl leading-none button button--close m-3 flex justify-center items-center z-50" @click="closePlayer()">
+    <button class="text-sm md:text-5xl leading-none button button--close m-3 flex justify-center items-center z-50"
+      @click="closePlayer()">
     </button>
 
     <video class="mixPlayer w-full" controls ref="mixPlayer">
@@ -14,11 +15,11 @@
           {{ index + 1 }}
         </span>
         <span class="hidden 2xl:block">
-              {{ track.title }}
+          {{ track.title }}
-            </span>
+        </span>
-            <span class="hidden lg:block">
+        <span class="hidden lg:block">
-              {{ store.getArtistById(track.artist).name }}
+          {{ store.getArtistById(track.artist).name }}
-            </span>
+        </span>
       </button>
     </nav>
 
@@ -42,7 +43,8 @@
 
       <p class="block mt-10">
         see artist page:<br>
-        <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="store.getArtistById(currentTrack.artist).url">
+        <a target="_blank" class="underline text-orange-500 hover:text-orange-400"
+          :href="store.getArtistById(currentTrack.artist).url">
           {{ store.getArtistById(currentTrack.artist).name }}
         </a><br>
         purchase the track:<br>
@@ -65,7 +67,7 @@ const mixPlayer = ref()
 const videoSD = ref()
 const currentTrack = ref()
 
-const currentArtist = computed(()=>{
+const currentArtist = computed(() => {
   currentTrack
 })
 
@@ -91,7 +93,7 @@ const watchPlayingTrack = () => {
 }
 
 const loadCompilation = () => {
-  if(isLoaded.value) {
+  if (isLoaded.value) {
     compilation.value = store.getCompilationById(route.params.id)
     tracks.value = store.getTracksByCompilationId(route.params.id)
     videoSD.value = 'https://files.erudi.fr/evilspins/' + compilation.value.id + '-HD.mp4'
@@ -126,17 +128,19 @@ body {
   max-height: 70vh;
 }
 
-nav > button:first-child {
+nav>button:first-child {
   border-left: none;
 }
 
 .button--close {
   position: fixed;
   right: 2vw;
+
   &:after {
     content: "\00d7";
   }
 }
+
 .button {
   text-decoration: none;
   box-shadow: 0 8px 0 0 black;

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-black">
+  <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">

pages/logo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-black h-screen w-full flex justify-center p-16">
+    <div class="h-screen w-full flex justify-center p-16">
         <img src="/logo.svg">
     </div>
 </template>