Improve mobile UX

assets/_markdown.scss

@@ -3,8 +3,11 @@
 $block-border-radius: 0.15rem;
 
 .markdown {
+  line-height: 1.5;
+
   h1, h2, h3, h4, h5 {
     font-weight: 400;
+    line-height: 1.25;
   }
 
   b, optgroup, strong {
@@ -44,4 +47,8 @@ $block-border-radius: 0.15rem;
     :first-child { margin-top: 0; }
     :last-child { margin-bottom: 0; }
   }
+
+  table tr td {
+    padding: $padding-8;
+  }
 }

assets/_pure-extension.scss

@@ -8,38 +8,12 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
 .pure-g {
   [class *= "pure-u"] {
     box-sizing: border-box;
+    padding: $padding-16;
   }
 }
 
-.pure-u {
+@media screen and (max-width:64em) {
-  flex-grow: 1;
+  .pure-hidden-md {
-  width: 0;
+    display: none;
-}
-
-.pure-menu-list ul ul {
-  // left padding for nested sections
-  padding-left: $padding-16;
-}
-
-.pure-menu-root {
-  // vertical space between root sections
-  > li {
-    padding-bottom: $padding-16;
-  }
-  
-  // font weight only for root sections
-  > li > .section {
-    font-weight: 700;
-  }
-}
-
-.pure-menu-link, .pure-menu-heading {
-  padding: $padding-4 $padding-16;
-  text-transform: capitalize;
-}
-
-.pure-menu-link {
-  &:hover, &.active {
-    background: none;
   }
 }

assets/_variables.scss

@@ -1,4 +1,4 @@
-$padding-1: 1px; //minimal
+$padding-1: 1px;
 $padding-4: .25rem;
 $padding-8: .5rem;
 $padding-16: 1rem;
@@ -8,10 +8,6 @@ $font-size-12: .75rem;
 $font-size-14: .875rem;
 $font-size-16: 1rem;
 
-$size-48: 3rem;
-// $size-56: 3.5rem;
-// $size-72: 4.5rem;
-
 // Grayscale
 $white:    #fff;
 $gray-100: #f8f9fa;
@@ -28,17 +24,42 @@ $black:    #000;
 $color-link: #1177EE;
 $color-visited-link: #7823c9;
 
-
+$body-background: white;
-$body-background: none;
 $body-font-color: $gray-800;
 $body-font-weight: 300;
-$body-line-height: 1.75;
 $body-min-width: 25rem;
 
-$nav-background: $gray-100;
+$nav-background: $body-background; //$gray-100;
 $nav-link-color: $gray-800;
-$nav-menu-width: 18rem;
+
+$header-height: 3.5rem;
+$nav-menu-width: 16rem;
 $toc-menu-width: 14rem;
 
 $content-max-width: 64rem;
 $content-min-width: $body-min-width;
+
+
+// Mixins
+@mixin shadow {
+  box-shadow: 0 0 $padding-8 rgba(0,0,0,0.1);
+}
+
+@mixin ul {
+  ul {
+    list-style: none;
+    padding-left: $padding-16;
+
+    li {
+      line-height: $padding-16;
+
+      a {
+        display: block;
+      }
+
+      img {
+        height: $padding-16;
+      }
+    }
+  }
+}

assets/styles.scss

@@ -15,128 +15,156 @@ html, body {
 body {
   color: $body-font-color;
   background: $body-background;
-  line-height: $body-line-height;
 }
 
 a {
   text-decoration: none;
   color: $color-link;
-}
 
-.book-brand {
+  &:visited {
-  padding: 0 $padding-16;
+    color: $color-visited-link;
-  margin-bottom: $padding-8;
-  font-weight: 400;
-
-  a {
-    color: $body-font-color;
   }
 }
 
-// Navigation styles
+ul {
-.book-nav {
+  margin: 0;
-  flex-grow: 0;
+  padding-left: $padding-16;
-  width: $nav-menu-width;
+  line-height: $padding-16 * 2;
 
-  nav {
+  li {
+    
+    a {
+      display: block;
+    }
+
+    img {
+      height: $padding-16;
+    }
+  }
+}
+
+.header {
+  position: fixed;
+  width: 100%;
+  height: $header-height;
+  padding: $padding-16;
+  top: 0;
+  box-sizing: border-box;
+  z-index: 1;
+
+  background: $body-background;
+  @include shadow;
+  
+  display: flex;
+  align-items: center;
+
+  label {
+    line-height: 0;
+    margin-right: $padding-16;
+    display: none;
+  }
+
+  h3 {
+    font-weight: 400;
+    line-height: 1.5rem;
+    margin: 0;
+
+    a {
+      color: $nav-link-color;
+    }
+  }
+}
+
+.menu {
   position: fixed;
-    height: 100%;
   width: $nav-menu-width;
+  top: $header-height;
+  bottom: 0;
+  box-sizing: border-box;
+  padding: $padding-16;
+
+  background: $nav-background;
 
   overflow-x: hidden;
   overflow-y: auto;
 
+  transition: transform 0.3s ease-in-out;
+  will-change: transform;
+
   font-size: $font-size-14;
-    background: $nav-background;
+  line-height: 2rem;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding-left: $padding-16;
-
-    li {
-      line-height: $padding-16 * 2;
-    }
 
   a {
     display: block;
     color: $nav-link-color;
-      text-transform: capitalize;
-    
-      &[href]:hover {
-        opacity: 0.5;
-      }
 
     &.active {
       color: $color-link;
     }
   }
+
+  ul {
+    list-style: none;
   }
 
-  // class used for sections with bookRootSection: true
+  // No padding for first level
-  .book-nav-section {
+  > ul {
+    padding: 0;
+  }
+
+  // Move content
+  + div {
+    margin-left: $nav-menu-width;
+    margin-top: $header-height;
+  }
+
+  .root-section {
     margin-bottom: $padding-16;
     > a { font-weight: 600; }
     > ul { padding-left: 0; }
   }
 }
 
-.book-content {
+.content {
+  margin: 0 auto;
   max-width: $content-max-width;
   min-width: $content-min-width;
-  margin: 0 auto;
 
-  .book-page {
+  .page {
-    padding: $padding-16 $size-48;
+    overflow: hidden;
   }
 
-  a:visited {
+  .toc {
-    color: $color-visited-link
-  }
-}
-
-// Table of Contents styles
-.book-toc {
-  flex-grow: 0;
-  width: $toc-menu-width;
-
-  nav {
-    position: fixed;
-    height: 100%;
-    width: $toc-menu-width;
-
-    overflow-x: hidden;
-    overflow-y: auto;
-
     font-size: $font-size-12;
 
-    > ul {
+    nav > ul {
-      margin: $size-48 0;
+      border-left: $padding-1 solid $gray-100;
-      padding: 0 $padding-8;
-      border-left: $padding-1 solid $gray-200;
-    }
     }
 
     ul {
-    padding-left: $padding-8;
       list-style: none;
-  }
+      padding-left: $padding-8;
-
+      line-height: $padding-16 * 1.5;
-  a {
-    line-height: 1.25;
-    padding: $padding-4 0;
-    display: block;
-
-    img {
-      max-height: $font-size-16;
     }
   }
 }
 
-// Print styles
+// Mobile styles
-@media print {
+@media screen and (max-width: 50rem) {
-  .book-nav, .book-toc {
+  .header label {
-    display: none;
+    display: inline-block;
+  }
+
+  .menu {
+    transform: translateX(-$nav-menu-width);
+
+    + div {
+      margin-left: 0;
+    }
+  }
+
+  #nav-control:checked + nav {
+    @include shadow;
+    transform: translateX(0);
   }
 }

layouts/docs/baseof.html

@@ -7,11 +7,12 @@
 </head>
 
 <body>
-  <div class="pure-g">
+  <div class="header">
+    {{ partial "docs/header" . }}
+  </div>
   
-    <div class="pure-u book-nav">
+  <input type="checkbox" style="display: none" id="nav-control" />
-      <nav role="navigation">
+  <nav role="navigation" class="menu">
-        {{ partial "docs/nav-brand" . }}
     {{ partial "docs/inject/nav-before" . }}
     
     {{ if .Site.Params.BookMenuBundle }}
@@ -22,24 +23,23 @@
   
     {{ partial "docs/inject/nav-after" . }}
   </nav>
-    </div>
-    <div class="pure-u book-content">
-      <div class="pure-g">
 
-        <div class="pure-u book-page markdown">
+  <div>
+    
+    <div class="pure-g content">
+      <div class="pure-u-1 pure-u-lg-2-3 page markdown">
         {{- .Content -}}
       </div>
       {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }}
       {{ if and ($showToC) (.Page.TableOfContents) }}
-        <div class="pure-u book-toc">
+      <div class="pure-u-1 pure-u-lg-1-3 pure-hidden-md toc">
         {{ partial "docs/toc" . }}
       </div>
       {{ end }}
-
-      </div>
     </div>
 
   </div>
+
   {{ partial "docs/inject/body" . }}
 </body>
 </html>

layouts/partials/docs/header.html

@@ -0,0 +1,6 @@
+<label for="nav-control">
+  <img src="/svg/menu.svg" />
+</label>
+<h3>
+  <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+</h3>

layouts/partials/docs/html-head.html

@@ -3,8 +3,10 @@
 <title>{{- template "title" .  }} | {{ .Site.Title -}}</title>
 
 <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700" rel="stylesheet">
-<link href="/css/pure-min.css" rel="stylesheet">
+<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
-<!-- <link href="/css/grids-responsive-min.css" rel="stylesheet"> -->
+<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-min.css">
+<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
+
 
 {{ $styles := resources.Get "styles.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
 <link rel="stylesheet" href="{{ $styles.Permalink }}">

layouts/partials/docs/nav-filetree.html

@@ -8,7 +8,7 @@
 {{ define "book-section" }} <!-- Single section of menu (recursive) -->
   <ul>
     {{ range .Section.Sections }}
-    <li>
+    <li {{- if .Params.bookrootsection}} class="root-section" {{ end }}>
       {{- if .Content -}}
         {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
       {{- else -}}

static/svg/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

static/svg/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>