// // The basic two column layout // .page-wrap { @include mq(md) { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; } } .side-bar { z-index: 100; display: flex; flex-wrap: wrap; background-color: $sidebar-color; @include mq(md) { flex-wrap: nowrap; position: absolute; width: $nav-width-md; height: 100%; flex-direction: column; border-right: $border $border-color; align-items: flex-end; } @include mq(lg) { width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}); min-width: $nav-width; } } .main-wrap { @include mq(md) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: scroll; } &:focus { outline: none; } } .main { @include mq(md) { position: relative; max-width: $content-width; margin-left: $nav-width-md; } @include mq(lg) { margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}); } } .main-content-wrap { @include container; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; @include mq(md) { padding-top: $gutter-spacing; padding-bottom: $gutter-spacing; } } .main-header { @include container; display: none; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; background-color: $sidebar-color; @include mq(md) { display: flex; justify-content: flex-end; height: $header-height; background-color: $body-background-color; border-bottom: $border $border-color; } &.nav-open { display: block; @include mq(md) { display: flex; } } } .site-nav, .site-header, .site-footer { width: 100%; @include mq(lg) { width: $nav-width; } } .site-nav { @include mq(md) { padding-top: $sp-8; padding-bottom: $gutter-spacing-sm; overflow-y: auto; flex: 1 1 auto; } } .site-header { display: flex; min-height: $header-height; align-items: center; @include mq(md) { z-index: 101; height: $header-height; max-height: $header-height; border-bottom: $border $border-color; } } .site-title { @include container; flex-grow: 1; display: flex; height: 100%; align-items: center; padding-top: $sp-3; padding-bottom: $sp-3; color: $body-heading-color; @include fs-6; @include mq(md) { padding-top: $sp-2; padding-bottom: $sp-2; } } @if variable-exists(logo) { .site-logo { width: 100%; height: 100%; background-image: url($logo); background-repeat: no-repeat; background-position: left center; background-size: contain; } } .site-button { display: flex; height: 100%; padding: $gutter-spacing-sm; align-items: center; @include mq(md) { display: none; } } .site-title:hover, .site-button:hover { background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%); } // stylelint-disable selector-max-type body { position: relative; padding-bottom: $sp-10; @include mq(md) { position: static; padding-bottom: 0; } } // stylelint-enable selector-max-type .site-footer { @include container; position: absolute; bottom: 0; left: 0; padding-top: $sp-4; padding-bottom: $sp-4; color: $grey-dk-000; @include fs-2; @include mq(md) { position: static; justify-self: end; } } .icon { width: $sp-5; height: $sp-5; fill: $link-color; }