Removing SidebarToggleButton, moving trigger to thumb-friendly buttom-right

src/scss/components/_header.scss

@@ -57,15 +57,18 @@ main {
 			top: 0;
 			left: 0;
 			width: 100%;
-			z-index: 99;
+			z-index: 98;
 		}
 
 		@include responsive($bp_medium){
 			padding: 10px 10px 10px 0;
-			margin-bottom: -20px;
+			margin-bottom: -10px;
 
 			.icon {
-				visibility: hidden;
+				height: 1.2rem;
+				margin-bottom: 5px;
+				padding-right: 10px;
+				margin-left: 10px;
 			}
 
 			h1 {

src/scss/components/_playback-controls.scss

@@ -86,7 +86,7 @@
 		font-size: 12px;
 		color: $white;
 		cursor: pointer;
-		padding: 8px 6px;
+		padding: 10px 8px;
 		display: inline-block;
 		vertical-align: bottom;
 		opacity: 0.8;
@@ -117,11 +117,11 @@
 
 	section {
 		position: absolute;
-		bottom: 11px;
+		bottom: 8px;
 
 		&.playback {
-			left: 20px;
-			width: 120px;
+			left: 10px;
+			width: 125px;
 			text-align: center;
 		}
 
@@ -257,6 +257,22 @@
 			&.triggers {
 				display: block;
 				right: 10px;
+
+				.sidebar-toggle.open {
+					opacity: 1 !important;
+
+					&:after {
+						background: rgba(0,0,0,0.8);
+						content: '';
+						display: block;
+						position: fixed;
+						top: 0;
+						left: 0;
+						bottom: 0;
+						right: 0;
+						z-index: 99;
+					}
+				}
 			}
 		}
 

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

@@ -1,43 +0,0 @@
-
-
-.sidebar-toggle {
-	@include animate(0.15s);
-	position: absolute;
-	top: 0;
-	left: 0;
-	padding: 18px;
-	z-index: 98;
-	color: $white;
-	font-size: 18px;
-	cursor: pointer;
-	display: none;
-
-	@include responsive($bp_medium){
-		display: block;
-	}
-
-	&.open {
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background: $overlay_dark;
-		color: $white;
-		z-index: 99;
-
-		-ms-transform: translate(220px, 0);
-		-webkit-transform: translate(220px, 0);
-		transform: translate(220px, 0);
-
-		.open {
-			display: none;
-		}
-	}
-
-	&:not(.open){
-		.close {
-			display: none;
-		}
-	}
-}

src/scss/components/_sidebar.scss

@@ -99,18 +99,30 @@ aside{
 		}
 	}
 
+	.close {
+		display: none;
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		padding: 10px 8px;
+		display: inline-block;
+		opacity: 0.5;
+		z-index: 99;
+	}
+
 	@include responsive($bp_medium){
 		@include animate(0.15s);
 		width: 220px;
-		left: -220px;
+		left: auto;
+		right: -220px;
 		padding-bottom: 0;
 		position: fixed;
 		z-index: 100;
 
 		.sidebar-open & {
-			-ms-transform: translate(220px, 0);
-			-webkit-transform: translate(220px, 0);
-			transform: translate(220px, 0);
+			-ms-transform: translate(-220px, 0);
+			-webkit-transform: translate(-220px, 0);
+			transform: translate(-220px, 0);
 		}
 
 		.liner {
@@ -120,5 +132,9 @@ aside{
 		.thumbnail {
 			display: none;
 		}
+
+		.close {
+			display: block;
+		}
 	}
 }