diff --git a/.scss-lint.yml b/.scss-lint.yml index c5f662a..451e3fa 100644 --- a/.scss-lint.yml +++ b/.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 diff --git a/CHANGELOG.md b/CHANGELOG.md index 489a351..12126f9 100644 --- a/CHANGELOG.md +++ b/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 `` 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) diff --git a/_sass/basically-basic/_global.scss b/_sass/basically-basic/_global.scss index abb3f50..b8b0e58 100644 --- a/_sass/basically-basic/_global.scss +++ b/_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; diff --git a/_sass/basically-basic/_layout.scss b/_sass/basically-basic/_layout.scss index 79c0996..6a0bcec 100644 --- a/_sass/basically-basic/_layout.scss +++ b/_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; } } diff --git a/_sass/basically-basic/_navigation.scss b/_sass/basically-basic/_navigation.scss index 4e52b2d..380c6c1 100644 --- a/_sass/basically-basic/_navigation.scss +++ b/_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; diff --git a/_sass/basically-basic/_sidebar.scss b/_sass/basically-basic/_sidebar.scss index 7590b93..aac84a7 100644 --- a/_sass/basically-basic/_sidebar.scss +++ b/_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 */ - &::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; + @include breakpoint($sidebar-width) { + width: $sidebar-width; + } + + @include breakpoint($large) { + width: (1.5 * $sidebar-width); } 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; diff --git a/_sass/basically-basic/_tables.scss b/_sass/basically-basic/_tables.scss index 68ac1c9..5ae7b3d 100644 --- a/_sass/basically-basic/_tables.scss +++ b/_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; diff --git a/_sass/basically-basic/utilities/_align.scss b/_sass/basically-basic/utilities/_align.scss index 6c1156e..4ab45db 100644 --- a/_sass/basically-basic/utilities/_align.scss +++ b/_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); } }