first rebase

ALSO: Remove fading on dropdown menu click. This is also a bug on the actual upstream, when the cursor leaves the screen the menu disappears but the fading doesn't.
This causes things like the menu saying it's open when it's not and closed when open. I'm not dealing with an upstream bug.

_sass/minimal-mistakes/_sidebar.scss

@@ -8,33 +8,31 @@
 
 .sidebar {
   @include clearfix();
-  margin-bottom: 1em;
-  -webkit-transform: translate3d(0, 0 , 0);
-          transform: translate3d(0, 0 , 0);
-
-  @include breakpoint(max-width $large) {
-    /* fix z-index order of follow links */
-    position: relative;
-    z-index: 10;
-  }
+  // @include breakpoint(max-width $large) {
+  //   /* fix z-index order of follow links */
+  //   position: relative;
+  //   z-index: 10;
+  //   -webkit-transform: translate3d(0, 0, 0);
+  //   transform: translate3d(0, 0, 0);
+  // }
 
   @include breakpoint($large) {
     float: left;
     width: calc(#{$right-sidebar-width-narrow} - 1em);
-    opacity: 1;
+    opacity: 0.75;
     -webkit-transition: opacity 0.2s ease-in-out;
-            transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
 
-    a { 
-      &:hover {
-        text-decoration: underline;
-      }
+    &:hover {
+      opacity: 1;
     }
 
     &.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
+      */
+      max-height: calc(100vh - #{$nav-height} - 2em);
     }
   }
 
@@ -42,12 +40,22 @@
     width: calc(#{$right-sidebar-width} - 1em);
   }
 
-  h2, h3, h4, h5, h6 {
+  > * {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin-bottom: 0;
     font-family: $sans-serif-narrow;
   }
 
-  p, li {
+  p,
+  li {
     font-family: $sans-serif;
     font-size: $type-size-6;
     line-height: 1.5;
@@ -55,6 +63,11 @@
 
   img {
     width: 100%;
+
+    &.emoji {
+      width: 20px;
+      height: 20px;
+    }
   }
 }
 
@@ -69,6 +82,14 @@
     margin-right: -1 * $right-sidebar-width-narrow;
     padding-left: 1em;
     z-index: 10;
+
+    &.sticky {
+      @include clearfix();
+      position: -webkit-sticky;
+      position: sticky;
+      top: 2em;
+      float: right;
+    }
   }
 
   @include breakpoint($x-large) {
@@ -78,7 +99,6 @@
 }
 
 .splash .sidebar__right {
-
   @include breakpoint($large) {
     position: relative;
     float: right;
@@ -130,6 +150,11 @@
     padding-left: 0;
     padding-right: 0;
   }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 }
 
 .author__name {
@@ -159,8 +184,7 @@
   display: table-cell;
   vertical-align: middle;
   font-family: $sans-serif;
-  z-index: 10;
-  position: relative;
+  z-index: 20;
   cursor: pointer;
 
   li:last-child {
@@ -169,13 +193,38 @@
     }
   }
 
+  .author__urls {
+    span.label {
+      padding-left: 5px;
+    }
+  }
+
   @include breakpoint($large) {
     display: block;
   }
 
   button {
+    position: relative;
     margin-bottom: 0;
 
+    &:before {
+      @supports (pointer-events: none) {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      }
+    }
+
+    &.open {
+      &:before {
+        pointer-events: auto;
+      }
+    }
+
     @include breakpoint($large) {
       display: none;
     }
@@ -192,7 +241,6 @@
   border: 1px solid $border-color;
   border-radius: $border-radius;
   background: $background-color;
-  z-index: -1;
   box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
   cursor: default;
 
@@ -244,6 +292,11 @@
     }
   }
 
+  ul {
+    padding: 10px;
+    list-style-type: none;
+  }
+
   li {
     white-space: nowrap;
   }
@@ -262,4 +315,32 @@
       text-decoration: underline;
     }
   }
-}
+}
+
+/*
+   Wide Pages
+   ========================================================================== */
+
+.wide .sidebar__right {
+  margin-bottom: 1em;
+
+  @include breakpoint($large) {
+    position: initial;
+    top: initial;
+    right: initial;
+    width: initial;
+    margin-right: initial;
+    padding-left: initial;
+    z-index: initial;
+
+    &.sticky {
+      float: none;
+    }
+  }
+
+  @include breakpoint($x-large) {
+    width: initial;
+    margin-right: initial;
+  }
+}
+