Improve mobile UX

4 files changed, 149 insertions, 119 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
+}