@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;
}

}