From e707057fa8b89d77e1cfc35bed30342b2fa4f2e0 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Thu, 9 Aug 2018 15:06:00 -0400 Subject: [PATCH] Improve side navigation spacing in relation to masthead --- _sass/minimal-mistakes/_archive.scss | 1 + _sass/minimal-mistakes/_masthead.scss | 9 +++++---- _sass/minimal-mistakes/_navigation.scss | 23 ++++++++++++++++------- _sass/minimal-mistakes/_page.scss | 2 +- _sass/minimal-mistakes/_sidebar.scss | 15 +++++++++------ _sass/minimal-mistakes/_variables.scss | 1 + 6 files changed, 33 insertions(+), 18 deletions(-) diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss index 40d156e2..63fd774c 100644 --- a/_sass/minimal-mistakes/_archive.scss +++ b/_sass/minimal-mistakes/_archive.scss @@ -3,6 +3,7 @@ ========================================================================== */ .archive { + margin-top: 1em; margin-bottom: 2em; @include breakpoint($large) { diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss index 3317c7fd..2dfaed61 100644 --- a/_sass/minimal-mistakes/_masthead.scss +++ b/_sass/minimal-mistakes/_masthead.scss @@ -18,8 +18,10 @@ padding: 1em; max-width: 100%; display: -webkit-box; + display: -ms-flexbox; display: flex; -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; font-family: $sans-serif-narrow; @@ -39,11 +41,10 @@ .site-title { display: -webkit-box; + display: -ms-flexbox; display: flex; - padding: 0.5rem 0; - align-self: stretch; - -webkit-box-align: center; - align-items: center; + -ms-flex-item-align: center; + align-self: center; font-weight: bold; z-index: 20; } diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss index b6606e63..faa667df 100644 --- a/_sass/minimal-mistakes/_navigation.scss +++ b/_sass/minimal-mistakes/_navigation.scss @@ -176,15 +176,17 @@ .greedy-nav { position: relative; display: -webkit-box; + display: -ms-flexbox; display: flex; -webkit-box-align: center; + -ms-flex-align: center; align-items: center; + min-height: $nav-height; background: $background-color; a { display: block; margin: 0 1rem; - padding: 0.5rem 0; color: $masthead-link-color; text-decoration: none; @@ -198,7 +200,7 @@ } &__toggle { - padding: 0 0.5rem; + -ms-flex-item-align: stretch; align-self: stretch; border: 0; outline: none; @@ -209,15 +211,19 @@ .visible-links { display: -webkit-box; + display: -ms-flexbox; display: flex; -webkit-box-pack: end; + -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 1; + -ms-flex: 1; flex: 1; overflow: hidden; li { -webkit-box-flex: 0; + -ms-flex: none; flex: none; } @@ -235,13 +241,13 @@ -webkit-transition: $global-transition; transition: $global-transition; -webkit-transform: scaleX(0) translate3d(0, 0, 0); - transform: scaleX(0) translate3d(0, 0, 0); /* hide*/ + transform: scaleX(0) translate3d(0, 0, 0); // hide } &:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); - transform: scaleX(1); /* reveal*/ + transform: scaleX(1); // reveal } } } @@ -255,6 +261,8 @@ border: 1px solid $border-color; border-radius: $border-radius; background: $background-color; + -webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16), + 0 2px 10px 0 rgba(#000, 0.12); box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12); &.hidden { @@ -331,7 +339,7 @@ display: none; } - @include breakpoint(max-width ($large - 1px)) { + @include breakpoint(max-width($large - 1px)) { label { position: relative; display: inline-block; @@ -437,7 +445,7 @@ font-weight: bold; } - @include breakpoint(max-width ($large - 1px)) { + @include breakpoint(max-width($large - 1px)) { position: relative; max-height: 0; opacity: 0%; @@ -451,7 +459,7 @@ } } -@include breakpoint(max-width ($large - 1px)) { +@include breakpoint(max-width($large - 1px)) { .nav__list input:checked ~ .nav__items { -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; @@ -496,6 +504,7 @@ background-color: $background-color; border: 1px solid $border-color; border-radius: $border-radius; + -webkit-box-shadow: $box-shadow; box-shadow: $box-shadow; .nav__title { diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index 78fc9bd9..7a37a1f8 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -5,7 +5,6 @@ #main { @include clearfix; margin-left: auto; - margin-top: 2em; margin-right: auto; padding-left: 1em; padding-right: 1em; @@ -34,6 +33,7 @@ .page__inner-wrap { float: left; + margin-top: 1em; margin-left: 0; margin-right: 0; width: 100%; diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss index 5eff7901..59d1204c 100644 --- a/_sass/minimal-mistakes/_sidebar.scss +++ b/_sass/minimal-mistakes/_sidebar.scss @@ -8,8 +8,6 @@ .sidebar { @include clearfix(); - margin-bottom: 1em; - @include breakpoint(max-width $large) { /* fix z-index order of follow links */ position: relative; @@ -31,10 +29,10 @@ &.sticky { overflow-y: auto; - /* calculate height of nav list */ - height: calc( - 100vh - 90px - 2em - ); // viewport height - approx. masthead height - main content top margin + /* calculate height of nav list + viewport height - nav height - masthead x-padding + */ + height: calc(100vh - #{$nav-height} - 2em); } } @@ -42,6 +40,11 @@ width: calc(#{$right-sidebar-width} - 1em); } + > * { + margin-top: 1em; + margin-bottom: 1em; + } + h2, h3, h4, diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss index 8eec6b39..519abe2f 100644 --- a/_sass/minimal-mistakes/_variables.scss +++ b/_sass/minimal-mistakes/_variables.scss @@ -148,6 +148,7 @@ $right-sidebar-width-wide: 400px !default; $border-radius: 4px !default; $box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default; +$nav-height: 40px !default; $navicon-width: 1.5rem !default; $navicon-height: 0.25rem !default; $global-transition: all 0.2s ease-in-out !default;