$page-pad: 40px; $min-width: 320px; $max-width: 1440px; $sidebar-width: 320px; $sidebar-pad: 30px; $default-border-radius: 4px; //html { background-color: $body_bg; } //body { color: $body_color; } //a { //color: $link_color; //&:hover, &:focus { //color: saturate(darken($link_color, 15), 20); } //&:visited { //color: darken(adjust_hue($link_color, 70), 10); } } .group { @include pie-clearfix; } .inner-wrap { position: relative; margin: 0 auto; padding: 0 $page_pad; max-width: $max-width; @extend .group; } .core-layout { > div { @extend .inner-wrap; } } body { > header, > nav, > footer { @extend .core-layout; min-width: $min-width; } } #page { @extend .group; padding: 0; max-width: $max-width + $page-pad*2; margin: 0 auto; > div { @extend .group; //min-width: 480px; margin-right: $sidebar-width; > aside { float: left; width: $sidebar-width - $sidebar-pad*2; margin: 0 -100% 0 0; padding: $sidebar-pad; } } } #main { float: left; width: 100%; padding-top: 25px; padding-bottom: 25px; > * { padding-right: $page-pad; padding-left: $page-pad; } } @media (min-device-width:1024px) and (max-width:800px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) { #page > div { margin-right: 0; #main { float: none; } > aside { margin: 0; float: none; } } page > div > aside { float: none; } body { > header, > nav, > footer { > div { padding: 0 15px; }}} #main > * { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { body { > header, > nav, > footer { > div { padding: 0 10px; }}} #main > * { padding-left: 10px; padding-right: 10px; } #page > div { margin: none; > aside { float: none; }} } //*{ //transition: width .5s; //-moz-transition: width .5s; //-webkit-transition: margin .5s; //} //#search { left: $page-width + $sidebar-margin - $sidebar-width; }