'));
-
-
- popup.insertAfter(this);
-
- $('.theme').click(function(){
- var theme = $(this).attr('id');
- set_theme(theme);
- });
+ showThemes();
}
});
+ $('.theme').click(function(){
+ var theme = $(this).attr('id');
+ set_theme(theme);
+ });
+
// Hide theme selector popup when clicking outside of it
$(document).click(function(event){
var popup = $('.theme-popup');
- if(popup.length) {
+ if(popup.css('display') === 'block') {
var target = $(event.target);
if(!target.closest('.theme').length && !target.closest('#theme-toggle').length) {
- popup.remove();
+ hideThemes();
}
}
});
@@ -375,7 +378,7 @@ function sidebarToggle() {
} else if (html.hasClass("sidebar-visible")) {
hideSidebar();
} else {
- if ($("#sidebar").position().left === 0){
+ if (getComputedStyle($('#sidebar')[0])['transform'] === 'none'){
hideSidebar();
} else {
showSidebar();
@@ -385,11 +388,17 @@ function sidebarToggle() {
function showSidebar() {
$('html').removeClass('sidebar-hidden').addClass('sidebar-visible');
+ $('#sidebar a').attr('tabIndex', 0);
+ $('#sidebar-toggle').attr('aria-expanded', true);
+ $('#sidebar').attr('aria-hidden', false);
store.set('mdbook-sidebar', 'visible');
}
function hideSidebar() {
$('html').removeClass('sidebar-visible').addClass('sidebar-hidden');
+ $('#sidebar a').attr('tabIndex', -1);
+ $('#sidebar-toggle').attr('aria-expanded', false);
+ $('#sidebar').attr('aria-hidden', true);
store.set('mdbook-sidebar', 'hidden');
}
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index a44bd10c..634bf9a0 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -68,22 +68,29 @@
$("html").addClass("sidebar-" + sidebar);
-
+
-
+
{{> header}}
-
- {{{ content }}}
+
+
-
+
+
+ {{{ content }}}
+
+
+
+
- {{#previous}}
-
-
-
- {{/previous}}
+
diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl
index ee4bfcb2..65ec4fba 100644
--- a/src/theme/stylus/menu.styl
+++ b/src/theme/stylus/menu.styl
@@ -1,6 +1,7 @@
.menu-bar {
position: relative
- height: 50px
+ display: flex
+ flex-wrap: wrap
i, .icon-button {
position: relative
@@ -12,9 +13,6 @@
&:hover { cursor: pointer }
}
-
- .left-buttons { float: left }
- .right-buttons { float: right }
}
.menu-title {
@@ -22,13 +20,12 @@
font-weight: 200
font-size: 20px
line-height: 50px
- position: absolute
- top: 0
- left: 0
- right: 0
- bottom: 0
text-align: center
margin: 0
+ flex: 1
+ white-space: nowrap
+ overflow: hidden
+ text-overflow: ellipsis
opacity: 0
transition: opacity 0.5s ease-in-out
diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl
index d756a8f8..5d967a54 100644
--- a/src/theme/stylus/nav-icons.styl
+++ b/src/theme/stylus/nav-icons.styl
@@ -43,13 +43,13 @@
}
@media only screen and (max-width: $page-plus-sidebar-width) {
- .nav-chapters { display: none }
+ .nav-wide-wrapper { display: none }
.nav-wrapper { display: block }
}
@media only screen and (max-width: $page-plus-sidebar-width + $sidebar-width) {
.sidebar-visible {
- .nav-chapters { display: none }
+ .nav-wide-wrapper { display: none }
.nav-wrapper { display: block }
}
}
diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl
index 8ba72245..c95989c2 100644
--- a/src/theme/stylus/page.styl
+++ b/src/theme/stylus/page.styl
@@ -3,9 +3,6 @@
.page-wrapper {
box-sizing: border-box
- min-height: 100%
- width: 100%
-
// Animation: slide away
transition: padding-left 0.5s, margin-left 0.5s
}
diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl
index a3a15b37..2cacd0e2 100644
--- a/src/theme/stylus/sidebar.styl
+++ b/src/theme/stylus/sidebar.styl
@@ -13,7 +13,7 @@
-webkit-overflow-scrolling: touch
// Animation: slide away
- transition: left 0.5s
+ transition: transform 0.5s
code {
line-height: 2em;
@@ -21,7 +21,7 @@
}
.sidebar-hidden .sidebar {
- left: - $sidebar-width
+ transform: translateX(- $sidebar-width)
}
.chapter {
@@ -30,6 +30,7 @@
line-height: 2.2em
li a {
+ display: block;
padding: 5px 0
text-decoration: none
diff --git a/src/theme/stylus/theme-popup.styl b/src/theme/stylus/theme-popup.styl
index fc51bc35..b0c956e6 100644
--- a/src/theme/stylus/theme-popup.styl
+++ b/src/theme/stylus/theme-popup.styl
@@ -8,11 +8,18 @@
font-size: 0.7em
.theme {
+ display: inline
+ border: 0
margin: 0
padding: 2px 10px
line-height: 25px
+ width: 100%
white-space: nowrap
+ text-align: left
cursor: pointer
+ color inherit
+ background: inherit;
+ font-size: inherit;
&:hover:first-child,
&:hover:last-child {
diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl
index 8f308d5e..727a9abd 100644
--- a/src/theme/stylus/themes/base.styl
+++ b/src/theme/stylus/themes/base.styl
@@ -67,6 +67,10 @@
color: $fg
background: $theme-popup-bg
border: 1px solid $theme-popup-border
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: none;
.theme:hover { background-color: $theme-hover }