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

@@ -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.
 

_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">
+    <div class="canvas">
-      {% include masthead.html %}
+      <div class="wrapper">
-      {{ content }}
+        {% include masthead.html %}
+        {{ content }}
+      </div>
     </div>
 
     <div id="sidebar" class="sidebar">

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

_sass/basically-basic/_layout.scss

@@ -2,16 +2,23 @@
    Layout
    ========================================================================== */
 
-.wrapper {
+.canvas {
+  position: relative;
   width: 100%;
-  min-height: 100vh;
+  overflow: hidden;
-  transition: $global-transition;
+}
-  box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
 
-  @include breakpoint($medium) {
+.wrapper {
-    position: relative;
+  position: relative;
-    z-index: 200;
+  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,

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

_sass/basically-basic/_sidebar.scss

@@ -7,15 +7,12 @@
   top: 0;
   left: 0;
   width: 100%;
+  max-width: $sidebar-width;
   height: 100%;
-  z-index: 150;
+  z-index: 50;
-
-  @include breakpoint($sidebar-width) {
-    width: $sidebar-width;
-  }
 
   @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 {

_sass/basically-basic/utilities/_align.scss

@@ -53,15 +53,10 @@ a img.align-left {
    ========================================================================== */
 
 .is--pushed {
-  @include clearfix();
+  transform: translateX(1 * $sidebar-width);
-
+  transform-origin: right;
-  @include breakpoint($medium) {
-    width: calc(100% - #{$sidebar-width});
-    transform: translateX(1 * $sidebar-width);
-  }
 
   @include breakpoint($large) {
-    width: calc(100% - (1.5 * #{$sidebar-width}));
     transform: translateX(1.5 * $sidebar-width);
   }
 }

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">
+    <div class="canvas">
-      {% include masthead.html %}
+      <div class="wrapper">
-      {{ content }}
+        {% include masthead.html %}
+        {{ content }}
+      </div>
     </div>
 
     <div id="sidebar" class="sidebar">

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;
+}

docs/_sass/basically-basic/_layout.scss

@@ -2,16 +2,23 @@
    Layout
    ========================================================================== */
 
-.wrapper {
+.canvas {
+  position: relative;
   width: 100%;
-  min-height: 100vh;
+  overflow: hidden;
-  transition: $global-transition;
+}
-  box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
 
-  @include breakpoint($medium) {
+.wrapper {
-    position: relative;
+  position: relative;
-    z-index: 200;
+  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,

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;

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;
+  z-index: 50;
-
-  @include breakpoint($sidebar-width) {
-    width: $sidebar-width;
-  }
 
   @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 {

docs/_sass/basically-basic/utilities/_align.scss

@@ -53,15 +53,10 @@ a img.align-left {
    ========================================================================== */
 
 .is--pushed {
-  @include clearfix();
+  transform: translateX(1 * $sidebar-width);
-
+  transform-origin: right;
-  @include breakpoint($medium) {
-    width: calc(100% - #{$sidebar-width});
-    transform: translateX(1 * $sidebar-width);
-  }
 
   @include breakpoint($large) {
-    width: calc(100% - (1.5 * #{$sidebar-width}));
     transform: translateX(1.5 * $sidebar-width);
   }
 }