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
GitHub
parent
7127714e4b
commit
79d5dd378c
|
|
@ -10,7 +10,7 @@ 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)
|
||||
- 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.
|
||||
- Permalink structure of `/docs` demo site.
|
||||
|
||||
|
|
|
|||
|
|
@ -13,15 +13,17 @@
|
|||
{% include skip-links.html %}
|
||||
|
||||
<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>
|
||||
<div class="navicon"></div>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
{% include masthead.html %}
|
||||
{{ content }}
|
||||
<div class="canvas">
|
||||
<div class="wrapper">
|
||||
{% include masthead.html %}
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar" class="sidebar">
|
||||
|
|
|
|||
|
|
@ -110,3 +110,9 @@ a {
|
|||
color: shade($accent-color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
*:focus {
|
||||
border-color: $accent-color;
|
||||
outline: none;
|
||||
box-shadow: 0 0 10px $accent-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,23 @@
|
|||
Layout
|
||||
========================================================================== */
|
||||
|
||||
.wrapper {
|
||||
.canvas {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
transition: $global-transition;
|
||||
box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@include breakpoint($medium) {
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
}
|
||||
.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,
|
||||
|
|
|
|||
|
|
@ -5,8 +5,11 @@
|
|||
.navicon-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 1.8125rem 1rem;
|
||||
margin: 0.90625rem 0;
|
||||
padding: 0.90625rem 1rem;
|
||||
transition: $navicon-duration / 2;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background-color: $navicon-nav-bg-close;
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,12 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: $sidebar-width;
|
||||
height: 100%;
|
||||
z-index: 150;
|
||||
|
||||
@include breakpoint($sidebar-width) {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
z-index: 50;
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: (1.5 * $sidebar-width);
|
||||
max-width: (1.5 * $sidebar-width);
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -55,46 +52,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.is--visible {
|
||||
transform: translateX(0);
|
||||
|
||||
> .inner {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.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;
|
||||
z-index: 160;
|
||||
will-change: transform;
|
||||
overflow-x: hidden;
|
||||
box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
|
|
|||
|
|
@ -53,15 +53,10 @@ a img.align-left {
|
|||
========================================================================== */
|
||||
|
||||
.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) {
|
||||
width: calc(100% - (1.5 * #{$sidebar-width}));
|
||||
transform: translateX(1.5 * $sidebar-width);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,15 +13,17 @@
|
|||
{% include skip-links.html %}
|
||||
|
||||
<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>
|
||||
<div class="navicon"></div>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
{% include masthead.html %}
|
||||
{{ content }}
|
||||
<div class="canvas">
|
||||
<div class="wrapper">
|
||||
{% include masthead.html %}
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar" class="sidebar">
|
||||
|
|
|
|||
|
|
@ -110,3 +110,9 @@ a {
|
|||
color: shade($accent-color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
*:focus {
|
||||
border-color: $accent-color;
|
||||
outline: none;
|
||||
box-shadow: 0 0 10px $accent-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,23 @@
|
|||
Layout
|
||||
========================================================================== */
|
||||
|
||||
.wrapper {
|
||||
.canvas {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
transition: $global-transition;
|
||||
box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@include breakpoint($medium) {
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
}
|
||||
.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,
|
||||
|
|
|
|||
|
|
@ -5,8 +5,11 @@
|
|||
.navicon-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 1.8125rem 1rem;
|
||||
margin: 0.90625rem 0;
|
||||
padding: 0.90625rem 1rem;
|
||||
transition: $navicon-duration / 2;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background-color: $navicon-nav-bg-close;
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,12 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: $sidebar-width;
|
||||
height: 100%;
|
||||
z-index: 150;
|
||||
|
||||
@include breakpoint($sidebar-width) {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
z-index: 50;
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: (1.5 * $sidebar-width);
|
||||
max-width: (1.5 * $sidebar-width);
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -55,46 +52,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.is--visible {
|
||||
transform: translateX(0);
|
||||
|
||||
> .inner {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.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;
|
||||
z-index: 160;
|
||||
will-change: transform;
|
||||
overflow-x: hidden;
|
||||
box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
|
|
|||
|
|
@ -53,15 +53,10 @@ a img.align-left {
|
|||
========================================================================== */
|
||||
|
||||
.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) {
|
||||
width: calc(100% - (1.5 * #{$sidebar-width}));
|
||||
transform: translateX(1.5 * $sidebar-width);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue