Discover sections

src/scss/components/_grid.scss

@@ -34,4 +34,21 @@
 			opacity: 0.75;
 		}
 	}
+
+	&.category-grid {
+		.grid-item {
+			position: relative;
+
+			.name {
+				position: absolute;
+				bottom: 15%;
+				left: 0;
+				right: 0;
+				text-align: center;
+				font-size: 14px;
+				font-weight: 600;
+				color: #FFFFFF;
+			}
+		}
+	}
 }

src/scss/components/_images.scss

@@ -28,10 +28,16 @@
 	height: 50vh;
 	width: 100%;
 	overflow: hidden;
-	background: $light_grey;
+	background: $dark_grey;
 
 	canvas {
 		width: 100%;
 		height: 100%;
+		opacity: 0;
+		@include animate( 0.4s );
+
+		&.loaded {
+			opacity: 0.5;
+		}
 	}
 }

src/scss/global/_variables.scss

@@ -1,6 +1,7 @@
 
 $turquoise: #08d58f;
 $light_grey: #DDDDDD;
+$dark_grey: #333333;
 $secondary_grey: #888888;
 
 @mixin one_line_text {
@@ -15,4 +16,11 @@ $secondary_grey: #888888;
 		clear: both;
 		display: block;
 	}
+}
+
+@mixin animate( $speed: 0.2s ){
+	-webkit-transition: all $speed ease-in-out;
+	   -moz-transition: all $speed ease-in-out;
+		 -o-transition: all $speed ease-in-out;
+		    transition: all $speed ease-in-out; 
 }

src/scss/views/_artist.scss

@@ -1 +1,14 @@
 
+.artist-view {
+	.intro {
+		position: relative;
+		margin-bottom: 20px;
+		@include clearfix;
+
+		.thumbnail {
+			max-width: 200px;
+			margin: -100px 20px 0 40px;
+			float: left;
+		}
+	}
+}