From e037b7c70f3800a2cd38715ca31cd4cdca71c96e Mon Sep 17 00:00:00 2001
From: tyler71 <4926565+tyler71@users.noreply.github.com>
Date: Mon, 13 Jan 2020 08:44:24 -0800
Subject: mobile toc menu (#121)
* Implement TOC for mobile
* Uses Page title as label
* Label entries so that tapping TOC will hide menu
* Switch to medium breakpoint
* Correct tos -> toc
* toc-menu-control -> toc-control
---
assets/_main.scss | 32 +++++++++++++++++++-------------
layouts/_default/baseof.html | 1 +
layouts/partials/docs/menu.html | 2 +-
layouts/partials/docs/mobile-header.html | 4 +++-
layouts/partials/docs/toc.html | 6 +++++-
5 files changed, 29 insertions(+), 16 deletions(-)
diff --git a/assets/_main.scss b/assets/_main.scss
index 309c691..9553f61 100644
--- a/assets/_main.scss
+++ b/assets/_main.scss
@@ -291,36 +291,42 @@ aside nav,
.book-page,
.markdown {
transition: 0.2s ease-in-out;
- transition-property: transform, margin-left, opacity;
- will-change: transform, margin-left;
+ transition-property: transform, margin, opacity;
+ will-change: transform, margin;
}
@media screen and (max-width: $md-breakpoint) {
- .book-toc {
- display: none;
- }
-}
-
-@media screen and (max-width: $sm-breakpoint) {
.book-menu {
margin-left: -$menu-width;
font-size: $font-size-base;
}
+ .book-toc {
+ margin-right: -$toc-width;
+ font-size: $font-size-base;
+ }
.book-header {
display: flex;
}
- #menu-control:checked + main {
- .book-menu nav,
+
+ #menu-control:checked ~ main {
+ .book-menu #BookMenu,
.book-page {
transform: translateX($menu-width);
}
-
- .book-header label {
+ .markdown {
+ opacity: 0.25;
+ }
+ .book-header #menu-control {
transform: rotate(90deg);
}
-
+ }
+ #toc-control:checked ~ main {
+ aside #TableOfContents,
+ .book-page {
+ transform: translateX(-$menu-width);
+ }
.markdown {
opacity: 0.25;
}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 38630a7..0d28f76 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,6 +7,7 @@
+
diff --git a/layouts/partials/docs/menu.html b/layouts/partials/docs/menu.html
index 6a72ac9..6e41096 100644
--- a/layouts/partials/docs/menu.html
+++ b/layouts/partials/docs/menu.html
@@ -1,4 +1,4 @@
-