Fixed sidebar visibility bug

Add `visibility: hidden` to `.sidebar` and toggle it to `visible` when sidebar is in view. Keeps it from showing up when scrolling past the browser's viewport in Safari as well.

Fixes #31
This commit is contained in:
Michael Rose 2017-09-25 10:34:15 -04:00
parent 48d316a6bd
commit c8bfe48830
2 changed files with 11 additions and 1 deletions

View File

@ -8,7 +8,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
## [1.1.2] - 2017-09-14 ## [1.1.2] - 2017-09-14
### Fixed ### Fixed
- `/_sass/_print.scss` to reduce blank pages when printing in Chrome. [#29](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/29) - Adjusted `/_sass/_print.scss` to reduce blank pages when printing in Chrome. [#29](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/29)
- Fixed sidebar visibility bug in Firefox and Safari by adding toggling `visibility: hidden`. [#31](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/31)
## [1.1.1] - 2017-09-06 ## [1.1.1] - 2017-09-06
### Changed ### Changed

View File

@ -10,11 +10,20 @@
max-width: $sidebar-width; max-width: $sidebar-width;
height: 100%; height: 100%;
z-index: 50; z-index: 50;
visibility: hidden;
-webkit-transition: visibility 0s 0.3s;
transition: visibility 0s 0.3s;
@include breakpoint($large) { @include breakpoint($large) {
max-width: (1.5 * $sidebar-width); max-width: (1.5 * $sidebar-width);
} }
&.is--visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
li { li {
transform: translateX(-1rem); transform: translateX(-1rem);
transition: all 0.5s; transition: all 0.5s;