Sidebar off-canvas refactor (#11)

- Remove tinted background

- Refactor sidebar overlay
  - Remove problematic overlay and `pointer-events: hidden`
  - Size sidebar accordingly to avoid it covering up `.wrapper` content and interfering with interactions

- Add `-ms-` vendor prefixes for Internet Exploer

- Update CHANGELOG

Close #9

.scss-lint.yml

@@ -131,7 +131,7 @@ linters:
   PropertySortOrder:
     enabled: true
     order: smacss
-    ignore_unspecified: false
+    ignore_unspecified: true
     min_properties: 2
     separate_groups: false
 

CHANGELOG.md

@@ -10,8 +10,13 @@ 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)
+- Removed tinted background from `<th>` elements.
 - Permalink structure of `/docs` demo site.
 
+### Fixed
+- Unclickable main content links in Internet Explorer 10. [#9](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/9)
+
 ## [1.0.1] - 2017-03-23
 ### Added
 - Responsive embed helper classes for videos. [#2](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/2)

_sass/basically-basic/_global.scss

@@ -20,7 +20,9 @@
   }
 
   a {
+    display: -ms-flexbox;
     display: flex;
+    -ms-flex-align: center;
     align-items: center;
     min-height: $site-image-height;
     color: $text-color;

_sass/basically-basic/_layout.scss

@@ -3,8 +3,15 @@
    ========================================================================== */
 
 .wrapper {
+  width: 100%;
   min-height: 100vh;
   transition: $global-transition;
+  box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
+
+  @include breakpoint($medium) {
+    position: relative;
+    z-index: 200;
+  }
 }
 
 .intro,
@@ -64,10 +71,13 @@ main {
 .layout--about {
 
   .entry-wrap {
+    display: -ms-flexbox;
     display: flex;
+    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 
     @include breakpoint($medium) {
+      -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
     }
   }
@@ -75,6 +85,7 @@ main {
   .entry-content {
 
     @include breakpoint($medium) {
+      -ms-flex: 1;
       flex: 1;
     }
   }

_sass/basically-basic/_navigation.scss

@@ -21,9 +21,11 @@
 
   ul {
     @include list-unstyled;
+    display: -ms-flexbox;
     display: flex;
 
     > li {
+      -ms-flex: 1;
       flex: 1;
       justify-content: space-between;
       -ms-flex-pack: justify;

_sass/basically-basic/_sidebar.scss

@@ -8,24 +8,14 @@
   left: 0;
   width: 100%;
   height: 100%;
-  overflow: hidden;
   z-index: 150;
-  pointer-events: none;
 
-  /* page overlay dimmer */
+  @include breakpoint($sidebar-width) {
-  &::after {
+    width: $sidebar-width;
-    display: block;
+  }
-    position: absolute;
+
-    top: 0;
+  @include breakpoint($large) {
-    left: 0;
+    width: (1.5 * $sidebar-width);
-    width: 100%;
-    height: 100%;
-    transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
-    background: rgba($base-color, 0.5);
-    content: '';
-    opacity: 0;
-    pointer-events: none;
-    will-change: opacity;
   }
 
   li {
@@ -68,14 +58,8 @@
   &.is--visible {
     transform: translateX(0);
 
-    &::after {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
     > .inner {
       transform: none;
-      box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125);
     }
 
     &.is--animatable > .inner {
@@ -95,16 +79,18 @@
     padding: 1.5em;
     transform: translateX(-1 * $sidebar-width);
     background-color: $sidebar-background-color;
-    box-shadow: none;
     z-index: 160;
     will-change: transform;
     overflow-x: hidden;
-    pointer-events: auto;
 
     @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);
@@ -163,7 +149,9 @@
   z-index: 10000;
 
   .toggle {
+    display: -ms-flexbox;
     display: flex;
+    -ms-flex-align: center;
     align-items: center;
     color: inherit;
     text-decoration: none;
@@ -171,6 +159,7 @@
 }
 
 .sidebar-toggle-label {
+  -ms-flex-order: 2;
   order: 2;
   margin-left: 0.5rem;
   font-weight: bold;

_sass/basically-basic/_tables.scss

@@ -12,14 +12,6 @@ table {
   word-break: keep-all;
 }
 
-thead {
-
-  th,
-  td {
-    background-color: tint($base-color, 80%);
-  }
-}
-
 th,
 td {
   border-bottom: 1px solid $border-color;

_sass/basically-basic/utilities/_align.scss

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