Improve mobile UX

10 files changed, 190 insertions, 150 deletions

diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index 709210a..e2ed12d 100644
--- a/assets/_markdown.scss
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/assets/_pure-extension.scss b/assets/_pure-extension.scss
index 853810a..23fc7f8 100644
--- a/assets/_pure-extension.scss
+++ b/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 {
-  flex-grow: 1;
-  width: 0;
-}
-
-.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;
+@media screen and (max-width:64em) {
+  .pure-hidden-md {
+    display: none;
   }
 }
-
-.pure-menu-link, .pure-menu-heading {
-  padding: $padding-4 $padding-16;
-  text-transform: capitalize;
-}
-
-.pure-menu-link {
-  &:hover, &.active {
-    background: none;
-  }
-}
\ No newline at end of file
diff --git a/assets/_variables.scss b/assets/_variables.scss
index 76d1ea7..b4ed939 100644
--- a/assets/_variables.scss
+++ b/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: none;
+$body-background: white;
 $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;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/styles.scss b/assets/styles.scss
index c36d583..8f88b67 100644
--- a/assets/styles.scss
+++ b/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;
+
+  &:visited {
+    color: $color-visited-link;
+  }
 }
 
-.book-brand {
-  padding: 0 $padding-16;
-  margin-bottom: $padding-8;
-  font-weight: 400;
+ul {
+  margin: 0;
+  padding-left: $padding-16;
+  line-height: $padding-16 * 2;
 
-  a {
-    color: $body-font-color;
+  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;
+    }
   }
 }
 
-// Navigation styles
-.book-nav {
-  flex-grow: 0;
+.menu {
+  position: fixed;
   width: $nav-menu-width;
+  top: $header-height;
+  bottom: 0;
+  box-sizing: border-box;
+  padding: $padding-16;
+
+  background: $nav-background;
 
-  nav {
-    position: fixed;
-    height: 100%;
-    width: $nav-menu-width;
+  overflow-x: hidden;
+  overflow-y: auto;
 
-    overflow-x: hidden;
-    overflow-y: auto;
+  transition: transform 0.3s ease-in-out;
+  will-change: transform;
 
-    font-size: $font-size-14;
-    background: $nav-background;
+  font-size: $font-size-14;
+  line-height: 2rem;
+
+  a {
+    display: block;
+    color: $nav-link-color;
+
+    &.active {
+      color: $color-link;
+    }
   }
 
   ul {
     list-style: none;
-    margin: 0;
-    padding-left: $padding-16;
+  }
 
-    li {
-      line-height: $padding-16 * 2;
-    }
+  // No padding for first level
+  > ul {
+    padding: 0;
+  }
 
-    a {
-      display: block;
-      color: $nav-link-color;
-      text-transform: capitalize;
-    
-      &[href]:hover {
-        opacity: 0.5;
-      }
-    
-      &.active {
-        color: $color-link;
-      }
-    }
+  // Move content
+  + div {
+    margin-left: $nav-menu-width;
+    margin-top: $header-height;
   }
 
-  // class used for sections with bookRootSection: true
-  .book-nav-section {
+  .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 {
-    padding: $padding-16 $size-48;
+  .page {
+    overflow: hidden;
   }
 
-  a:visited {
-    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;
-
+  .toc {
     font-size: $font-size-12;
 
-    > ul {
-      margin: $size-48 0;
-      padding: 0 $padding-8;
-      border-left: $padding-1 solid $gray-200;
+    nav > ul {
+      border-left: $padding-1 solid $gray-100;
+    }
+
+    ul {
+      list-style: none;
+      padding-left: $padding-8;
+      line-height: $padding-16 * 1.5;
     }
   }
+}
 
-  ul {
-    padding-left: $padding-8;
-    list-style: none;
+// Mobile styles
+@media screen and (max-width: 50rem) {
+  .header label {
+    display: inline-block;
   }
 
-  a {
-    line-height: 1.25;
-    padding: $padding-4 0;
-    display: block;
+  .menu {
+    transform: translateX(-$nav-menu-width);
 
-    img {
-      max-height: $font-size-16;
+    + div {
+      margin-left: 0;
     }
   }
-}
 
-// Print styles
-@media print {
-  .book-nav, .book-toc {
-    display: none;
+  #nav-control:checked + nav {
+    @include shadow;
+    transform: translateX(0);
   }
-}
\ No newline at end of file
+}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 3a97228..94f8cd4 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -7,39 +7,39 @@
 </head>
 
 <body>
-  <div class="pure-g">
-
-    <div class="pure-u book-nav">
-      <nav role="navigation">
-        {{ partial "docs/nav-brand" . }}
-        {{ partial "docs/inject/nav-before" . }}
-        
-        {{ if .Site.Params.BookMenuBundle }}
-          {{ partial "docs/nav-bundle" . }}
-        {{ else }}
-          {{ partial "docs/nav-filetree" . }}
-        {{ end }}
-      
-        {{ partial "docs/inject/nav-after" . }}
-      </nav>
-    </div>
-    <div class="pure-u book-content">
-      <div class="pure-g">
-
-        <div class="pure-u book-page markdown">
-          {{- .Content -}}
-        </div>
-        {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }}
-        {{ if and ($showToC) (.Page.TableOfContents) }}
-        <div class="pure-u book-toc">
-          {{ partial "docs/toc" . }}
-        </div>
-        {{ end }}
+  <div class="header">
+    {{ partial "docs/header" . }}
+  </div>
+  
+  <input type="checkbox" style="display: none" id="nav-control" />
+  <nav role="navigation" class="menu">
+    {{ partial "docs/inject/nav-before" . }}
+    
+    {{ if .Site.Params.BookMenuBundle }}
+      {{ partial "docs/nav-bundle" . }}
+    {{ else }}
+      {{ partial "docs/nav-filetree" . }}
+    {{ end }}
+  
+    {{ partial "docs/inject/nav-after" . }}
+  </nav>
 
+  <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-1 pure-u-lg-1-3 pure-hidden-md toc">
+        {{ partial "docs/toc" . }}
       </div>
+      {{ end }}
     </div>
 
   </div>
+
   {{ partial "docs/inject/body" . }}
 </body>
 </html>
\ No newline at end of file
diff --git a/layouts/partials/docs/header.html b/layouts/partials/docs/header.html
new file mode 100644
index 0000000..aab1fcb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/layouts/partials/docs/html-head.html b/layouts/partials/docs/html-head.html
index e77c218..fe09dd0 100644
--- a/layouts/partials/docs/html-head.html
+++ b/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 href="/css/grids-responsive-min.css" rel="stylesheet"> -->
+<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
+<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 }}">
\ No newline at end of file
diff --git a/layouts/partials/docs/nav-filetree.html b/layouts/partials/docs/nav-filetree.html
index 6c2f965..3ec4539 100644
--- a/layouts/partials/docs/nav-filetree.html
+++ b/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 -}}
diff --git a/static/svg/close.svg b/static/svg/close.svg
new file mode 100644
index 0000000..dea8678
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/static/svg/menu.svg b/static/svg/menu.svg
new file mode 100644
index 0000000..770b192
--- /dev/null
+++ b/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>
\ No newline at end of file