From 5f747e57b4740fc111636c85e28db1063813028d Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Thu, 24 Oct 2024 15:17:16 +0200
Subject: [PATCH] FIX styleon player

---
 assets/css/main.css              |  9 +++++++--
 components/compilationObject.vue |  3 +--
 pages/compilations/[id].vue      | 17 ++++-------------
 tailwind.config.js               |  3 +++
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 801ad63..0326246 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -12,14 +12,19 @@ body {
   transition: all .3s;
   border: 8px black solid;
   line-height: 100%;
-  height: 70px;
-  width: 70px;
   border-width: 2px;
   border-radius: 100px;
   cursor: pointer;
   color: black;
   font-size: 26px;
   background-color: #ffffff59;
+  height: 40px;
+  width: 40px;
+
+  @media (min-width: 780px) {
+    height: 70px;
+    width: 70px;
+  }
 }
 
 .button:hover {
diff --git a/components/compilationObject.vue b/components/compilationObject.vue
index bb00189..92d4bb1 100644
--- a/components/compilationObject.vue
+++ b/components/compilationObject.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLink :to="'/compilations/' + props.data.id" class="compilation mx-auto p-4 inline-flex">
-    <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
+    <atropos-component class="my-atropos" active-offset="80" shadow-scale="1.05">
       <img :src="props.data.id + '/bkg.jpg'" data-atropos-offset="-8" />
       <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" />
@@ -11,7 +11,6 @@
 
 <script setup>
 const props = defineProps(['data', 'template'])
-const atropos = ref(null)
 </script>
 
 <style scoped>
diff --git a/pages/compilations/[id].vue b/pages/compilations/[id].vue
index bddc4c6..1a1c269 100644
--- a/pages/compilations/[id].vue
+++ b/pages/compilations/[id].vue
@@ -123,6 +123,10 @@ body {
   filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
 .mixPlayer {
   background: black;
   max-height: 70vh;
@@ -140,17 +144,4 @@ nav>button:first-child {
     content: "\00d7";
   }
 }
-
-.button {
-  text-decoration: none;
-  box-shadow: 0 8px 0 0 black;
-  transition: all .3s;
-  border: 8px black solid;
-  line-height: 100%;
-  border-width: 2px;
-  border-radius: 100px;
-  cursor: pointer;
-  color: black;
-  background-color: #ffffff59;
-}
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3e1fa2d..fb15863 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,6 +13,9 @@ module.exports = {
       colors: {
         esyellow: '#fdec50ff',
       },
+      screens: {
+        '2sm': '320px',
+      },
     },
   },
   plugins: [],