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 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

(limited to 'assets')

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;
     }
-- 
cgit v1.2.3