Search

src/scss/app.scss

@@ -11,6 +11,7 @@
 @import 'components/context-menu';
 @import 'components/images';
 @import 'components/icon';
+@import 'components/search-form';
 @import 'components/sidebar';
 @import 'components/lists';
 @import 'components/grid';

src/scss/components/_grid.scss

@@ -1,10 +1,17 @@
 
+@mixin grid_item( $cols ){
+	width: ( 0% + (( 100 / $cols ) - 4 ));
+	&:nth-child(#{$cols}) {
+		@include clearfix;
+	}
+}
+
 .grid {
 
 	padding: 40px 20px;
 
 	.grid-item {
-		width: 16%;
+		@include grid_item( 5 )
 		margin: 0 2% 3%;
 		display: inline-block;
 		vertical-align: top;
@@ -26,10 +33,6 @@
 			color: $secondary_grey;
 		}
 
-		&:nth-child(5) {
-			@include clearfix;
-		}
-
 		&:hover{
 			cursor: pointer;
 
@@ -37,14 +40,6 @@
 				opacity: 0.75;
 			}
 		}
-
-		@include responsive( 850px ){
-			width: 21%;
-		}
-
-		@include responsive( 650px ){
-			width: 29.3334%;
-		}
 	}
 
 	&.category-grid {
@@ -63,4 +58,51 @@
 			}
 		}
 	}
+
+	@include responsive( 2400px ){
+		&.mini {
+			.grid-item {
+				@include grid_item( 3 )
+			}			
+		}
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 6 )
+			}	
+		}
+	}
+
+	@include responsive( 1200px ){
+		&.mini {
+			.grid-item {
+				@include grid_item( 2 )
+			}			
+		}
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 5 )
+			}	
+		}
+	}
+
+	@include responsive( 850px ){
+		&.mini {
+			.grid-item {
+				@include grid_item( 2 )
+			}			
+		}
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 4 )
+			}	
+		}
+	}
+
+	@include responsive( 650px ){
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 3 )
+			}	
+		}
+	}
 }

src/scss/components/_search-form.scss

@@ -0,0 +1,22 @@
+
+.search-form {
+
+	input {
+		background: transparent;
+		border-bottom: 1px solid #FFFFFF;
+		padding: 16px 0 8px;
+		width: 100%;
+		color: #FFFFFF;
+
+		&:focus,
+		&:active {
+			border-color: $turquoise;
+		}
+	}
+
+	&.sidebar {
+		padding: 10px 15px 0 15px;
+	}
+
+}
+

src/scss/components/_sidebar.scss

@@ -30,6 +30,7 @@ aside{
 	}
 
 	nav {
+		padding-top: 20px;
 
 		a {
 			font-size: 16px;