Add docs

Author: jacwright

_includes/header.html

@@ -15,8 +15,8 @@
 
       <div class="trigger">
         {% for page in site.pages %}
-          {% if page.title %}
-          <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+          {% if page.menuTitle %}
+          <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.menuTitle }}</a>
           {% endif %}
         {% endfor %}
       </div>

_sass/_base.scss

@@ -128,20 +128,25 @@ blockquote {
  */
 pre,
 code {
-    font-size: 90%;
+    font-size: 85%;
     border: 1px solid $grey-color-light;
     border-radius: 3px;
     background-color: #eef;
     font-family: $code-font-family;
 }
 
+pre code {
+    background-color: transparent;
+}
+
 code {
     padding: 2px 5px;
 }
 
 pre {
     padding: 8px 12px;
     overflow-x: scroll;
+    line-height: 1em;
 
     > code {
         border: 0;

_sass/_layout.scss

@@ -197,10 +197,11 @@
     margin-bottom: $spacing-unit;
 }
 
-.post-title {
+h1, .post-title {
     font-size: 42px;
     letter-spacing: -1px;
     line-height: 1;
+    margin-bottom: $spacing-unit;
 
     @include media-query($on-laptop) {
         font-size: 36px;

about.md

@@ -1,6 +1,7 @@
 ---
 layout: page
-title: About
+title: About Chip
+menuTitle: About
 permalink: /about/
 ---
 

css/main.scss

@@ -15,11 +15,11 @@ $spacing-unit:     30px;
 
 $text-color:       #242B34;
 $header-color:     #475363;
-$background-color: #fdfdfd;
+$background-color: #f6f6f6;
 $brand-color:      #DF8138;
 
 $grey-color:       #828282;
-$grey-color-light: lighten($grey-color, 40%);
+$grey-color-light: lighten($grey-color, 35%);
 $grey-color-dark:  darken($grey-color, 25%);
 
 // Width of the content area

docs/index.md

@@ -0,0 +1,50 @@
+---
+layout: page
+menuTitle: Docs
+title: Chip Documentation
+---
+
+## Getting Started
+
+
+
+## Many Modules
+
+Chip is made up of many smaller modules. These modules are created such that you could roll your own framework if you
+wanted to. But the real benefit is that each module is focused on one specific job.
+
+* **[chip-js](chip-js/)** A powerful JavaScript framework
+
+* **[fragments-js](fragments-js/)** An ultra-fast templating and data-binding library for front-end JavaScript
+  applications.
+
+* **[observations-js](observations-js/)** Observes simplified JavaScript expressions and triggers callbacks when the
+  returned value changes.
+
+* **[expressions-js](expressions-js/)** Converts simplified JavaScript expressions into executable functions for
+  JavaScript frameworks.
+
+* **[differences-js](differences-js/)** Checks if there are any differences between two objects and provides the
+  difference.
+
+* **[built-ins](built-ins/)** Built in binders, formatters, and animations for fragments.js-based frameworks.
+
+* **[routes-js](routes-js/)** A little standalone routing library, used in chip.js
+
+* **[chip-utils](chip-utils/)** A few basic utilities for use within chip-supported libraries.
+
+```
+chip-js
+  │
+  ├──fragments-js
+  │    │
+  │    └──observations-js
+  │         │
+  │         ├──expressions-js
+  │         │
+  │         └──differences-js
+  │
+  ├──built-ins
+  │
+  └──routes-js
+```