Basic responsive

src/scss/components/_player.scss

@@ -47,9 +47,61 @@
 	.slider.horizontal {
 		margin-bottom: 0;
 
-		&.animating {
-			.progress{
-				/* @include animate(10s); */
+		.progress{
+			@include animate(1s);
+		}
+	}
+
+	aside & {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 2;
+		padding: 14px;
+		color: #FFFFFF;
+
+		.artist-sentence {
+			.artist:hover {
+				border-color: #FFFFFF !important;
+			}
+		}
+
+		@include responsive( $bp_medium, $bp_shallow ){
+			position: fixed;
+			background: $dark_grey;
+
+			.controls {
+				position: absolute;
+				top: 10px;
+				left: 10px;
+
+				a {
+					padding: 13px;
+				}
+
+				.volume-control {
+					display: none;
+				}
+			}
+
+			.slider.progress {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				margin: 0;
+				height: 2px;
+
+				.track {
+					top: 0px;
+					background: transparent;
+				}
+			}
+
+			.current-track {
+				font-size: 12px;
+				padding-bottom: 0;
 			}
 		}
 	}

src/scss/components/_sidebar-toggle-button.scss

@@ -9,6 +9,11 @@
 	color: #FFFFFF;
 	font-size: 18px;
 	cursor: pointer;
+	display: none;
+
+	@include responsive( $bp_medium ){
+		display: block;
+	}
 
 	&.open {
 		.open {

src/scss/components/_sidebar.scss

@@ -1,16 +1,27 @@
 
 aside{
-	
 	position: fixed;
 	top: 0;
 	left: 0;
 	bottom: 0;
+	z-index: 95;
 	background: #111111;
 	width: 200px;
 	overflow: hidden;
 	box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
 
-	@include responsive( 800px ){
+	.liner {
+		overflow-y: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		box-sizing: border-box;
+		z-index: 2;
+	}
+
+	@include responsive( $bp_medium ){
 		width: 50%;
 		left: -50%;
 
@@ -18,6 +29,12 @@ aside{
 			left: 0px;
 		}
 	}
+
+	@include responsive( null, $bp_shallow ){
+		.liner {
+			bottom: 60px;
+		}
+	}
 	
 	.thumbnail {
 		position: absolute;
@@ -87,20 +104,4 @@ aside{
 		}
 
 	}
-
-	.player {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		z-index: 2;
-		padding: 14px;
-		color: #FFFFFF;
-
-		.artist-sentence {
-			.artist:hover {
-				border-color: #FFFFFF !important;
-			}
-		}
-	}
 }