Responsive grid more verbose, box-sizing for more predictable containers

src/js/views/Artist.js

@@ -88,6 +88,15 @@ class Artist extends React.Component{
 					</section>
 				</div>
 			)
+		}else if( this.state.sub_view == 'biography' ){
+			return (
+				<div>
+					<h4 className="left-padding">Biography</h4>
+					<section className="text-wrapper no-top-padding">
+						<p>Biography here</p>
+					</section>
+				</div>
+			)
 		}
 
 		// default body

src/scss/components/_grid.scss

@@ -1,16 +1,22 @@
 
-@mixin grid_item( $cols ){
+@mixin grid_item( $cols, $gap: 2% ){
-	width: ( 0% + (( 100 / $cols ) - 4 ));
+	width: ( 0% + ( 100 / $cols ) - ( $gap * 2 ) + ( ( $gap * 2 ) / $cols ) );
-	&:nth-child(#{$cols}) {
+	box-sizing: border-box;
+	margin: 0 $gap 3%;
+
+	&:nth-child(#{$cols}n-#{$cols}) {
+		margin-right: 0;
 		@include clearfix;
 	}
+
+	&:nth-child(#{$cols}n-#{$cols - 1}) {
+		margin-left: 0;
+	}
 }
 
 .grid {
 
 	.grid-item {
-		@include grid_item( 5 )
-		margin: 0 2% 3%;
 		display: inline-block;
 		vertical-align: top;
 		border-bottom: 0;
@@ -76,7 +82,7 @@
 		}
 	}
 
-	@include responsive( 1200px ){
+	@include responsive( 1200px, null, 2399px ){
 		&.mini {
 			.grid-item {
 				@include grid_item( 2 )
@@ -89,7 +95,7 @@
 		}
 	}
 
-	@include responsive( 850px ){
+	@include responsive( 850px, null, 1199px ){
 		&.mini {
 			.grid-item {
 				@include grid_item( 2 )
@@ -102,7 +108,7 @@
 		}
 	}
 
-	@include responsive( 650px ){
+	@include responsive( null, null, 849px ){
 		&:not(.mini){
 			.grid-item {
 				@include grid_item( 3 )

src/scss/components/_player.scss

@@ -67,7 +67,7 @@
 			}
 		}
 
-		@include responsive( $bp_medium, $bp_shallow ){
+		@include responsive( null, $bp_shallow, $bp_medium ){
 			position: fixed;
 			background: $dark_grey;
 

src/scss/components/_sidebar.scss

@@ -21,7 +21,7 @@ aside{
 		z-index: 2;
 	}
 
-	@include responsive( $bp_medium ){
+	@include responsive( null, null, $bp_medium ){
 		width: 50%;
 		left: -50%;
 

src/scss/global/_core.scss

@@ -21,7 +21,7 @@ footer {
 		padding-bottom: 60px;
 	}
 
-	@include responsive( $bp_medium ){
+	@include responsive( null, null, $bp_medium ){
 		margin-left: 0;
 
 		.sidebar-open & {
@@ -46,7 +46,7 @@ main {
 	}
 
 	section.grid-wrapper {
-		padding: 40px 20px;
+		padding: 40px;
 	}
 
 	section.list-wrapper {

src/scss/global/_variables.scss

@@ -12,7 +12,7 @@ $blue: #32b5f2;
 $bp_wide: 1000px;
 $bp_medium: 800px;
 $bp_narrow: 350px;
-$bp_shallow: 700px;
+$bp_shallow: 650px;
 
 @mixin one_line_text {
 	white-space: nowrap;
@@ -51,17 +51,25 @@ $bp_shallow: 700px;
 	filter: blur( $size );
 }
 
-@mixin responsive( $width: null, $height: null ){
+@mixin responsive( $min_width: null, $max_height: null, $max_width: null ){
-	@if $width && $height {
+	@if $max_width and $max_height {
-		@media( max-width: $width ), ( max-height: $height ){ 
+		@media( max-width: $max_width ), ( max-height: $max_height ){ 
 			@content;
 		}
-	}@else if $width {
+	}@else if $max_width and $min_width {
-		@media( max-width: $width ){ 
+		@media( max-width: $max_width ) and ( min-width: $min_width ){ 
 			@content;
 		}
-	}@else if $height {
+	}@else if $max_width {
-		@media( max-height: $height ){ 
+		@media( max-width: $max_width ){ 
+			@content;
+		}
+	}@else if $max_height {
+		@media( max-height: $max_height ){ 
+			@content;
+		}
+	}@else if $min_width {
+		@media( min-width: $min_width ){ 
 			@content;
 		}
 	}