Adding ability to blur parallax; Overlay header; Discover Featured intro playlist

src/scss/components/_header.scss

@@ -4,6 +4,7 @@ main {
 		padding: 14px 20px;
 		background: #EEEEEE;
 		line-height: 24px;
+		box-sizing: border-box;
 
 		h1 {
 			font-size: 22px;
@@ -17,12 +18,6 @@ main {
 			height: 16px;
 		}
 
-		@include responsive( $bp_medium ){
-			.icon {
-				visibility: hidden;
-			}
-		}
-
 		.options {
 			position: absolute;
 			top: 0;
@@ -53,7 +48,27 @@ main {
 			}
 		}
 
+		&.overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			background: rgba(0,0,0,0.1);
+			color: $white;
+			z-index: 95;
+
+			.icon {
+				-webkit-filter: invert(1);
+				-moz-filter: invert(1);
+				filter: invert(1);
+			}
+		}
+
 		@include responsive( $bp_medium ){
+			.icon {
+				visibility: hidden;
+			}
+
 			.options {
 				right: 0;
 

src/scss/components/_images.scss

@@ -62,16 +62,26 @@
 	width: 100%;
 	overflow: hidden;
 	background: #111111;
+	position: relative;
 
 	canvas {
-		width: 100%;
-		height: 100%;
+		width: 110%;
+		height: 110%;
 		opacity: 0;
+		position: absolute;
+		top: -5%;
+		left: -5%;
 
 		&.loaded {
 			opacity: 0.4;
 		}
 	}
+
+	&.blur {
+		canvas {
+			filter: blur(15px);
+		}
+	}
 }
 
 .tiles {

src/scss/views/_discover.scss

@@ -3,7 +3,7 @@
 	
 	.intro {
 		position: relative;
-		padding: 60px 40px;
+		padding: 100px 40px 60px 40px;
 		z-index: 1;
 
 		.parallax {
@@ -108,6 +108,7 @@
 .discover-featured-view {
 	.intro {
 		position: relative;
+		padding-top: 50px;
 
 		.parallax {
 			position: absolute;
@@ -127,7 +128,24 @@
 			.thumbnail {
 				float: left;
 				max-width: 200px;
-				margin-right: 40px;
+			}
+
+			h1,
+			h3,
+			.actions {
+				padding-left: 240px;
+			}
+
+			h1 {
+				padding-top: 20px;
+			}
+
+			h3 {
+				opacity: 0.5;
+			}
+
+			.actions {
+				padding-top: 40px;
 			}
 		}
 	}