Initial commit

assets/markdown.scss

@@ -0,0 +1,39 @@
+@import 'variables';
+
+$block-border-radius: 0.15rem;
+
+.markdown {
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  code {
+    font-family: 'Roboto Mono', monospace;
+  }
+
+  p code {
+    padding: $padding-1 $padding-4;
+    background: $gray-100;
+    border-radius: $block-border-radius;
+  }
+
+  pre {
+    padding: $padding-16;
+    background: $gray-100;
+    border-radius: $block-border-radius;
+    font-size: $font-size-14;
+  }
+
+  blockquote {
+    border-left: $padding-1*2 solid $gray-300;
+    margin: 0;
+    padding: $padding-1 $padding-16;
+
+    :first-child { margin-top: 0; }
+    :last-child { margin-bottom: 0; }
+  }
+}

assets/pure-extension.scss

@@ -0,0 +1,55 @@
+@import 'variables';
+
+html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
+  font-family: "Open Sans", "Roboto", sans-serif;
+  font-weight: 300;
+  
+}
+
+.pure-g {
+  [class *= "pure-u"] {
+    box-sizing: border-box;
+  }
+}
+
+.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: 600;
+  }
+}
+
+.pure-menu-link, .pure-menu-heading {
+  color: $gray-800;
+  padding: $padding-4 $padding-16;
+  text-transform: capitalize;
+}
+
+.pure-menu-link {
+  &:hover, &.active {
+    background: none;
+  }
+
+  &:hover {
+    color: $gray-600;
+  }
+
+  &.active {
+    color: #1F37E6;
+  }
+}

assets/styles.scss

@@ -0,0 +1,97 @@
+@import 'variables';
+@import 'pure-extension';
+@import 'markdown';
+
+html {
+  font-size: $font-size-base;
+}
+
+html, body {
+  width: 100%;
+  min-height: 100%;
+  min-width: $body-min-width;
+}
+
+body {
+  color: $gray-800;
+  line-height: $body-line-height;
+}
+
+.book-content {
+  max-width: $content-max-width;
+  margin: 0 auto;
+}
+
+.book-page {
+  padding: 0 $size-48;
+}
+
+.book-brand {
+  padding: 0 $padding-16;
+  font-weight: 300;
+
+  a {
+    color: $gray-800;
+    text-decoration: none;
+  }
+}
+
+.book-nav {
+  width: $nav-menu-width;
+  flex-grow: 0;
+
+  nav {
+    position: fixed;
+    height: 100%;
+    width: $nav-menu-width;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    font-size: $font-size-14;
+    background: $gray-100;
+    padding-left: $padding-16;
+  }
+}
+
+.book-toc {
+  flex-grow: 0;
+  width: $toc-menu-width;
+  font-size: $font-size-12;
+
+  nav {
+    position: fixed;
+    height: 100%;
+    width: $toc-menu-width;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    > ul {
+      margin: $size-48 0;
+      padding: 0 $padding-16;
+      border-left: $padding-1 solid $gray-200;
+    }
+  }
+
+  ul {
+    padding-left: $padding-4;
+    list-style: none;
+  }
+
+  a {
+    text-decoration: none;
+    line-height: 1.25;
+    padding: $padding-4 0;
+    display: block;
+
+    img {
+      max-height: $font-size-16;
+    }
+  }
+}
+
+// Print styles
+@media print {
+  
+}

assets/variables.scss

@@ -0,0 +1,36 @@
+$padding-1: 1px; //minimal
+$padding-4: .25rem;
+$padding-8: .5rem;
+$padding-16: 1rem;
+
+$font-size-base: 16px;
+$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;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #868e96;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
+// $color-link: 
+// $color-visited-link: 
+
+
+$body-line-height: 1.75;
+$body-min-width: 25rem;
+$content-max-width: 64rem;
+$nav-menu-width: 18rem;
+$toc-menu-width: 14rem;