Permalink
Browse files

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...
1 parent b6c5101 commit db0a521231631e8ca6ca7505d26e87c6c5d39f44 @robertwijas committed Dec 29, 2012
Showing with 18 additions and 13 deletions.
  1. +7 −4 sass/base/_layout.scss
  2. +1 −0 sass/custom/_layout.scss
  3. +9 −9 sass/parts/_header.scss
  4. +1 −0 sass/screen.scss
View
@@ -1,4 +1,7 @@
-$max-width: 1000px;
+$max-width: 1000px !default;
+
+$content-margin-full: 20px;
+$media-max-width-full: ($max-width + ($content-margin-full * 2));
*{
margin: 0;
@@ -10,8 +13,8 @@ body{
font-size: 14px;
background: $color-background;
color: $color-gray01;
- @media screen and (max-width: 1040px){
- margin: 0 20px;
+ @media screen and (max-width: $media-max-width-full){
+ margin: 0 $content-margin-full;
}
@media screen and (max-width: 600px){
font-size: 13px;
@@ -43,7 +46,7 @@ a{
.inner{
width: $max-width;
margin: 0 auto;
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
width: 100%;
}
}
View
@@ -0,0 +1 @@
+// $max-width: 1000px;
View
@@ -5,7 +5,7 @@ $header-height: 30px;
padding: 30px 0;
border-bottom: 1px solid $color-gray04;
line-height: $header-height;
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
height: auto;
position: relative;
padding-bottom: 10px;
@@ -21,15 +21,15 @@ $header-height: 30px;
float: left;
font-weight: 300;
font-size: 30px;
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
float: none;
}
}
}
#main-nav{
float: left;
margin-left: 30px;
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
float: none;
margin-left: 0;
margin-top: 15px;
@@ -41,7 +41,7 @@ $header-height: 30px;
>li{
margin-left: 50px;
@include inline-block;
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
margin-left: 0;
margin-right: 50px;
&:last-of-type{
@@ -67,7 +67,7 @@ $header-height: 30px;
content: "";
}
}
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
padding: 18px 0;
}
}
@@ -82,7 +82,7 @@ $header-height: 30px;
border: 1px solid $color-gray03;
list-style: none;
display: none;
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
top: 40px;
}
@include box-shadow(0 4px 8px rgba(0,0,0,0.1));
@@ -257,7 +257,7 @@ $header-height: 30px;
}
}
#sub-nav{
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
position: absolute;
top: 30px;
right: 0;
@@ -269,7 +269,7 @@ $header-height: 30px;
float: left;
margin-top: 1px;
position: relative;
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
float: none;
margin-top: 15px;
}
@@ -302,7 +302,7 @@ $header-height: 30px;
.social{
float: left;
margin-right: 15px;
- @media screen and (max-width: 1040px){
+ @media screen and (max-width: $media-max-width-full){
float: none;
margin-right: 0;
a:last-of-type{
View
@@ -1,6 +1,7 @@
@import "compass";
@import "custom/color";
+@import "custom/layout";
@import "base";
@import "parts";

0 comments on commit db0a521

Please sign in to comment.