jekyll-theme-basically-basic 1.0.1 → 1.1.0

data/_sass/basically-basic/_sidebar.scss

@@ -1,177 +1,132 @@
-/* ==========================================================================
-   Sidebar
-   ========================================================================== */
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  z-index: 150;
-  pointer-events: none;
-
-  /* page overlay dimmer */
-  &::after {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    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 {
-    transform: translateX(-1rem);
-    transition: all 0.5s;
-    opacity: 0;
-
-    &.is--moved {
-      transform: translateX(0);
-      opacity: 1;
-    }
-
-    /* line hover effect */
-    a {
-      position: relative;
-      color: $base-color;
-
-      &::before {
-        display: block;
-        position: absolute;
-        top: 50%;
-        left: -3rem;
-        width: 0;
-        height: 1px;
-        transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);
-        background-color: $base-color;
-        content: '';
-      }
-
-      &:hover {
-        color: $accent-color;
-      }
-
-      &:hover::before {
-        width: 2.5rem;
-      }
-    }
-  }
-
-  &.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 {
-      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;
-    box-shadow: none;
-    z-index: 160;
-    will-change: transform;
-    overflow-x: hidden;
-    pointer-events: auto;
-
-    @include breakpoint($medium) {
-      padding: 3rem;
-    }
-
-    @include breakpoint($large) {
-      max-width: (1.5 * $sidebar-width);
-      transform: translateX(-1.5 * $sidebar-width);
-    }
-  }
-
-  .menu {
-    @include fluid-type($min-vw, $max-vw, 24px, 48px);
-    position: relative;
-    margin-bottom: 1.5rem;
-    padding-bottom: 0.5rem;
-    font-weight: bold;
-    line-height: 1;
-
-    a {
-      display: block;
-    }
-
-    /* divider line */
-    &::after {
-      position: absolute;
-      bottom: 0;
-      width: 1.5em;
-      height: 1px;
-      background-color: $base-color;
-      content: '';
-    }
-
-    li {
-      margin-bottom: 1.5rem;
-    }
-  }
-
-  .contact-list {
-    @include fluid-type($min-vw, $max-vw, 18px, 24px);
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-
-    li:not(:last-child) {
-      margin-bottom: 0.5rem;
-    }
-
-    a {
-      display: block;
-      color: $base-color;
-      text-decoration: none;
-    }
-  }
-}
-
-.sidebar-toggle-wrapper {
-  position: fixed;
-  top: 0.675rem;
-  right: 0;
-  cursor: pointer;
-  z-index: 10000;
-
-  .toggle {
-    display: flex;
-    align-items: center;
-    color: inherit;
-    text-decoration: none;
-  }
-}
-
-.sidebar-toggle-label {
-  order: 2;
-  margin-left: 0.5rem;
-  font-weight: bold;
-}
+/* ==========================================================================
+   Sidebar
+   ========================================================================== */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-width: $sidebar-width;
+  height: 100%;
+  z-index: 50;
+
+  @include breakpoint($large) {
+    max-width: (1.5 * $sidebar-width);
+  }
+
+  li {
+    transform: translateX(-1rem);
+    transition: all 0.5s;
+    opacity: 0;
+
+    &.is--moved {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    /* line hover effect */
+    a {
+      position: relative;
+      color: $base-color;
+
+      &::before {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: -3rem;
+        width: 0;
+        height: 1px;
+        transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);
+        background-color: $base-color;
+        content: '';
+      }
+
+      &:hover {
+        color: $accent-color;
+      }
+
+      &:hover::before {
+        width: 2.5rem;
+      }
+    }
+  }
+
+  > .inner {
+    width: 100%;
+    height: 100%;
+    padding: 1.5em;
+    background-color: $sidebar-background-color;
+    overflow-x: hidden;
+    box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
+
+    @include breakpoint($medium) {
+      padding: 3rem;
+    }
+  }
+
+  .menu {
+    @include fluid-type($min-vw, $max-vw, 24px, 48px);
+    position: relative;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    font-weight: bold;
+    line-height: 1;
+
+    a {
+      display: block;
+    }
+
+    /* divider line */
+    &::after {
+      position: absolute;
+      bottom: 0;
+      width: 1.5em;
+      height: 1px;
+      background-color: $base-color;
+      content: '';
+    }
+
+    li {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  .contact-list {
+    @include fluid-type($min-vw, $max-vw, 18px, 24px);
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+
+    li:not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+
+    a {
+      display: block;
+      color: $base-color;
+      text-decoration: none;
+    }
+  }
+}
+
+.sidebar-toggle-wrapper {
+  position: fixed;
+  top: 0.675rem;
+  right: 0;
+  cursor: pointer;
+  z-index: 10000;
+
+  .toggle-inner {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+.sidebar-toggle-label {
+  -ms-flex-order: 2;
+  order: 2;
+  margin-left: 0.5rem;
+  font-weight: bold;
+}

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

data/_sass/basically-basic/utilities/_accessibility.scss

@@ -2,17 +2,6 @@
    Accessibility Modules
    ========================================================================== */
 
-/* Skip links */
-.skip-links {
-  margin: 0;
-
-  li {
-    width: 0;
-    height: 0;
-    list-style: none;
-  }
-}
-
 /* Text meant only for screen readers */
 .screen-reader-text,
 .screen-reader-text span,

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

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

data/assets/javascripts/main.js

@@ -1,57 +1,57 @@
----
----
-
-/*!
- * Basically Basic Jekyll Theme 1.0.1
- * Copyright 2017 Michael Rose - mademistakes | @mmistakes
- * Free for personal and commercial use under the MIT license
- * https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE.md
-*/
-
-// Animate sidebar menu items
-var menuItems = document.querySelectorAll('#sidebar li');
-
-// Get vendor transition property
-var docElemStyle = document.documentElement.style;
-var transitionProp = typeof docElemStyle.transition == 'string' ?
-    'transition' : 'WebkitTransition';
-
-function animateMenuItems() {
-  for ( var i=0; i < menuItems.length; i++ ) {
-    var item = menuItems[i];
-    // Stagger transition with transitionDelay
-    item.style[ transitionProp + 'Delay' ] = ( i * 75 ) + 'ms';
-    item.classList.toggle('is--moved');
-  }
-};
-
-// Toggle sidebar visibility
-function toggleClassMenu() {
-  myMenu.classList.add('is--animatable');
-  if(!myMenu.classList.contains('is--visible')) {
-    myMenu.classList.add('is--visible');
-    myToggle.classList.add('open');
-    myWrapper.classList.add('is--pushed');
-  } else {
-    myMenu.classList.remove('is--visible');
-    myToggle.classList.remove('open');
-    myWrapper.classList.remove('is--pushed');
-  }
-}
-
-function OnTransitionEnd() {
-  myMenu.classList.remove('is--animatable');
-}
-
-var myWrapper = document.querySelector('.wrapper');
-var myMenu = document.querySelector('.sidebar');
-var myToggle = document.querySelector('.toggle');
-myMenu.addEventListener('transitionend', OnTransitionEnd, false);
-myToggle.addEventListener('click', function() {
-  toggleClassMenu();
-  animateMenuItems();
-}, false);
-myMenu.addEventListener('click', function() {
-  toggleClassMenu();
-  animateMenuItems();
-}, false);
+---
+---
+
+/*!
+ * Basically Basic Jekyll Theme 1.1.0
+ * Copyright 2017 Michael Rose - mademistakes | @mmistakes
+ * Free for personal and commercial use under the MIT license
+ * https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE.md
+*/
+
+// Animate sidebar menu items
+var menuItems = document.querySelectorAll('#sidebar li');
+
+// Get vendor transition property
+var docElemStyle = document.documentElement.style;
+var transitionProp = typeof docElemStyle.transition == 'string' ?
+    'transition' : 'WebkitTransition';
+
+function animateMenuItems() {
+  for ( var i=0; i < menuItems.length; i++ ) {
+    var item = menuItems[i];
+    // Stagger transition with transitionDelay
+    item.style[ transitionProp + 'Delay' ] = ( i * 75 ) + 'ms';
+    item.classList.toggle('is--moved');
+  }
+};
+
+// Toggle sidebar visibility
+function toggleClassMenu() {
+  myMenu.classList.add('is--animatable');
+  if(!myMenu.classList.contains('is--visible')) {
+    myMenu.classList.add('is--visible');
+    myToggle.classList.add('open');
+    myWrapper.classList.add('is--pushed');
+  } else {
+    myMenu.classList.remove('is--visible');
+    myToggle.classList.remove('open');
+    myWrapper.classList.remove('is--pushed');
+  }
+}
+
+function OnTransitionEnd() {
+  myMenu.classList.remove('is--animatable');
+}
+
+var myWrapper = document.querySelector('.wrapper');
+var myMenu = document.querySelector('.sidebar');
+var myToggle = document.querySelector('.toggle');
+myMenu.addEventListener('transitionend', OnTransitionEnd, false);
+myToggle.addEventListener('click', function() {
+  toggleClassMenu();
+  animateMenuItems();
+}, false);
+myMenu.addEventListener('click', function() {
+  toggleClassMenu();
+  animateMenuItems();
+}, false);