Creating sticky playback controls in foot

src/scss/components/_header.scss

@@ -1,8 +1,7 @@
 
 main {
 	header {
-		padding: 14px 20px;
-		line-height: 24px;
+		padding: 30px 40px;
 		box-sizing: border-box;
 
 		h1 {
@@ -14,7 +13,7 @@ main {
 			padding-right: 14px;
 			height: 2.5rem;
 			vertical-align: bottom;
-			margin-bottom: -5px;
+			margin-bottom: 5px;
 		}
 
 		.options {

src/scss/components/_playback-controls.scss

@@ -0,0 +1,118 @@
+
+.playback-controls {
+	position: fixed;
+	z-index: 99;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	height: 50px;
+	background: $white;
+	color: $black;
+	border-top: 1px solid $light_grey;
+
+	.current-track {
+		position: absolute;
+		bottom: 51px;
+		background: $white;
+		height: 100px;
+		width: 220px;
+		border-top: 1px solid $light_grey;
+	}
+
+	.control {
+		@include animate();
+		font-size: 16px;
+		color: $dark_grey;
+		cursor: pointer;
+		padding: 8px;
+		display: inline-block;
+		vertical-align: top;
+
+		&.play {
+			font-size: 24px;
+			margin-top: -4px;
+		}
+
+		&.active {
+			color: $turquoise;
+		}
+
+		&:hover {
+			color: $blue;
+		}
+	}
+
+	section {
+		position: absolute;
+		top: 10px;
+
+		&.playback {
+			left: 20px;
+			top: 11px;
+			width: 120px;
+			text-align: center;
+		}
+
+		&.progress {
+			top: 12px;
+			left: 140px;
+			right: 280px;
+			padding-left: 20px;
+			padding-right: 20px;
+			color: $mid_grey;
+
+			.slider {
+				position: absolute;
+				top: 0;
+				left: 50px;
+				right: 50px;
+			}
+
+			.current {
+				position: absolute;
+				top: 5px;
+				left: 0;
+				width: 45px;
+				text-align: right;
+			}
+
+			.total {
+				position: absolute;
+				top: 5px;
+				right: 0;
+				width: 45px;
+			}
+		}
+
+		&.settings {
+			top: 11px;
+			right: 170px;
+			width: 120px;
+			text-align: center;
+		}
+
+		&.volume {
+			top: 12px;
+			right: 20px;
+			width: 150px;
+
+			.modal-trigger {
+				display: none;
+			}
+
+			.control {
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+
+			.slider-wrapper {
+				position: absolute;
+				top: 0;
+				right: 0;
+				left: 30px;
+			}
+		}
+	}
+}
+

src/scss/components/_player.scss

@@ -111,16 +111,18 @@
 	&.mini-player {
 		position: fixed;
 		bottom: 0;
+		right: 0;
 		left: 0;
-		width: 220px;
+		height: 50px;
+		background: $white;
+		border-top: 1px solid $light_grey;
 		box-sizing: border-box;
 		z-index: 97;
-		padding: 14px;
-		color: #FFFFFF;
+		color: $black;
 
 		.artist-sentence {
 			.artist:hover {
-				border-color: #FFFFFF !important;
+				border-color: $black !important;
 			}
 		}
 
@@ -194,3 +196,9 @@
 		}
 	}
 }
+
+
+.playback-controls {
+
+}
+

src/scss/components/_sidebar.scss

@@ -7,7 +7,7 @@ aside{
 	z-index: 96;
 	width: 220px;
 	overflow: hidden;
-	border-right: 2px solid $light_grey;
+	border-right: 1px solid $light_grey;
 
 	.liner {
 		overflow-y: auto;
@@ -57,6 +57,8 @@ aside{
 			display: block;
 			padding: 6px 18px 6px 6px;
 			border-left: 4px solid transparent;
+			font-family: "Raleway";
+			font-weight: 700;
 
 			.icon {
 				height: 14px;

src/scss/components/_slider.scss

@@ -5,7 +5,7 @@
 
 	.track {
 		position: absolute;
-		background: rgba(255,255,255,0.3);
+		background: $light_grey;
 
 		.progress {
 			position: absolute;
@@ -22,12 +22,11 @@
 	}
 
 	&.horizontal {
-		margin: 10px 0;
 		height: 20px;
 
 		.track {
-			height: 2px;
-			top: 9px;
+			height: 5px;
+			top: 12px;
 			right: 0;
 			left: 0;
 
@@ -43,10 +42,10 @@
 		height: 100%;
 
 		.track {
-			width: 2px;
+			width: 5px;
 			top: 0;
 			bottom: 0;
-			left: 9px;
+			left: 12px;
 
 			.progress {
 				bottom: 0;