animate album cards on hover in playlist view

src/App.vue

@@ -93,11 +93,18 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+#logo-container {
+  position: relative;
+  height: 3.6rem;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
 .logo {
   height: 2rem;
   width: 9rem;
-  margin-left: 2.25rem;
+  margin-left: 4rem;
   background: url(./assets/logo.svg);
   background-size: contain;
   background-repeat: no-repeat;
@@ -116,39 +123,31 @@ export default {
   flex-direction: column;
 }
 
-#logo-container {
-  height: 3.6rem;
-  margin-left: 1rem;
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
 .l-sidebar {
   position: relative;
 }
 
 .l-container #toggle {
-  position: fixed;
-  top: 1rem;
-  width: 1.75rem;
-  height: 3.75rem;
+  position: absolute;
+  left: 0.2rem;
+  width: 4rem;
+  height: 100%;
   background: url(./assets/icons/menu.svg);
-  background-size: contain;
+  background-size: 50%;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
-  margin-left: 0.25rem;
 }
 
 .l-container #settings-button {
   position: absolute;
   bottom: 0;
   display: flex;
-  color: #fff;
   height: 50px;
   width: 100%;
-  border-top: 1px solid var(--seperator);
+  cursor: pointer;
+  border-radius: 0 0 $small $small;
+  border-top: solid .1rem $seperator
 }
 
 #settings-button .in {
@@ -157,13 +156,8 @@ export default {
   justify-content: center;
 }
 
-.l-container #settings-button:hover {
-  background: #17c93d7c;
-  cursor: pointer;
-}
-
 .l-container #settings-button #settings-icon {
-  margin-left: 1rem;
+  margin-left: 1.5rem;
   margin-right: 0.25rem;
   width: 1.5rem;
   height: 1.5rem;

src/assets/css/_variables.scss

@@ -4,7 +4,7 @@ $card-dark: #131313b2;
 $red: #df4646;
 $blue: #00a8ff;
 $green: rgb(67, 148, 67);
-
+$seperator: #ffffff46;
 // sizes
 $small: .5em;
 

src/components/PlaylistView/Header.vue

@@ -3,7 +3,8 @@
     <div class="info rounded">
       <p class="name">Because I Got High Radio</p>
       <p class="text">
-        The best music to fade to while doing my thing. Featuring artists like Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
+        The best music to fade to while doing my thing. Featuring artists like
+        Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
       </p>
       <div class="lower">
         <div class="statistics">
@@ -52,7 +53,7 @@
   overflow: hidden;
   font-size: 2rem;
   font-weight: bold;
-  margin: 0.2em 0 .5em 0;
+  margin: 0.2em 0 0.5em 0;
 }
 
 .p-header .info .text {
@@ -123,7 +124,7 @@
   grid-gap: 0.5rem;
   // border: solid;
   position: absolute;
-  bottom: -.5em;
+  bottom: -0.5em;
   right: -1em;
 }
 
@@ -132,12 +133,14 @@
   width: 5em;
   background-color: $blue;
   border-radius: $small;
+  transition: transform 0.5s;
+  transform: scale(1.1);
 }
 
 .p-header .info .albums .first {
   position: absolute;
   transform: rotate(-30deg);
-  right: .5em;
+  right: 0.5em;
   bottom: 0em;
   background-color: $red;
   background-image: url(../../assets/images/girl2.jpg);
@@ -149,7 +152,7 @@
   right: 4em;
   bottom: -1em !important;
   background-color: $green;
-  background-image: url(../../assets/images/tk.jpg);
+  background-image: url(../../assets/images/girl1.jpg);
   z-index: 1;
 }
 
@@ -162,4 +165,11 @@
   background-image: url(../../assets/images/girl3.jpg);
   z-index: 2;
 }
+
+.p-header .info .albums .item:hover {
+  transition: transform 1s;
+  transform: scale(1.5);
+  cursor: pointer;
+  z-index: 3;
+}
 </style>