@media only screen and (min-width: 48em) {
header[role='banner'], nav { position: fixed; width: 30%; } header[role='banner'] { @include box-shadow( 0, 0, 0.75em, 0.4em, rgba( 17, 17, 17, 0.65 ) ); background: linear-gradient( rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65) ), url(/assets/images/header.jpg) repeat-y left top fixed; height: 100%; top: 0; bottom: 0; .site-title { padding-top: 1em; top: 5em; } .site-description { display: block; top: 24em; } } nav { background: transparent; top: 20em; a { width: 100%; } &:after { background: none; } ul { li { display: block; } ul, ul ul { left: 100%; padding: 0; top: 0; } } } main, aside[role='complementary'], footer[role='contentinfo'] { margin-left: 30%; max-width: $article-width + 4em; } article { margin-left: 0; &.summary, &.page, &.series { &:first-of-type::before, &:last-of-type::after { background: none !important; } } }
}
@media only screen and (min-width: 60em) {
header[role='banner'], nav { width: 25%; } main, aside[role='complementary'], footer[role='contentinfo'] { margin-left: 25%; }
}
@media only screen and (min-width: 72em) {
header[role='banner'], nav { width: 20%; } main, aside[role='complementary'], footer[role='contentinfo'] { margin-left: 20%; }
}
@media only screen and (min-width: 80em) {
header[role='banner'], nav { width: 250px; } main, aside[role='complementary'], footer[role='contentinfo'] { margin-left: 250px; }
}