/*media queries*/
//style @include laptop {
.content-wrapper { max-width: 800px; } .header { .wrapper { overflow: auto; max-width: 800px; padding: $base-spacing; } h1 { font-size: $big-font-size * 1.5; } } nav.many { max-width: 100%; } .blog { .localnav { width: 20%; } } .post-wrapper { .localnav { width: 20%; } } }
@include small-laptop {
.globalnav { max-width: $small-laptop-width; text-align: center; ul { display: block; float: none; a { margin-left: 0; margin-right: $base-spacing; } } } header { .wrapper { max-width: $small-laptop-width; text-align: center; } h1, aside { display: block; float: none; } } .projects-content { section.three { width: $content-width; max-width: 75%; float: none; margin: $center; margin-top: $base-spacing * 2; clear: both; ul { border-right-style: none; a { text-align: left; } } } section.three:last-of-type { border-bottom-style: none; } } nav.three, nav.many { width: $content-width; max-width: 75%; float: none; margin: $center; display: block; } .blog { .localnav { li, a, h3 { text-align: left; padding-right: $base-spacing; } } #posts { width: 75%; } } .post-wrapper { .localnav { li, a, h3 { text-align: left; padding-right: $base-spacing; } } .post { width: 75%; } }
}
@include tablet {
.globalnav { ul { li { a { font-size: 1.5em; } } } } .projects-content { section.many, section.three, section.two { max-width: 100%; } section.two { width: $content-width; max-width: 75%; float: none; margin: $center; margin-top: $base-spacing * 2; clear: both; ul { border-right-style: none; a { text-align: left; } } } section.three:last-of-type { border-bottom-style: none; } } .blog { .localnav { display: none; width: 0; } #posts { width: 100%; } } .post-wrapper { .localnav { display: none; width: 0; } .post { width: 100%; padding: 2em; h2 { font-size: $base-font-size * 1.6; } div { h3, h4, h5 { margin-left: 0; font-size: $base-font-size; } p { padding-left: 0; } } } } nav.two { width: $content-width; max-width: 75%; float: none; margin: $center; display: block; } nav.many { ul { li { display: block; float: none; margin: $base-spacing * 0.5; padding: 0; } } } }
@include phone {
.globalnav { ul { li { a { font-size: 1em; } } } } header { font-size: 1em; aside { img { height: 1.5em; width: auto; } } } nav.many, nav.three, nav.two { ul { li { display: block; float: none; margin: $base-spacing * 0.5; padding: 0; } } }
}