a { color: $link_color; &:hover, &:focus { color: saturate(darken($link_color, 15), 20); } &:visited { color: darken(adjust_hue($link_color, 70), 10); } } $min-width: 320px; $max-width: 1440px; $default-border-radius: 4px; .group { @include pie-clearfix; } .core-layout { > div { @extend .inner-wrap; } } body { > header, > nav, > footer { @extend .core-layout; min-width: $min-width; } } @mixin media-layout($page-pad, $sidebar-width, $sidebar-pad) { $side-nav: $sidebar-width - $page-pad - $sidebar-pad; .inner-wrap { padding: 0 $page-pad; position: relative; margin: 0 auto; max-width: $max-width; @extend .group; } body > nav + div { @extend .group; padding: 0; max-width: $max-width + $page-pad*2; margin: 0 auto; > div { @extend .group; margin-right: $sidebar-width; } } body > nav > div > div { width: $side-nav; .search { width: $side-nav - 70px; } } #articles { float: left; width: 100%; padding-top: 25px; padding-bottom: 25px; > * { padding-right: $page-pad; padding-left: $page-pad; } > article { margin-bottom: 1.5em; padding-bottom: 1.5em; padding-right: $page-pad; padding-left: $page-pad; } + aside { display: block; float: left; width: $sidebar-width - $sidebar-pad*2; margin: 0 -100% 0 0; padding: $sidebar-pad; } } } @media only screen and (min-width: 320px) { @import "../media/480"; } @media only screen and (min-width: 768px) { @include media-layout(15px, 240px, 15px); @import "../media/768"; } @media only screen and (min-width: 992px) { @include media-layout(40px, 320px, 30px); @import "../media/992"; } //*{ //transition: width .5s; //-moz-transition: width .5s; //-webkit-transition: margin .5s; //}