Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

support for custom layout file

you can change max-width in you custom _layout.scss file by changing $max-width variable
it automatically changes media queries (variable $media-max-width-full)
  • Loading branch information...
commit db0a521231631e8ca6ca7505d26e87c6c5d39f44 1 parent b6c5101
Robert Wijas authored
11  sass/base/_layout.scss
... ...
@@ -1,4 +1,7 @@
1  
-$max-width: 1000px;
  1
+$max-width: 1000px !default;
  2
+
  3
+$content-margin-full: 20px;
  4
+$media-max-width-full: ($max-width + ($content-margin-full * 2));
2 5
 
3 6
 *{
4 7
 	margin: 0;
@@ -10,8 +13,8 @@ body{
10 13
 	font-size: 14px;
11 14
 	background: $color-background;
12 15
 	color: $color-gray01;
13  
-	@media screen and (max-width: 1040px){
14  
-		margin: 0 20px;
  16
+	@media screen and (max-width: $media-max-width-full){
  17
+		margin: 0 $content-margin-full;
15 18
 	}
16 19
 	@media screen and (max-width: 600px){
17 20
 		font-size: 13px;
@@ -43,7 +46,7 @@ a{
43 46
 .inner{
44 47
 	width: $max-width;
45 48
 	margin: 0 auto;
46  
-	@media screen and (max-width: 1040px){
  49
+	@media screen and (max-width: $media-max-width-full){
47 50
 		width: 100%;
48 51
 	}
49 52
 }
1  sass/custom/_layout.scss
... ...
@@ -0,0 +1 @@
  1
+// $max-width: 1000px;
18  sass/parts/_header.scss
@@ -5,7 +5,7 @@ $header-height: 30px;
5 5
 	padding: 30px 0;
6 6
 	border-bottom: 1px solid $color-gray04;
7 7
 	line-height: $header-height;
8  
-	@media screen and (max-width: 1040px){
  8
+	@media screen and (max-width: $media-max-width-full){
9 9
 		height: auto;
10 10
 		position: relative;
11 11
 		padding-bottom: 10px;
@@ -21,7 +21,7 @@ $header-height: 30px;
21 21
 		float: left;
22 22
 		font-weight: 300;
23 23
 		font-size: 30px;
24  
-		@media screen and (max-width: 1040px){
  24
+		@media screen and (max-width: $media-max-width-full){
25 25
 			float: none;
26 26
 		}
27 27
 	}
@@ -29,7 +29,7 @@ $header-height: 30px;
29 29
 #main-nav{
30 30
 	float: left;
31 31
 	margin-left: 30px;
32  
-	@media screen and (max-width: 1040px){
  32
+	@media screen and (max-width: $media-max-width-full){
33 33
 		float: none;
34 34
 		margin-left: 0;
35 35
 		margin-top: 15px;
@@ -41,7 +41,7 @@ $header-height: 30px;
41 41
 		>li{
42 42
 			margin-left: 50px;
43 43
 			@include inline-block;
44  
-			@media screen and (max-width: 1040px){
  44
+			@media screen and (max-width: $media-max-width-full){
45 45
 				margin-left: 0;
46 46
 				margin-right: 50px;
47 47
 				&:last-of-type{
@@ -67,7 +67,7 @@ $header-height: 30px;
67 67
 						content: "";
68 68
 					}
69 69
 				}
70  
-				@media screen and (max-width: 1040px){
  70
+				@media screen and (max-width: $media-max-width-full){
71 71
 					padding: 18px 0;
72 72
 				}
73 73
 			}
@@ -82,7 +82,7 @@ $header-height: 30px;
82 82
 			border: 1px solid $color-gray03;
83 83
 			list-style: none;
84 84
 			display: none;
85  
-			@media screen and (max-width: 1040px){
  85
+			@media screen and (max-width: $media-max-width-full){
86 86
 				top: 40px;
87 87
 			}
88 88
 			@include box-shadow(0 4px 8px rgba(0,0,0,0.1));
@@ -257,7 +257,7 @@ $header-height: 30px;
257 257
 	}
258 258
 }
259 259
 #sub-nav{
260  
-	@media screen and (max-width: 1040px){
  260
+	@media screen and (max-width: $media-max-width-full){
261 261
 		position: absolute;
262 262
 		top: 30px;
263 263
 		right: 0;
@@ -269,7 +269,7 @@ $header-height: 30px;
269 269
 		float: left;
270 270
 		margin-top: 1px;
271 271
 		position: relative;
272  
-		@media screen and (max-width: 1040px){
  272
+		@media screen and (max-width: $media-max-width-full){
273 273
 			float: none;
274 274
 			margin-top: 15px;
275 275
 		}
@@ -302,7 +302,7 @@ $header-height: 30px;
302 302
 	.social{
303 303
 		float: left;
304 304
 		margin-right: 15px;
305  
-		@media screen and (max-width: 1040px){
  305
+		@media screen and (max-width: $media-max-width-full){
306 306
 			float: none;
307 307
 			margin-right: 0;
308 308
 			a:last-of-type{
1  sass/screen.scss
... ...
@@ -1,6 +1,7 @@
1 1
 @import "compass";
2 2
 
3 3
 @import "custom/color";
  4
+@import "custom/layout";
4 5
 
5 6
 @import "base";
6 7
 @import "parts";

0 notes on commit db0a521

Please sign in to comment.
Something went wrong with that request. Please try again.