From 79d5dd378c43f909796e20744212330e18e4d681 Mon Sep 17 00:00:00 2001
From: Michael Rose <mmistakes@users.noreply.github.com>
Date: Wed, 29 Mar 2017 14:55:31 -0400
Subject: [PATCH] Overlay menu adjustments (#16)

* Improve animation of off-canvas menu
* Simplify styles and push main content with CSS transforms for higher FPS
* Reduce padding around toggle button
* Customize color of focus state
* Merge overlay menu changes into /docs

Close #15
---
 CHANGELOG.md                                  |  2 +-
 _layouts/default.html                         | 12 +++---
 _sass/basically-basic/_base.scss              |  6 +++
 _sass/basically-basic/_layout.scss            | 23 +++++++----
 _sass/basically-basic/_navicons.scss          |  5 ++-
 _sass/basically-basic/_sidebar.scss           | 40 ++-----------------
 _sass/basically-basic/utilities/_align.scss   |  9 +----
 docs/_layouts/default.html                    | 12 +++---
 docs/_sass/basically-basic/_base.scss         |  6 +++
 docs/_sass/basically-basic/_layout.scss       | 23 +++++++----
 docs/_sass/basically-basic/_navicons.scss     |  5 ++-
 docs/_sass/basically-basic/_sidebar.scss      | 40 ++-----------------
 .../basically-basic/utilities/_align.scss     |  9 +----
 13 files changed, 77 insertions(+), 115 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee7fe66..1cd7c63 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Google Analytics tracking ID, Disqus comments, to `/docs` demo site.
 
 ### Changed
-- Refactor sidebar off-canvas menu. [#9](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/9)
+- Refactor sidebar off-canvas menu and improve animation. [#9](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/9) [#15](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/15)
 - Removed tinted background from `<th>` elements.
 - Permalink structure of `/docs` demo site.
 
diff --git a/_layouts/default.html b/_layouts/default.html
index 7efd703..83730c1 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -13,15 +13,17 @@
     {% include skip-links.html %}
 
     <div class="sidebar-toggle-wrapper">
-      <a class="toggle navicon-button larr" href="#sidebar">
+      <button class="toggle navicon-button larr">
         <span class="sidebar-toggle-label">{{ site.data.theme.t.menu | default: 'Menu' }}</span>
         <div class="navicon"></div>
-      </a>
+      </button>
     </div>
 
-    <div class="wrapper">
-      {% include masthead.html %}
-      {{ content }}
+    <div class="canvas">
+      <div class="wrapper">
+        {% include masthead.html %}
+        {{ content }}
+      </div>
     </div>
 
     <div id="sidebar" class="sidebar">
diff --git a/_sass/basically-basic/_base.scss b/_sass/basically-basic/_base.scss
index add1305..1ccb600 100644
--- a/_sass/basically-basic/_base.scss
+++ b/_sass/basically-basic/_base.scss
@@ -110,3 +110,9 @@ a {
     color: shade($accent-color, 25%);
   }
 }
+
+*:focus {
+  border-color: $accent-color;
+  outline: none;
+  box-shadow: 0 0 10px $accent-color;
+}
diff --git a/_sass/basically-basic/_layout.scss b/_sass/basically-basic/_layout.scss
index 6a0bcec..c7b482a 100644
--- a/_sass/basically-basic/_layout.scss
+++ b/_sass/basically-basic/_layout.scss
@@ -2,16 +2,23 @@
    Layout
    ========================================================================== */
 
-.wrapper {
+.canvas {
+  position: relative;
   width: 100%;
-  min-height: 100vh;
-  transition: $global-transition;
-  box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
+  overflow: hidden;
+}
 
-  @include breakpoint($medium) {
-    position: relative;
-    z-index: 200;
-  }
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  transform: translateX(0);
+  transition: $global-transition;
+  background-color: $background-color;
+  z-index: 100;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 .intro,
diff --git a/_sass/basically-basic/_navicons.scss b/_sass/basically-basic/_navicons.scss
index b21d964..47b7755 100644
--- a/_sass/basically-basic/_navicons.scss
+++ b/_sass/basically-basic/_navicons.scss
@@ -5,8 +5,11 @@
 .navicon-button {
   display: inline-block;
   position: relative;
-  padding: 1.8125rem 1rem;
+  margin: 0.90625rem 0;
+  padding: 0.90625rem 1rem;
   transition: $navicon-duration / 2;
+  border: 0;
+  outline: none;
   background-color: $navicon-nav-bg-close;
   cursor: pointer;
   -moz-user-select: none;
diff --git a/_sass/basically-basic/_sidebar.scss b/_sass/basically-basic/_sidebar.scss
index aac84a7..c2af88d 100644
--- a/_sass/basically-basic/_sidebar.scss
+++ b/_sass/basically-basic/_sidebar.scss
@@ -7,15 +7,12 @@
   top: 0;
   left: 0;
   width: 100%;
+  max-width: $sidebar-width;
   height: 100%;
-  z-index: 150;
-
-  @include breakpoint($sidebar-width) {
-    width: $sidebar-width;
-  }
+  z-index: 50;
 
   @include breakpoint($large) {
-    width: (1.5 * $sidebar-width);
+    max-width: (1.5 * $sidebar-width);
   }
 
   li {
@@ -55,46 +52,17 @@
     }
   }
 
-  &.is--visible {
-    transform: translateX(0);
-
-    > .inner {
-      transform: none;
-    }
-
-    &.is--animatable > .inner {
-      transition: all 330ms ease-out;
-    }
-  }
-
-  &.is--animatable > .inner {
-    transition: all 130ms ease-in;
-  }
-
   > .inner {
-    position: relative;
     width: 100%;
-    max-width: $sidebar-width;
     height: 100%;
     padding: 1.5em;
-    transform: translateX(-1 * $sidebar-width);
     background-color: $sidebar-background-color;
-    z-index: 160;
-    will-change: transform;
     overflow-x: hidden;
+    box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
 
     @include breakpoint($medium) {
       padding: 3rem;
     }
-
-    @include breakpoint(max-width $medium) {
-      box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.125);
-    }
-
-    @include breakpoint($large) {
-      max-width: (1.5 * $sidebar-width);
-      transform: translateX(-1.5 * $sidebar-width);
-    }
   }
 
   .menu {
diff --git a/_sass/basically-basic/utilities/_align.scss b/_sass/basically-basic/utilities/_align.scss
index 4ab45db..e77cfac 100644
--- a/_sass/basically-basic/utilities/_align.scss
+++ b/_sass/basically-basic/utilities/_align.scss
@@ -53,15 +53,10 @@ a img.align-left {
    ========================================================================== */
 
 .is--pushed {
-  @include clearfix();
-
-  @include breakpoint($medium) {
-    width: calc(100% - #{$sidebar-width});
-    transform: translateX(1 * $sidebar-width);
-  }
+  transform: translateX(1 * $sidebar-width);
+  transform-origin: right;
 
   @include breakpoint($large) {
-    width: calc(100% - (1.5 * #{$sidebar-width}));
     transform: translateX(1.5 * $sidebar-width);
   }
 }
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 7efd703..83730c1 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -13,15 +13,17 @@
     {% include skip-links.html %}
 
     <div class="sidebar-toggle-wrapper">
-      <a class="toggle navicon-button larr" href="#sidebar">
+      <button class="toggle navicon-button larr">
         <span class="sidebar-toggle-label">{{ site.data.theme.t.menu | default: 'Menu' }}</span>
         <div class="navicon"></div>
-      </a>
+      </button>
     </div>
 
-    <div class="wrapper">
-      {% include masthead.html %}
-      {{ content }}
+    <div class="canvas">
+      <div class="wrapper">
+        {% include masthead.html %}
+        {{ content }}
+      </div>
     </div>
 
     <div id="sidebar" class="sidebar">
diff --git a/docs/_sass/basically-basic/_base.scss b/docs/_sass/basically-basic/_base.scss
index add1305..1ccb600 100644
--- a/docs/_sass/basically-basic/_base.scss
+++ b/docs/_sass/basically-basic/_base.scss
@@ -110,3 +110,9 @@ a {
     color: shade($accent-color, 25%);
   }
 }
+
+*:focus {
+  border-color: $accent-color;
+  outline: none;
+  box-shadow: 0 0 10px $accent-color;
+}
diff --git a/docs/_sass/basically-basic/_layout.scss b/docs/_sass/basically-basic/_layout.scss
index 6a0bcec..c7b482a 100644
--- a/docs/_sass/basically-basic/_layout.scss
+++ b/docs/_sass/basically-basic/_layout.scss
@@ -2,16 +2,23 @@
    Layout
    ========================================================================== */
 
-.wrapper {
+.canvas {
+  position: relative;
   width: 100%;
-  min-height: 100vh;
-  transition: $global-transition;
-  box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
+  overflow: hidden;
+}
 
-  @include breakpoint($medium) {
-    position: relative;
-    z-index: 200;
-  }
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  transform: translateX(0);
+  transition: $global-transition;
+  background-color: $background-color;
+  z-index: 100;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 .intro,
diff --git a/docs/_sass/basically-basic/_navicons.scss b/docs/_sass/basically-basic/_navicons.scss
index b21d964..47b7755 100644
--- a/docs/_sass/basically-basic/_navicons.scss
+++ b/docs/_sass/basically-basic/_navicons.scss
@@ -5,8 +5,11 @@
 .navicon-button {
   display: inline-block;
   position: relative;
-  padding: 1.8125rem 1rem;
+  margin: 0.90625rem 0;
+  padding: 0.90625rem 1rem;
   transition: $navicon-duration / 2;
+  border: 0;
+  outline: none;
   background-color: $navicon-nav-bg-close;
   cursor: pointer;
   -moz-user-select: none;
diff --git a/docs/_sass/basically-basic/_sidebar.scss b/docs/_sass/basically-basic/_sidebar.scss
index aac84a7..c2af88d 100644
--- a/docs/_sass/basically-basic/_sidebar.scss
+++ b/docs/_sass/basically-basic/_sidebar.scss
@@ -7,15 +7,12 @@
   top: 0;
   left: 0;
   width: 100%;
+  max-width: $sidebar-width;
   height: 100%;
-  z-index: 150;
-
-  @include breakpoint($sidebar-width) {
-    width: $sidebar-width;
-  }
+  z-index: 50;
 
   @include breakpoint($large) {
-    width: (1.5 * $sidebar-width);
+    max-width: (1.5 * $sidebar-width);
   }
 
   li {
@@ -55,46 +52,17 @@
     }
   }
 
-  &.is--visible {
-    transform: translateX(0);
-
-    > .inner {
-      transform: none;
-    }
-
-    &.is--animatable > .inner {
-      transition: all 330ms ease-out;
-    }
-  }
-
-  &.is--animatable > .inner {
-    transition: all 130ms ease-in;
-  }
-
   > .inner {
-    position: relative;
     width: 100%;
-    max-width: $sidebar-width;
     height: 100%;
     padding: 1.5em;
-    transform: translateX(-1 * $sidebar-width);
     background-color: $sidebar-background-color;
-    z-index: 160;
-    will-change: transform;
     overflow-x: hidden;
+    box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
 
     @include breakpoint($medium) {
       padding: 3rem;
     }
-
-    @include breakpoint(max-width $medium) {
-      box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.125);
-    }
-
-    @include breakpoint($large) {
-      max-width: (1.5 * $sidebar-width);
-      transform: translateX(-1.5 * $sidebar-width);
-    }
   }
 
   .menu {
diff --git a/docs/_sass/basically-basic/utilities/_align.scss b/docs/_sass/basically-basic/utilities/_align.scss
index 4ab45db..e77cfac 100644
--- a/docs/_sass/basically-basic/utilities/_align.scss
+++ b/docs/_sass/basically-basic/utilities/_align.scss
@@ -53,15 +53,10 @@ a img.align-left {
    ========================================================================== */
 
 .is--pushed {
-  @include clearfix();
-
-  @include breakpoint($medium) {
-    width: calc(100% - #{$sidebar-width});
-    transform: translateX(1 * $sidebar-width);
-  }
+  transform: translateX(1 * $sidebar-width);
+  transform-origin: right;
 
   @include breakpoint($large) {
-    width: calc(100% - (1.5 * #{$sidebar-width}));
     transform: translateX(1.5 * $sidebar-width);
   }
 }