Add README.md

assets/_pure-extension.scss

@@ -1,9 +1,8 @@
 @import 'variables';
 
 html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
-  font-family: "Open Sans", "Roboto", sans-serif;
-  font-weight: 300;
-  
+  font-family: Roboto, sans-serif;
+  font-weight: $body-font-weight;
 }
 
 .pure-g {
@@ -30,12 +29,11 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
   
   // font weight only for root sections
   > li > .section {
-    font-weight: 600;
+    font-weight: 700;
   }
 }
 
 .pure-menu-link, .pure-menu-heading {
-  color: $gray-800;
   padding: $padding-4 $padding-16;
   text-transform: capitalize;
 }
@@ -44,12 +42,4 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
   &:hover, &.active {
     background: none;
   }
-
-  &:hover {
-    color: $gray-600;
-  }
-
-  &.active {
-    color: $color-link;
-  }
 }

assets/_variables.scss

@@ -9,8 +9,8 @@ $font-size-14: .875rem;
 $font-size-16: 1rem;
 
 $size-48: 3rem;
-$size-56: 3.5rem;
-$size-72: 4.5rem;
+// $size-56: 3.5rem;
+// $size-72: 4.5rem;
 
 // Grayscale
 $white:    #fff;
@@ -28,9 +28,17 @@ $black:    #000;
 $color-link: #1177EE;
 $color-visited-link: #7823c9;
 
+
+$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-link-color: $gray-800;
+$nav-menu-width: 18rem;
+$toc-menu-width: 14rem;
+
 $content-max-width: 64rem;
 $content-min-width: $body-min-width;
-$nav-menu-width: 18rem;
-$toc-menu-width: 14rem;

assets/styles.scss

@@ -13,7 +13,8 @@ html, body {
 }
 
 body {
-  color: $gray-800;
+  color: $body-font-color;
+  background: $body-background;
   line-height: $body-line-height;
 }
 
@@ -24,7 +25,12 @@ a {
 
 .book-brand {
   padding: 0 $padding-16;
-  font-weight: 300;
+  font-weight: 400;
+
+  a {
+    padding: 0 $padding-16;
+    color: $body-font-color;
+  }
 }
 
 // Navigation styles
@@ -41,26 +47,26 @@ a {
     overflow-y: auto;
 
     font-size: $font-size-14;
-    background: $gray-100;
+    background: $nav-background;
   }
 
   ul {
     list-style: none;
     padding-left: $padding-16;
-  }
 
-  a {
-    display: block;
-    color: $gray-800;
-    padding: $padding-4 $padding-16;
-    text-transform: capitalize;
-  
-    &[href]:hover {
-      color: $gray-600;
-    }
-  
-    &.active {
-      color: $color-link;
+    a {
+      display: block;
+      color: $nav-link-color;
+      padding: $padding-4 $padding-16;
+      text-transform: capitalize;
+    
+      &[href]:hover {
+        opacity: 0.5;
+      }
+    
+      &.active {
+        color: $color-link;
+      }
     }
   }
 
@@ -126,5 +132,7 @@ a {
 
 // Print styles
 @media print {
-  
+  .book-nav, .book-toc {
+    display: none;
+  }
 }