diff --git a/_sass/layout.scss b/_sass/layout.scss index 75e87ac..9bb6889 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -17,13 +17,15 @@ .side-bar { z-index: 100; + display: flex; + flex-wrap: wrap; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; background-color: $grey-lt-000; @include mq(md) { + flex-wrap: nowrap; position: absolute; - display: flex; width: $nav-width + 16px; height: 100%; padding-top: $gutter-spacing * 2; @@ -107,11 +109,9 @@ .navigation { @include mq(md) { - position: absolute; - top: 0; - right: 0; - height: 100%; padding-top: $sp-8; + overflow-y: auto; + flex: 1 1 auto; } } @@ -127,9 +127,14 @@ body { .site-footer { position: absolute; - bottom: $sp-3; + bottom: 0; + padding-top: $sp-4; + padding-bottom: $sp-4; @include mq(md) { - right: 0; + position: static; + align-self: flex-end; + justify-self: end; + background-color: $grey-lt-000; } } diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 79594da..e6f1d22 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -4,9 +4,7 @@ .site-title { display: block; - flex-grow: 1; - flex-shrink: 1; - flex-basis: auto; + flex: 1 1 auto; background-color: $grey-lt-000; @include mq(md) { @@ -27,7 +25,7 @@ list-style: none; @include mq(md) { - margin-top: $sp-10; + margin-top: 0; } } @@ -91,15 +89,6 @@ } } -.side-bar { - display: flex; - flex-wrap: wrap; - - @include mq(md) { - display: block; - overflow-y: auto; - } -} .navigation-list-toggle { position: absolute;