fix: hide checkbox inputs on mobile nav

- Fix broken nav layout on small screens - Update baseof template with latest changes from book theme - Hide the in page contents menu on mobile. 2 hambergers is too many. Fixes #997 License: MIT Signed-off-by: Oli Evans <[email protected]>
filecoin-project · Jul 21, 2020 · 18db942 · 18db942
1 parent 38136c4
commit 18db942
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 44 deletions.
diff --git a/assets/_custom.scss b/assets/_custom.scss
@@ -145,45 +145,9 @@ blockquote {
 }
 
 @media screen and (max-width: 56rem) {
-    .book-page {
-        margin-top: 50px;
-    }
-    .book-header {
-        display: block;
-        position: fixed;
-        width: 100%;
-        height: 50px;
-        padding-left: 12px;
-        padding-right: 12px;
-        line-height: 50px;
-        background-color: #090909;
-        z-index: 20;
-        border-bottom: 1px solid #232323;
-        margin-bottom: 0;
-        aside {
-            p {
-                font-size: 12px;
-                font-weight: 700;
-            }
-            i[class^=gg-] {
-                display: inline-block;
-                margin-left: 0;
-                margin-right: 0;
-                vertical-align: text-top;
-                font-size: 10px;
-                transform: scale(0.7);
-            }
-        }
-    }
-    .book-menu nav {
-        z-index: 21;
-    }
-    #toc-control:checked+aside {
-        line-height: 1.15;
-        background-color: #090909;
-        width: 100%;
-        height: auto;
-        position: absolute;
+    // hide in-page contents menu... 2 hamburgers is too much.
+    .book-header label[for="toc-control"] {
+        visibility: hidden;
     }
 }
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,16 +7,17 @@
 </head>
 
 <body dir={{ .Site.Language.LanguageDirection }}>
-  <input type="checkbox" class="hidden" id="menu-control" />
+  <input type="checkbox" class="hidden toggle" id="menu-control" />
+  <input type="checkbox" class="hidden toggle" id="toc-control" />
   <main class="container flex">
-    <header class="book-header">
-      {{ template "header" . }} <!-- Mobile layout header -->
-    </header>
     <aside class="book-menu">
       {{ template "menu" . }} <!-- Left menu Content -->
     </aside>
 
     <div class="book-page">
+      <header class="book-header">
+        {{ template "header" . }} <!-- Mobile layout header -->
+      </header>
 
       {{ partial "docs/inject/content-before" . }}
       {{ template "main" . }} <!-- Page Content -->
@@ -52,7 +53,6 @@
   {{ partial "docs/header" . }}
 
   {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
-    <input type="checkbox" class="hidden" id="toc-control" />
     <aside class="hidden clearfix">
       {{ template "toc" . }}
     </aside>