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
This commit is contained in:
Michael Rose 2017-03-29 14:55:31 -04:00 committed by GitHub
parent 7127714e4b
commit 79d5dd378c
13 changed files with 77 additions and 115 deletions

View File

@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Google Analytics tracking ID, Disqus comments, to `/docs` demo site. - Google Analytics tracking ID, Disqus comments, to `/docs` demo site.
### Changed ### 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. - Removed tinted background from `<th>` elements.
- Permalink structure of `/docs` demo site. - Permalink structure of `/docs` demo site.

View File

@ -13,16 +13,18 @@
{% include skip-links.html %} {% include skip-links.html %}
<div class="sidebar-toggle-wrapper"> <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> <span class="sidebar-toggle-label">{{ site.data.theme.t.menu | default: 'Menu' }}</span>
<div class="navicon"></div> <div class="navicon"></div>
</a> </button>
</div> </div>
<div class="canvas">
<div class="wrapper"> <div class="wrapper">
{% include masthead.html %} {% include masthead.html %}
{{ content }} {{ content }}
</div> </div>
</div>
<div id="sidebar" class="sidebar"> <div id="sidebar" class="sidebar">
<div class="inner"> <div class="inner">

View File

@ -110,3 +110,9 @@ a {
color: shade($accent-color, 25%); color: shade($accent-color, 25%);
} }
} }
*:focus {
border-color: $accent-color;
outline: none;
box-shadow: 0 0 10px $accent-color;
}

View File

@ -2,16 +2,23 @@
Layout Layout
========================================================================== */ ========================================================================== */
.wrapper { .canvas {
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; position: relative;
z-index: 200; width: 100%;
} overflow: hidden;
}
.wrapper {
position: relative;
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, .intro,

View File

@ -5,8 +5,11 @@
.navicon-button { .navicon-button {
display: inline-block; display: inline-block;
position: relative; position: relative;
padding: 1.8125rem 1rem; margin: 0.90625rem 0;
padding: 0.90625rem 1rem;
transition: $navicon-duration / 2; transition: $navicon-duration / 2;
border: 0;
outline: none;
background-color: $navicon-nav-bg-close; background-color: $navicon-nav-bg-close;
cursor: pointer; cursor: pointer;
-moz-user-select: none; -moz-user-select: none;

View File

@ -7,15 +7,12 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
max-width: $sidebar-width;
height: 100%; height: 100%;
z-index: 150; z-index: 50;
@include breakpoint($sidebar-width) {
width: $sidebar-width;
}
@include breakpoint($large) { @include breakpoint($large) {
width: (1.5 * $sidebar-width); max-width: (1.5 * $sidebar-width);
} }
li { li {
@ -55,46 +52,17 @@
} }
} }
&.is--visible {
transform: translateX(0);
> .inner { > .inner {
transform: none;
}
&.is--animatable > .inner {
transition: all 330ms ease-out;
}
}
&.is--animatable > .inner {
transition: all 130ms ease-in;
}
> .inner {
position: relative;
width: 100%; width: 100%;
max-width: $sidebar-width;
height: 100%; height: 100%;
padding: 1.5em; padding: 1.5em;
transform: translateX(-1 * $sidebar-width);
background-color: $sidebar-background-color; background-color: $sidebar-background-color;
z-index: 160;
will-change: transform;
overflow-x: hidden; overflow-x: hidden;
box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
@include breakpoint($medium) { @include breakpoint($medium) {
padding: 3rem; 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 { .menu {

View File

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

View File

@ -13,16 +13,18 @@
{% include skip-links.html %} {% include skip-links.html %}
<div class="sidebar-toggle-wrapper"> <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> <span class="sidebar-toggle-label">{{ site.data.theme.t.menu | default: 'Menu' }}</span>
<div class="navicon"></div> <div class="navicon"></div>
</a> </button>
</div> </div>
<div class="canvas">
<div class="wrapper"> <div class="wrapper">
{% include masthead.html %} {% include masthead.html %}
{{ content }} {{ content }}
</div> </div>
</div>
<div id="sidebar" class="sidebar"> <div id="sidebar" class="sidebar">
<div class="inner"> <div class="inner">

View File

@ -110,3 +110,9 @@ a {
color: shade($accent-color, 25%); color: shade($accent-color, 25%);
} }
} }
*:focus {
border-color: $accent-color;
outline: none;
box-shadow: 0 0 10px $accent-color;
}

View File

@ -2,16 +2,23 @@
Layout Layout
========================================================================== */ ========================================================================== */
.wrapper { .canvas {
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; position: relative;
z-index: 200; width: 100%;
} overflow: hidden;
}
.wrapper {
position: relative;
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, .intro,

View File

@ -5,8 +5,11 @@
.navicon-button { .navicon-button {
display: inline-block; display: inline-block;
position: relative; position: relative;
padding: 1.8125rem 1rem; margin: 0.90625rem 0;
padding: 0.90625rem 1rem;
transition: $navicon-duration / 2; transition: $navicon-duration / 2;
border: 0;
outline: none;
background-color: $navicon-nav-bg-close; background-color: $navicon-nav-bg-close;
cursor: pointer; cursor: pointer;
-moz-user-select: none; -moz-user-select: none;

View File

@ -7,15 +7,12 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
max-width: $sidebar-width;
height: 100%; height: 100%;
z-index: 150; z-index: 50;
@include breakpoint($sidebar-width) {
width: $sidebar-width;
}
@include breakpoint($large) { @include breakpoint($large) {
width: (1.5 * $sidebar-width); max-width: (1.5 * $sidebar-width);
} }
li { li {
@ -55,46 +52,17 @@
} }
} }
&.is--visible {
transform: translateX(0);
> .inner { > .inner {
transform: none;
}
&.is--animatable > .inner {
transition: all 330ms ease-out;
}
}
&.is--animatable > .inner {
transition: all 130ms ease-in;
}
> .inner {
position: relative;
width: 100%; width: 100%;
max-width: $sidebar-width;
height: 100%; height: 100%;
padding: 1.5em; padding: 1.5em;
transform: translateX(-1 * $sidebar-width);
background-color: $sidebar-background-color; background-color: $sidebar-background-color;
z-index: 160;
will-change: transform;
overflow-x: hidden; overflow-x: hidden;
box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
@include breakpoint($medium) { @include breakpoint($medium) {
padding: 3rem; 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 { .menu {

View File

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