FIX styleon player

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 {

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>

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>

tailwind.config.js

@@ -13,6 +13,9 @@ module.exports = {
       colors: {
         esyellow: '#fdec50ff',
       },
+      screens: {
+        '2sm': '320px',
+      },
     },
   },
   plugins: [],