Improve side navigation spacing in relation to masthead

_sass/minimal-mistakes/_archive.scss

@@ -3,6 +3,7 @@
    ========================================================================== */
 
 .archive {
+  margin-top: 1em;
   margin-bottom: 2em;
 
   @include breakpoint($large) {

_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;
+  -ms-flex-item-align: center;
-  align-self: stretch;
+  align-self: center;
-  -webkit-box-align: center;
-  align-items: center;
   font-weight: bold;
   z-index: 20;
 }

_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 {

_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%;

_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 */
+      /* calculate height of nav list
-      height: calc(
+         viewport height - nav height - masthead x-padding
-        100vh - 90px - 2em
+      */
-      ); // viewport height - approx. masthead height - main content top margin
+      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,

_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;