Grids; Parallax

src/scss/components/_grid.scss

@@ -25,8 +25,8 @@
 			color: $secondary_grey;
 		}
 
-		&:nth-child(5)::after {
-			@include clear;
+		&:nth-child(5) {
+			@include clearfix;
 		}
 
 		&:hover{

src/scss/components/_images.scss

@@ -10,7 +10,7 @@
 		padding-bottom: 100%;
 		position: relative;
 		background-repeat: no-repeat;
-		background-color: #DDDDDD;
+		background-color: $light_grey;
 		background-position: 50% 50%;
 		background-size: cover;
 	}
@@ -21,9 +21,13 @@
 }
 
 .parallax {
-	height: 300px;
+	height: 50vh;
+	width: 100%;
 	overflow: hidden;
-	.thumbnail {
-		max-width: none;
+	background: $light_grey;
+
+	canvas {
+		width: 100%;
+		height: 100%;
 	}
 }

src/scss/components/_lists.scss

@@ -14,6 +14,7 @@
 	border-top: 1px solid #EEEEEE;
 	border-bottom: 1px solid #EEEEEE;
 	margin-bottom: -1px;
+	@include clearfix;
 
 	.col {
 		width: 10%;
@@ -21,10 +22,6 @@
 		float: left;
 	}
 
-	&::after {
-		@include clear;
-	}
-
 	&.selected {
 		background: #FFF39C !important;
 	}
@@ -79,3 +76,30 @@
 	}
 }
 
+.artist-list {
+	.artist {
+		display: block;
+		border: 0;
+		margin-bottom: 15px;
+		@include clearfix;
+
+		.thumbnail {
+			width: 50px;
+			margin-right: 20px;
+			float: left;
+			border: 3px solid transparent;
+		}
+
+		.name {
+			display: inline-block;
+			padding-top: 15px;
+		}
+
+		&:hover {
+			.thumbnail {
+				border-color: $turquoise;
+				opacity: 0.8;
+			}
+		}
+	}
+}

src/scss/components/_sidebar.scss

@@ -87,7 +87,7 @@ aside{
 				@include one_line_text;
 			}
 
-			.artist-list {
+			.artist-sentence {
 				opacity: 0.5;
 				display: block;
 				@include one_line_text;

src/scss/global/_core.scss

@@ -41,4 +41,23 @@ main {
 			border-bottom: 1px solid #000000;			
 		}
 	}
+}
+
+.col {
+	min-height: 1px;
+	float: left;
+
+	&.c2w1 {	width: 50%; }
+	&.c3w1 {	width: 33.3334%; }
+	&.c3w2 {	width: 66.6667%; }
+	&.c4w1 {	width: 25%; }
+	&.c4w3 {	width: 75%; }
+	&.c5w1 {	width: 20%; }
+	&.c5w2 {	width: 40%; }
+	&.c5w3 {	width: 60%; }
+	&.c5w4 {	width: 80%; }
+}
+
+.cf{
+	@include clearfix;
 }

src/scss/global/_variables.scss

@@ -1,5 +1,6 @@
 
 $turquoise: #08d58f;
+$light_grey: #DDDDDD;
 $secondary_grey: #888888;
 
 @mixin one_line_text {
@@ -8,8 +9,10 @@ $secondary_grey: #888888;
 	text-overflow: ellipsis;
 }
 
-@mixin clear {
-	content: '';
-	clear: both;
-	display: block;
+@mixin clearfix {
+	&::after {
+		content: '';
+		clear: both;
+		display: block;
+	}
 }

src/scss/views/_artist.scss

@@ -1,10 +1 @@
 
-.tracks {
-	width: 65%;
-	float: left;
-}
-
-.related-artist-list {
-	width: 30%;
-	float: right;
-}