reorganizing the docs

Gruntfile.js

@@ -6,9 +6,9 @@ module.exports = function(grunt) {
 
     // Metadata.
     meta: {
-      srcPath: 'lib/',
       distPath:       'dist/',
-      docsPath: 'docs-assets/'
+      docsPath:       'docs/dist/',
+      docsAssetsPath: 'docs/assets/'
     },
     
     banner: '/*\n' +
@@ -27,15 +27,20 @@ module.exports = function(grunt) {
       },
       ratchet: {
         src: [
-          '<%= meta.srcPath %>js/modals.js',
-          '<%= meta.srcPath %>js/popovers.js',
-          '<%= meta.srcPath %>js/push.js',
-          '<%= meta.srcPath %>js/segmented-controllers.js',
-          '<%= meta.srcPath %>js/sliders.js',
-          '<%= meta.srcPath %>js/toggles.js'
+          'js/modals.js',
+          'js/popovers.js',
+          'js/push.js',
+          'js/segmented-controllers.js',
+          'js/sliders.js',
+          'js/toggles.js'
         ],
         dest: '<%= meta.distPath %><%= pkg.name %>.js'
+      },
+      docs: {
+        src: '<%= meta.distPath %><%= pkg.name %>.js',
+        dest: '<%= meta.docsPath %><%= pkg.name %>.js'
       }
+
     },
     
     sass: {
@@ -45,10 +50,13 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss',
-          '<%= meta.docsPath %>/css/docs.css': '<%= meta.srcPath %>sass/docs.scss',
-          '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss',
-          '<%= meta.distPath %>android-theme.css': '<%= meta.srcPath %>sass/theme-android.scss'
+          '<%= meta.distPath %><%= pkg.name %>.css': 'sass/ratchet.scss',
+          '<%= meta.distPath %>ios-theme.css': 'sass/theme-ios.scss',
+          '<%= meta.distPath %>android-theme.css': 'sass/theme-android.scss',
+          '<%= meta.docsAssetsPath %>css/docs.css': 'sass/docs.scss',
+          '<%= meta.docsPath %><%= pkg.name %>.css': 'sass/ratchet.scss',
+          '<%= meta.docsPath %>ios-theme.css': 'sass/theme-ios.scss',
+          '<%= meta.docsPath %>android-theme.css': 'sass/theme-android.scss'
         }
       }
     },

_config.yml

@@ -1,7 +1,12 @@
 name: Ratchet
 authors: Connor Sears, Dave Gamache, and Jacob Thornton
 description: Prototype iPhone apps with simple HTML, CSS, and JS components.
-url: http://maker.github.io/ratchet
 
 pygments:  true
 permalink: pretty
+
+# Server
+source:  ./docs
+port:    4000
+baseurl: /
+url:     http://localhost:4000

dist/ratchet-theme.css

@@ -1,119 +0,0 @@
-/*
- * =====================================================
- * Ratchet v2.0.0
- * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
- * Licensed under http://www.opensource.org/licenses/MIT
- *
- * Designed and built by @connors, @dhg, and @fat.
- * =====================================================
- */
-
-.bar-header-secondary ~ .content {
-  padding-top: 108px;
-}
-
-.bar {
-  background-color: rgba(30, 176, 233, 0.98);
-}
-.bar.bar-standard, .bar.bar-footer-secondary {
-  background-color: rgba(245, 245, 245, 0.98);
-}
-
-.bar-nav {
-  top: 20px;
-  -webkit-box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
-  box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
-}
-
-.bar.bar-header-secondary {
-  top: 64px;
-}
-
-.title {
-  color: #fff;
-}
-
-.tab-label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.tab-item.active .tab-label {
-  color: white;
-}
-
-.btn {
-  color: rgba(0, 0, 0, 0.3);
-  border-color: rgba(0, 0, 0, 0.3);
-}
-.btn:active, .btn.active, .btn.btn-filled {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.btn-primary {
-  color: #1eb0e9;
-  border-color: #1eb0e9;
-}
-.btn-primary:active, .btn-primary.active, .btn-primary.btn-filled {
-  background-color: #1eb0e9;
-}
-
-.btn-positive {
-  color: #34ba15;
-  border-color: #34ba15;
-}
-.btn-positive:active, .btn-positive.active, .btn-positive.btn-filled {
-  background-color: #34ba15;
-}
-
-.btn-negative {
-  color: #e71e1e;
-  border-color: #e71e1e;
-}
-.btn-negative:active, .btn-negative.active, .btn-negative.btn-filled {
-  background-color: #e71e1e;
-}
-
-.bar-title .btn {
-  color: #fff;
-}
-.bar-title .btn:active,
-.bar-title .btn.active,
-.bar-title .btn-prev:active,
-.bar-title .btn-prev.active,
-.bar-title .btn-next:active,
-.bar-title .btn-next.active,
-.bar-title .btn-primary:active,
-.bar-title .btn-primary.active {
-  color: #fff;
-}
-
-.segmented-control {
-  border-color: #1eb0e9;
-}
-.segmented-control li {
-  border-left-color: #1eb0e9;
-}
-.segmented-control li > a {
-  color: #1eb0e9;
-}
-.segmented-control li.active {
-  background-color: #1eb0e9;
-}
-
-.bar-title .segmented-control {
-  border-color: #fff;
-}
-.bar-title .segmented-control li {
-  border-left-color: #fff;
-}
-.bar-title .segmented-control li > a {
-  color: #fff;
-}
-.bar-title .segmented-control li.active {
-  background-color: rgba(255, 255, 255, 0.4);
-}
-
-input[type=search] {
-  color: #555;
-  background-color: rgba(0, 0, 0, 0.1);
-}

docs/_includes/header.html

@@ -7,19 +7,17 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-<link rel="stylesheet" href="{{ page.base_url }}dist/ratchet.css">
-<link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/docs.css">
-<link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/pygments.css">
+<link rel="stylesheet" href="../dist/ratchet.css">
+<link rel="stylesheet" href="../assets/css/docs.css">
+<link rel="stylesheet" href="../assets/css/pygments.css">
 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-114x114.png">
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-72x72.png">
-<link rel="apple-touch-icon-precomposed" sizes="57x57" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-57x57.png">
 
 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
-<script src="{{ page.base_url }}dist/ratchet.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/docs.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/fingerblast.js"></script>
+<script src="../dist/ratchet.js"></script>
+<script src="../assets/js/docs.js"></script>
+<script src="../assets/js/fingerblast.js"></script>
 
 <!-- Typekit -->
 <script type="text/javascript" src="//use.typekit.net/asj6ttm.js"></script>

docs/components.html

@@ -1,7 +1,6 @@
 ---
 layout: default
 title: Components · Ratchet
-base_url: "../"
 ---
 
 <div class="docs-header">

docs/dist/android-theme.css

@@ -0,0 +1,563 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+
+body {
+  font-family: "Roboto", sans-serif;
+  font-size: 18px;
+  line-height: 22px;
+  color: #222222;
+}
+
+a {
+  color: #33b5e5;
+}
+a:active {
+  color: #1a9bcb;
+}
+
+.content {
+  background-color: #f2f2f2;
+}
+
+.bar-nav ~ .content {
+  padding-top: 50px;
+}
+
+.bar-tab ~ .content {
+  padding-bottom: 50px;
+}
+
+.bar-header-secondary ~ .content {
+  padding-top: 100px;
+}
+
+.btn {
+  padding: 8px 15px;
+  font-size: 14px;
+  color: #222222;
+  background-color: #cecece;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.btn:active, .btn.active {
+  color: #222222;
+  border: 0;
+  background-color: #999999;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.btn-primary {
+  color: #fff;
+  border: 0;
+  background-color: #33b5e5;
+}
+.btn-primary:active, .btn-primary.active {
+  color: #fff;
+  border: 0;
+  background-color: #1a9bcb;
+}
+
+.btn-positive {
+  color: #fff;
+  border: 0;
+  background-color: #99cc00;
+}
+.btn-positive:active, .btn-positive.active {
+  color: #fff;
+  border: 0;
+  background-color: #739900;
+}
+
+.btn-negative {
+  color: #fff;
+  border: 0;
+  background-color: #ff4444;
+}
+.btn-negative:active, .btn-negative.active {
+  color: #fff;
+  border: 0;
+  background-color: #ff1111;
+}
+
+.btn-outlined {
+  border: 1px solid #999999;
+  background-color: transparent;
+  box-shadow: none;
+}
+.btn-outlined.btn-primary {
+  border: 1px solid #33b5e5;
+  color: #33b5e5;
+}
+.btn-outlined.btn-primary:active {
+  border: 1px solid #33b5e5;
+  background-color: #33b5e5;
+}
+.btn-outlined.btn-positive {
+  border: 1px solid #99cc00;
+  color: #99cc00;
+}
+.btn-outlined.btn-positive:active {
+  border: 1px solid #99cc00;
+  background-color: #99cc00;
+}
+.btn-outlined.btn-negative {
+  border: 1px solid #ff4444;
+  color: #ff4444;
+}
+.btn-outlined.btn-negative:active {
+  border: 1px solid #ff4444;
+  background-color: #ff4444;
+}
+.btn-outlined:active {
+  border: 1px solid #999999;
+  background-color: #999999;
+  box-shadow: none;
+}
+.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
+  color: #fff;
+  box-shadow: none;
+}
+
+.btn-link {
+  color: #33b5e5;
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+.btn-link:active, .btn-link.active {
+  color: #1a9bcb;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.btn-block {
+  padding: 15px 0;
+  font-size: 18px;
+}
+
+.btn .badge {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+.btn .badge.badge-inverted {
+  background-color: transparent;
+}
+.btn:active .badge {
+  color: #fff;
+}
+
+.bar {
+  height: 50px;
+  background-color: #dddddd;
+  border-bottom: 1px solid #b1b1b1;
+  box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
+}
+.bar.bar-header-secondary {
+  top: 50px;
+}
+.bar.bar-footer-secondary {
+  bottom: 50px;
+}
+.bar.bar-footer-secondary-tab {
+  bottom: 50px;
+}
+
+.bar-tab {
+  top: 0;
+  bottom: auto;
+  height: 50px;
+  border-top: 0;
+}
+.bar-tab .tab-item.active {
+  color: #33b5e5;
+  border-bottom: 2px solid #33b5e5;
+}
+.bar-tab .tab-item:active {
+  color: #929292;
+  background-color: #78c6e3;
+}
+.bar-tab .tab-item .icon {
+  top: 3px;
+  padding: 0;
+}
+
+.title {
+  position: static;
+  padding-left: 15px;
+  font-size: 18px;
+  line-height: 49px;
+  text-align: left;
+}
+
+.bar .btn {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+.bar .btn-link {
+  padding-top: 0;
+  padding-bottom: 0;
+  color: #33b5e5;
+  font-size: 18px;
+  line-height: 49px;
+}
+.bar .btn-link:active, .bar .btn-link.active {
+  color: #1a9bcb;
+}
+.bar .btn-link.pull-left {
+  padding-left: 12px;
+  padding-right: 0;
+}
+.bar .btn-link.pull-right {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.bar-nav .btn {
+  margin-top: 7px;
+}
+.bar-nav .btn-link {
+  margin-top: 0;
+  color: #33b5e5;
+}
+.bar-nav .btn-link:active {
+  color: #33b5e5;
+  opacity: .6;
+}
+.bar-nav .btn-link .icon {
+  top: 2px;
+  padding: 0;
+}
+
+.bar .segmented-control {
+  top: 7px;
+}
+
+.bar .icon {
+  padding-top: 13px;
+  padding-bottom: 13px;
+}
+.bar .title .icon {
+  padding: 0;
+}
+.bar .title .icon.icon-caret {
+  top: 10px;
+  color: #777;
+}
+
+.bar input[type="search"] {
+  height: 35px;
+}
+
+.badge.badge-inverted {
+  color: #999999;
+  background-color: transparent;
+}
+
+.badge-primary {
+  color: #fff;
+  background-color: #33b5e5;
+}
+.badge-primary.badge-inverted {
+  color: #33b5e5;
+  background-color: transparent;
+}
+
+.badge-positive {
+  color: #fff;
+  background-color: #99cc00;
+}
+.badge-positive.badge-inverted {
+  color: #99cc00;
+  background-color: transparent;
+}
+
+.badge-negative {
+  color: #fff;
+  background-color: #ff4444;
+}
+.badge-negative.badge-inverted {
+  color: #ff4444;
+  background-color: transparent;
+}
+
+.card {
+  border-color: #d9d9d9;
+  border-radius: 2px;
+  background-color: transparent;
+}
+
+.table-view {
+  background-color: transparent;
+}
+.table-view .table-view-cell {
+  border-bottom: 1px solid #d9d9d9;
+}
+.table-view .table-view-cell:last-child {
+  background-image: none;
+}
+.table-view .table-view-cell > a:not(.btn):active {
+  background-color: #e0e0e0;
+}
+.table-view .table-view-cell > a:not(.btn):active .icon {
+  color: #fff;
+}
+.table-view .table-view-divider {
+  padding-top: 25px;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  border-top: 0;
+  border-bottom: 2px solid #a9a9a9;
+  background-color: transparent;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="search"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  height: 40px;
+  padding: 10px 15px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+input[type="search"] {
+  border-radius: 2px;
+}
+
+select,
+textarea,
+.input-group {
+  height: auto;
+}
+
+.input-group {
+  padding: 0;
+  border: 0;
+}
+
+.input-group input {
+  border: 0;
+  border-bottom: 1px solid #d9d9d9;
+  box-shadow: none;
+}
+
+.input-group input:last-child {
+  background-image: none;
+}
+
+.input-row {
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.input-row label + input {
+  background-image: none;
+  border-bottom: 0;
+}
+
+.segmented-control {
+  font-size: 14px;
+  background-color: #cecece;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.segmented-control .control-item {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: #222222;
+  border-left: 1px solid #999;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+.segmented-control .control-item:first-child {
+  border-left-width: 0;
+}
+.segmented-control .control-item:active, .segmented-control .control-item.active {
+  background-color: #999999;
+}
+
+.segmented-control-primary {
+  border: 0;
+}
+.segmented-control-primary .control-item {
+  color: #fff;
+  border-color: inherit;
+}
+.segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active {
+  color: #fff;
+  background-color: #33b5e5;
+}
+
+.segmented-control-positive {
+  border: 0;
+}
+.segmented-control-positive .control-item {
+  color: #fff;
+  border-color: inherit;
+}
+.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
+  color: #fff;
+  background-color: #99cc00;
+}
+
+.segmented-control-negative {
+  border: 0;
+}
+.segmented-control-negative .control-item {
+  color: #fff;
+  border-color: inherit;
+}
+.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
+  color: #fff;
+  background-color: #ff4444;
+}
+
+.popover {
+  top: 47px;
+  left: 15px;
+  width: 200px;
+  margin-left: 0;
+  border: 1px solid #9b9b9b;
+  border-radius: 0;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  -webkit-transform: scale(0.75);
+  -ms-transform: scale(0.75);
+  transform: scale(0.75);
+  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+.popover:before {
+  display: none;
+}
+.popover.visible {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.popover .bar {
+  border-radius: 0;
+}
+.popover .bar-nav ~ .table-view {
+  padding-top: 50px;
+}
+
+.popover .table-view {
+  border-radius: 12px;
+}
+
+.toggle {
+  width: 104px;
+  height: 28px;
+  border: 2px solid #d7d7d7;
+  border-radius: 0;
+  background-color: #d7d7d7;
+}
+.toggle .toggle-handle {
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 24px;
+  border: 1px solid #b5b5b5;
+  border-radius: 2px;
+  background-color: #bebebe;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+.toggle:before {
+  top: 1px;
+  right: auto;
+  left: 11px;
+  z-index: 3;
+  color: #fff;
+}
+.toggle.active {
+  border: 2px solid #d7d7d7;
+  background-color: #d7d7d7;
+}
+.toggle.active .toggle-handle {
+  margin-right: 2px;
+  background-color: #33b5e5;
+  border-color: #33b5e5;
+  -webkit-transform: translate3d(50px, 0, 0);
+  -ms-transform: translate3d(50px, 0, 0);
+  transform: translate3d(50px, 0, 0);
+}
+.toggle.active:before {
+  left: auto;
+  right: 14px;
+  color: #fff;
+  content: "On";
+}
+
+.push-left:after {
+  content: '\e803';
+}
+
+.push-right:after {
+  content: '\e806';
+}
+
+.icon-caret:before {
+  content: '\e800';
+}
+
+.icon-down:before,
+.icon-down-nav:before {
+  content: '\e801';
+}
+
+.icon-download:before {
+  content: '\e802';
+}
+
+.icon-left:before,
+.icon-left-nav:before {
+  content: '\e803';
+}
+
+.icon-more-vertical:before {
+  content: '\e804';
+}
+
+.icon-more:before {
+  content: '\e805';
+}
+
+.icon-right:before,
+.icon-right-nav:before {
+  content: '\e806';
+}
+
+.icon-search:before {
+  content: '\e807';
+}
+
+.icon-share:before {
+  content: '\e808';
+}
+
+.icon-up:before,
+.icon-up-nav:before {
+  content: '\e809';
+}

docs/dist/ios-theme.css

@@ -0,0 +1,464 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+
+a {
+  color: #007aff;
+}
+a:active {
+  color: #0062cc;
+}
+
+.content {
+  background-color: #efeff4;
+}
+
+.h5, h5,
+.h6, h6,
+p {
+  color: #8f8f94;
+}
+
+.h5, h5,
+.h6, h6 {
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+.btn {
+  border: 1px solid #929292;
+  color: #929292;
+  background-color: rgba(247, 247, 247, 0.98);
+  -webkit-transition: all;
+  -moz-transition: all;
+  transition: all;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+.btn:active, .btn.active {
+  color: #fff;
+  background-color: #929292;
+}
+
+.btn-primary {
+  color: #fff;
+  border: 1px solid #007aff;
+  background-color: #007aff;
+}
+.btn-primary:active, .btn-primary.active {
+  border: 1px solid #0062cc;
+  background-color: #0062cc;
+}
+
+.btn-positive {
+  color: #fff;
+  border: 1px solid #4cd964;
+  background-color: #4cd964;
+}
+.btn-positive:active, .btn-positive.active {
+  border: 1px solid #2ac845;
+  background-color: #2ac845;
+}
+
+.btn-negative {
+  color: #fff;
+  border: 1px solid #dd524d;
+  background-color: #dd524d;
+}
+.btn-negative:active, .btn-negative.active {
+  border: 1px solid #cf2d28;
+  background-color: #cf2d28;
+}
+
+.btn-outlined {
+  background-color: transparent;
+}
+.btn-outlined.btn-primary {
+  color: #007aff;
+}
+.btn-outlined.btn-positive {
+  color: #4cd964;
+}
+.btn-outlined.btn-negative {
+  color: #dd524d;
+}
+.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
+  color: #fff;
+}
+
+.btn-link {
+  color: #007aff;
+  background-color: transparent;
+  border: none;
+}
+.btn-link:active, .btn-link.active {
+  color: #0062cc;
+  background-color: transparent;
+}
+
+.btn .badge {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+.btn .badge.badge-inverted {
+  background-color: transparent;
+}
+.btn:active .badge {
+  color: #fff;
+}
+
+.bar {
+  border-bottom: 0;
+  background-color: rgba(247, 247, 247, 0.98);
+  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
+}
+.bar.bar-header-secondary {
+  top: 44px;
+}
+.bar.bar-footer-secondary {
+  bottom: 44px;
+}
+.bar.bar-footer-secondary-tab {
+  bottom: 50px;
+}
+
+.bar-tab {
+  border-top: 0;
+  -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
+  box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
+}
+
+.tab-item.active, .tab-item:active {
+  color: #007aff;
+}
+
+.bar-nav .btn-link {
+  color: #007aff;
+}
+.bar-nav .btn-link:active {
+  color: #007aff;
+  opacity: .6;
+}
+
+.badge.badge-inverted {
+  color: #929292;
+  background-color: transparent;
+}
+
+.badge-primary {
+  color: #fff;
+  background-color: #007aff;
+}
+.badge-primary.badge-inverted {
+  color: #007aff;
+  background-color: transparent;
+}
+
+.badge-positive {
+  color: #fff;
+  background-color: #4cd964;
+}
+.badge-positive.badge-inverted {
+  color: #4cd964;
+  background-color: transparent;
+}
+
+.badge-negative {
+  color: #fff;
+  background-color: #dd524d;
+}
+.badge-negative.badge-inverted {
+  color: #dd524d;
+  background-color: transparent;
+}
+
+.card .table-view {
+  background-image: none;
+}
+
+.card .table-view-cell:last-child {
+  background-image: none;
+}
+
+.table-view {
+  border-top: 0;
+  border-bottom: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 0 100%, 0 0%;
+  background-repeat: no-repeat;
+}
+.table-view .table-view-cell {
+  border-bottom: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
+}
+.table-view .table-view-cell:last-child {
+  background-image: none;
+}
+.table-view .table-view-divider {
+  border-top: 0;
+  border-bottom: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 0 100%, 0 0%;
+  background-repeat: no-repeat;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="search"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  height: 40px;
+  padding: 10px 15px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+input[type="search"] {
+  height: 34px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  border: 0;
+  border-radius: 6px;
+}
+
+input[type="search"]:focus {
+  text-align: left;
+}
+
+select,
+textarea,
+.input-group {
+  height: auto;
+}
+
+.input-group {
+  padding: 0;
+  border: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 0 100%, 0 0%;
+  background-repeat: no-repeat;
+}
+
+.input-group input {
+  border: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
+}
+
+.input-group input:last-child {
+  background-image: none;
+}
+
+.input-row {
+  border-bottom: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
+}
+
+.input-row:last-child,
+.input-row label + input {
+  background-image: none;
+}
+
+.segmented-control {
+  background-color: transparent;
+  border: 1px solid #929292;
+}
+.segmented-control .control-item {
+  color: #929292;
+  border-color: #929292;
+  -webkit-transition: background-color 0.1s linear;
+  -moz-transition: background-color 0.1s linear;
+  transition: background-color 0.1s linear;
+}
+.segmented-control .control-item:active {
+  background-color: #ebebeb;
+}
+.segmented-control .control-item.active {
+  color: #fff;
+  background-color: #929292;
+}
+
+.segmented-control-primary {
+  border: 1px solid #007aff;
+}
+.segmented-control-primary .control-item {
+  color: #007aff;
+  border-color: inherit;
+}
+.segmented-control-primary .control-item:active {
+  background-color: #b3d7ff;
+}
+.segmented-control-primary .control-item.active {
+  color: #fff;
+  background-color: #007aff;
+}
+
+.segmented-control-positive {
+  border: 1px solid #4cd964;
+}
+.segmented-control-positive .control-item {
+  color: #4cd964;
+  border-color: inherit;
+}
+.segmented-control-positive .control-item:active {
+  background-color: #dff8e3;
+}
+.segmented-control-positive .control-item.active {
+  color: #fff;
+  background-color: #4cd964;
+}
+
+.segmented-control-negative {
+  border: 1px solid #dd524d;
+}
+.segmented-control-negative .control-item {
+  color: #dd524d;
+  border-color: inherit;
+}
+.segmented-control-negative .control-item:active {
+  background-color: #fae4e3;
+}
+.segmented-control-negative .control-item.active {
+  color: #fff;
+  background-color: #dd524d;
+}
+
+.popover {
+  border-radius: 12px;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+.popover:before {
+  border-bottom: 15px solid rgba(247, 247, 247, 0.98);
+}
+
+.popover .bar {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.popover .bar-nav {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.popover .table-view {
+  border-radius: 12px;
+  background-image: none;
+}
+
+.modal {
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+.modal.active {
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+
+.toggle {
+  width: 47px;
+  border: 2px solid #e6e6e6;
+  -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
+  box-shadow: inset 0 0 0 0 #e1e1e1;
+  -webkit-transition-property: box-shadow, border;
+  -moz-transition-property: box-shadow, border;
+  transition-property: box-shadow, border;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+.toggle .toggle-handle {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
+  -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -webkit-transform, border, width;
+  transition-property: -webkit-transform, border, width;
+}
+.toggle:before {
+  display: none;
+}
+.toggle.active {
+  border: 2px solid #4cd964;
+  background-color: transparent;
+  -webkit-box-shadow: inset 0 0 0 13px #4cd964;
+  box-shadow: inset 0 0 0 13px #4cd964;
+}
+.toggle.active .toggle-handle {
+  -webkit-transform: translate3d(17px, 0, 0);
+  -ms-transform: translate3d(17px, 0, 0);
+  transform: translate3d(17px, 0, 0);
+}
+.toggle.active .toggle-handle {
+  border-color: #4cd964;
+}
+
+.content.fade {
+  -webkit-transition: opacity 0.2s ease-in-out;
+  -moz-transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
+}
+.content.slide {
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
+  -webkit-animation-name: fadeOverlay;
+  -moz-animation-name: fadeOverlay;
+  animation-name: fadeOverlay;
+  -webkit-animation-duration: 0.4s;
+  -moz-animation-duration: 0.4s;
+  animation-duration: 0.4s;
+}
+.content.slide.right:not([class*="sliding-in"]) {
+  -webkit-animation-direction: reverse;
+  -moz-animation-direction: reverse;
+  animation-direction: reverse;
+}
+.content.slide.left {
+  -webkit-transform: translate3d(-20%, 0, 0);
+  -ms-transform: translate3d(-20%, 0, 0);
+  transform: translate3d(-20%, 0, 0);
+}
+
+@-webkit-keyframes fadeOverlay {
+  from {
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+  }
+
+  to {
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+  }
+}

docs/dist/ratchet.js

@@ -0,0 +1,793 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+/* ----------------------------------
+ * MODAL v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+  var findModals = function (target) {
+    var i, modals = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = modals.length; i--;) { if (modals[i] === target) return target; }
+    }
+  };
+
+  var getModal = function (event) {
+    var modalToggle = findModals(event.target);
+    if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash);
+  };
+
+  window.addEventListener('touchend', function (event) {
+    var modal = getModal(event);
+    if (modal) {
+      if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
+      event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
+    }
+  });
+}();
+
+/* ----------------------------------
+ * POPOVER v1.0.1
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var popover;
+
+  var findPopovers = function (target) {
+    var i, popovers = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
+    }
+  };
+
+  var onPopoverHidden = function () {
+    popover.style.display = 'none';
+    popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
+  }
+
+  var backdrop = function () {
+    var element = document.createElement('div');
+
+    element.classList.add('backdrop');
+
+    element.addEventListener('touchend', function () {
+      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
+      popover.classList.remove('visible');
+      popover.parentNode.removeChild(backdrop);
+    });
+
+    return element;
+  }();
+
+  var getPopover = function (e) {
+    var anchor = findPopovers(e.target);
+
+    if (!anchor || !anchor.hash || (anchor.hash.indexOf("/") > 0)) return;
+
+    try {
+      popover = document.querySelector(anchor.hash);
+    }
+    catch (error) {
+       popover = null;
+    }
+
+    if (popover == null) return;
+
+    if (!popover || !popover.classList.contains('popover')) return;
+
+    return popover;
+  }
+
+  var showHidePopover = function (e) {
+    var popover = getPopover(e);
+
+    if (!popover) return;
+
+    popover.style.display = 'block';
+    popover.offsetHeight;
+    popover.classList.add('visible');
+
+    popover.parentNode.appendChild(backdrop);
+  };
+
+  window.addEventListener('touchend', showHidePopover);
+  window.addEventListener('click', showHidePopover);
+
+}();
+
+/* ----------------------------------
+ * PUSH v1.0.0
+ * Licensed under The MIT License
+ * inspired by chris's jquery.pjax.js
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var noop = function () {};
+
+
+  // Pushstate cacheing
+  // ==================
+
+  var isScrolling;
+  var maxCacheLength = 20;
+  var cacheMapping   = sessionStorage;
+  var domCache       = {};
+  var transitionMap  = {
+    'slide-in'  : 'slide-out',
+    'slide-out' : 'slide-in',
+    'fade'      : 'fade'
+  };
+  
+  var bars = {
+    bartab             : '.bar-tab',
+    barnav             : '.bar-nav',
+    barfooter          : '.bar-footer',
+    barheadersecondary : '.bar-header-secondary'
+  };
+
+  var cacheReplace = function (data, updates) {
+    PUSH.id = data.id;
+    if (updates) data = getCached(data.id);
+    cacheMapping[data.id] = JSON.stringify(data);
+    window.history.replaceState(data.id, data.title, data.url);
+    domCache[data.id] = document.body.cloneNode(true);
+  };
+
+  var cachePush = function () {
+    var id = PUSH.id;
+
+    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
+
+    cacheBackStack.push(id);
+
+    while (cacheForwardStack.length)               delete cacheMapping[cacheForwardStack.shift()];
+    while (cacheBackStack.length > maxCacheLength) delete cacheMapping[cacheBackStack.shift()];
+
+    window.history.pushState(null, '', cacheMapping[PUSH.id].url);
+
+    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
+  };
+
+  var cachePop = function (id, direction) {
+    var forward           = direction == 'forward';
+    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
+    var pushStack         = forward ? cacheBackStack    : cacheForwardStack;
+    var popStack          = forward ? cacheForwardStack : cacheBackStack;
+
+    if (PUSH.id) pushStack.push(PUSH.id);
+    popStack.pop();
+
+    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
+  };
+
+  var getCached = function (id) {
+    return JSON.parse(cacheMapping[id] || null) || {};
+  };
+
+  var getTarget = function (e) {
+    var target = findTarget(e.target);
+
+    if (
+      !  target
+      || e.which > 1
+      || e.metaKey
+      || e.ctrlKey
+      || isScrolling
+      || location.protocol !== target.protocol
+      || location.host     !== target.host
+      || !target.hash && /#/.test(target.href)
+      || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '')
+      || target.getAttribute('data-ignore') == 'push'
+    ) return;
+
+    return target;
+  };
+
+
+  // Main event handlers (touchend, popstate)
+  // ==========================================
+
+  var touchend = function (e) {
+    var target = getTarget(e);
+
+    if (!target) return;
+
+    e.preventDefault();
+
+    PUSH({
+      url        : target.href,
+      hash       : target.hash,
+      timeout    : target.getAttribute('data-timeout'),
+      transition : target.getAttribute('data-transition')
+    });
+  };
+
+  var popstate = function (e) {
+    var key;
+    var barElement;
+    var activeObj;
+    var activeDom;
+    var direction;
+    var transition;
+    var transitionFrom;
+    var transitionFromObj;
+    var id = e.state;
+
+    if (!id || !cacheMapping[id]) return;
+
+    direction = PUSH.id < id ? 'forward' : 'back';
+
+    cachePop(id, direction);
+
+    activeObj = getCached(id);
+    activeDom = domCache[id];
+
+    if (activeObj.title) document.title = activeObj.title;
+
+    if (direction == 'back') {
+      transitionFrom    = JSON.parse(direction == 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
+      transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
+    } else {
+      transitionFromObj = activeObj;
+    }
+
+    if (direction == 'back' && !transitionFromObj.id) return PUSH.id = id;
+
+    transition = direction == 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
+
+    if (!activeDom) {
+      return PUSH({
+        id         : activeObj.id,
+        url        : activeObj.url,
+        title      : activeObj.title,
+        timeout    : activeObj.timeout,
+        transition : transition,
+        ignorePush : true
+      });
+    }
+
+    if (transitionFromObj.transition) {
+      activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
+      for (key in bars) {
+        barElement = document.querySelector(bars[key])
+        if (activeObj[key]) swapContent(activeObj[key], barElement);
+        else if (barElement) barElement.parentNode.removeChild(barElement);
+      }
+    }
+
+    swapContent(
+      (activeObj.contents || activeDom).cloneNode(true),
+      document.querySelector('.content'),
+      transition
+    );
+
+    PUSH.id = id;
+
+    document.body.offsetHeight; // force reflow to prevent scroll
+  };
+
+
+  // Core PUSH functionality
+  // =======================
+
+  var PUSH = function (options) {
+    var key;
+    var data = {};
+    var xhr  = PUSH.xhr;
+
+    options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
+
+    for (key in bars) {
+      options[key] = options[key] || document.querySelector(bars[key]);
+    }
+
+    if (xhr && xhr.readyState < 4) {
+      xhr.onreadystatechange = noop;
+      xhr.abort()
+    }
+
+    xhr = new XMLHttpRequest();
+    xhr.open('GET', options.url, true);
+    xhr.setRequestHeader('X-PUSH', 'true');
+
+    xhr.onreadystatechange = function () {
+      if (options._timeout) clearTimeout(options._timeout);
+      if (xhr.readyState == 4) xhr.status == 200 ? success(xhr, options) : failure(options.url);
+    };
+
+    if (!PUSH.id) {
+      cacheReplace({
+        id         : +new Date,
+        url        : window.location.href,
+        title      : document.title,
+        timeout    : options.timeout,
+        transition : null
+      });
+    }
+
+    if (options.timeout) {
+      options._timeout = setTimeout(function () {  xhr.abort('timeout'); }, options.timeout);
+    }
+
+    xhr.send();
+
+    if (xhr.readyState && !options.ignorePush) cachePush();
+  };
+
+
+  // Main XHR handlers
+  // =================
+
+  var success = function (xhr, options) {
+    var key;
+    var barElement;
+    var data = parseXHR(xhr, options);
+
+    if (!data.contents) return locationReplace(options.url);
+
+    if (data.title) document.title = data.title;
+
+    if (options.transition) {
+      for (key in bars) {
+        barElement = document.querySelector(bars[key])
+        if (data[key]) swapContent(data[key], barElement);
+        else if (barElement) barElement.parentNode.removeChild(barElement);
+      }
+    }
+
+    swapContent(data.contents, options.container, options.transition, function () {
+      cacheReplace({
+        id         : options.id || +new Date,
+        url        : data.url,
+        title      : data.title,
+        timeout    : options.timeout,
+        transition : options.transition
+      }, options.id);
+      triggerStateChange();
+    });
+
+    if (!options.ignorePush && window._gaq) _gaq.push(['_trackPageview']) // google analytics
+    if (!options.hash) return;
+  };
+
+  var failure = function (url) {
+    throw new Error('Could not get: ' + url)
+  };
+
+
+  // PUSH helpers
+  // ============
+
+  var swapContent = function (swap, container, transition, complete) {
+    var enter;
+    var containerDirection;
+    var swapDirection;
+
+    if (!transition) {
+      if (container) container.innerHTML = swap.innerHTML;
+      else if (swap.classList.contains('content')) document.body.appendChild(swap);
+      else document.body.insertBefore(swap, document.querySelector('.content'));
+    } else {
+      enter  = /in$/.test(transition);
+
+      if (transition == 'fade') {
+        container.classList.add('in');
+        container.classList.add('fade');
+        swap.classList.add('fade');
+      }
+
+      if (/slide/.test(transition)) {
+        swap.classList.add('sliding-in', enter ? 'right' : 'left');
+        swap.classList.add('slide');
+        container.classList.add('slide');
+      }
+
+      container.parentNode.insertBefore(swap, container);
+    }
+
+    if (!transition) complete && complete();
+
+    if (transition == 'fade') {
+      container.offsetWidth; // force reflow
+      container.classList.remove('in');
+      container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
+
+      function fadeContainerEnd() {
+        container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
+        swap.classList.add('in');
+        swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
+      }
+      function fadeSwapEnd () {
+        swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
+        container.parentNode.removeChild(container);
+        swap.classList.remove('fade');
+        swap.classList.remove('in');
+        complete && complete();
+      }
+    }
+
+    if (/slide/.test(transition)) {
+      container.offsetWidth; // force reflow
+      swapDirection      = enter ? 'right' : 'left'
+      containerDirection = enter ? 'left' : 'right'
+      container.classList.add(containerDirection);
+      swap.classList.remove(swapDirection);
+      swap.addEventListener('webkitTransitionEnd', slideEnd);
+
+      function slideEnd() {
+        swap.removeEventListener('webkitTransitionEnd', slideEnd);
+        swap.classList.remove('slide', 'sliding-in');
+        swap.classList.remove(swapDirection);
+        container.parentNode.removeChild(container);
+        complete && complete();
+      }
+    }
+  };
+
+  var triggerStateChange = function () {
+    var e = new CustomEvent('push', {
+      detail: { state: getCached(PUSH.id) },
+      bubbles: true,
+      cancelable: true
+    });
+
+    window.dispatchEvent(e);
+  };
+
+  var findTarget = function (target) {
+    var i, toggles = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
+    }
+  };
+
+  var locationReplace = function (url) {
+    window.history.replaceState(null, '', '#');
+    window.location.replace(url);
+  };
+
+  var parseURL = function (url) {
+    var a = document.createElement('a'); a.href = url; return a;
+  };
+
+  var extendWithDom = function (obj, fragment, dom) {
+    var i;
+    var result    = {};
+
+    for (i in obj) result[i] = obj[i];
+
+    Object.keys(bars).forEach(function (key) {
+      var el = dom.querySelector(bars[key]);
+      if (el) el.parentNode.removeChild(el);
+      result[key] = el;
+    });
+
+    result.contents = dom.querySelector(fragment);
+
+    return result;
+  };
+
+  var parseXHR = function (xhr, options) {
+    var head;
+    var body;
+    var data = {};
+    var responseText = xhr.responseText;
+
+    data.url = options.url;
+
+    if (!responseText) return data;
+
+    if (/<html/i.test(responseText)) {
+      head           = document.createElement('div');
+      body           = document.createElement('div');
+      head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0]
+      body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0]
+    } else {
+      head           = body = document.createElement('div');
+      head.innerHTML = responseText;
+    }
+
+    data.title = head.querySelector('title');
+    data.title = data.title && data.title.innerText.trim();
+
+    if (options.transition) data = extendWithDom(data, '.content', body);
+    else data.contents = body;
+
+    return data;
+  };
+
+
+  // Attach PUSH event handlers
+  // ==========================
+
+  window.addEventListener('touchstart', function () { isScrolling = false; });
+  window.addEventListener('touchmove', function () { isScrolling = true; })
+  window.addEventListener('touchend', touchend);
+  window.addEventListener('click', function (e) { if (getTarget(e)) e.preventDefault(); });
+  window.addEventListener('popstate', popstate);
+  window.PUSH = PUSH;
+
+}();
+
+/* ----------------------------------
+ * Segmented controls v1.0.1
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+  var getTarget = function (target) {
+    var i, segmentedControls = document.querySelectorAll('.segmented-control .control-item');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = segmentedControls.length; i--;) { if (segmentedControls[i] === target) return target; }
+    }
+  };
+
+  window.addEventListener("touchend", function (e) {
+    var activeTab;
+    var activeBodies;
+    var targetBody;
+    var targetTab     = getTarget(e.target);
+    var className     = 'active';
+    var classSelector = '.' + className;
+
+    if (!targetTab) return;
+
+    activeTab = targetTab.parentNode.querySelector(classSelector);
+
+    if (activeTab) activeTab.classList.remove(className);
+
+    targetTab.classList.add(className);
+
+    if (!targetTab.hash) return;
+
+    targetBody = document.querySelector(targetTab.hash);
+
+    if (!targetBody) return;
+
+    activeBodies = targetBody.parentNode.querySelectorAll(classSelector);
+
+    for (var i = 0; i < activeBodies.length; i++) {
+      activeBodies[i].classList.remove(className);
+    }
+
+    targetBody.classList.add(className);
+  });
+
+  window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); });
+}();
+/* ----------------------------------
+ * SLIDER v1.0.1
+ * Licensed under The MIT License
+ * Adapted from Brad Birdsall's swipe
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var pageX;
+  var pageY;
+  var slider;
+  var deltaX;
+  var deltaY;
+  var offsetX;
+  var lastSlide;
+  var startTime;
+  var resistance;
+  var sliderWidth;
+  var slideNumber;
+  var isScrolling;
+  var scrollableArea;
+
+  var getSlider = function (target) {
+    var i, sliders = document.querySelectorAll('.slider > .slide-group');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
+    }
+  }
+
+  var getScroll = function () {
+    var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
+    return parseInt(translate3d ? translate3d[1] : 0)
+  };
+
+  var setSlideNumber = function (offset) {
+    var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
+    slideNumber = Math[round](getScroll() / ( scrollableArea / slider.children.length) );
+    slideNumber += offset;
+    slideNumber = Math.min(slideNumber, 0);
+    slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
+  }
+
+  var onTouchStart = function (e) {
+    slider = getSlider(e.target);
+
+    if (!slider) return;
+
+    var firstItem  = slider.querySelector('.slide');
+
+    scrollableArea = firstItem.offsetWidth * slider.children.length;
+    isScrolling    = undefined;
+    sliderWidth    = slider.offsetWidth;
+    resistance     = 1;
+    lastSlide      = -(slider.children.length - 1);
+    startTime      = +new Date;
+    pageX          = e.touches[0].pageX;
+    pageY          = e.touches[0].pageY;
+    deltaX         = 0;
+    deltaY         = 0;
+
+    setSlideNumber(0);
+
+    slider.style['-webkit-transition-duration'] = 0;
+  };
+
+  var onTouchMove = function (e) {
+    if (e.touches.length > 1 || !slider) return; // Exit if a pinch || no slider
+
+    deltaX = e.touches[0].pageX - pageX;
+    deltaY = e.touches[0].pageY - pageY;
+    pageX  = e.touches[0].pageX;
+    pageY  = e.touches[0].pageY;
+
+    if (typeof isScrolling == 'undefined') {
+      isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
+    }
+
+    if (isScrolling) return;
+
+    offsetX = (deltaX / resistance) + getScroll();
+
+    e.preventDefault();
+
+    resistance = slideNumber == 0         && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
+                 slideNumber == lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
+
+    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+  };
+
+  var onTouchEnd = function (e) {
+    if (!slider || isScrolling) return;
+
+    setSlideNumber(
+      (+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
+    );
+
+    offsetX = slideNumber * sliderWidth;
+
+    slider.style['-webkit-transition-duration'] = '.2s';
+    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+
+    e = new CustomEvent('slide', {
+      detail: { slideNumber: Math.abs(slideNumber) },
+      bubbles: true,
+      cancelable: true
+    });
+
+    slider.parentNode.dispatchEvent(e);
+  };
+
+  window.addEventListener('touchstart', onTouchStart);
+  window.addEventListener('touchmove', onTouchMove);
+  window.addEventListener('touchend', onTouchEnd);
+
+}();
+
+/* ----------------------------------
+ * TOGGLE v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var start     = {};
+  var touchMove = false;
+  var distanceX = false;
+  var toggle    = false;
+
+  var findToggle = function (target) {
+    var i, toggles = document.querySelectorAll('.toggle');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
+    }
+  }
+
+  window.addEventListener('touchstart', function (e) {
+    e = e.originalEvent || e;
+
+    toggle = findToggle(e.target);
+
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
+
+    start     = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
+    touchMove = false;
+  });
+
+  window.addEventListener('touchmove', function (e) {
+    e = e.originalEvent || e;
+
+    if (e.touches.length > 1) return; // Exit if a pinch
+
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var current     = e.touches[0];
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = toggleWidth - handleWidth;
+
+    touchMove = true;
+    distanceX = current.pageX - start.pageX;
+
+    if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) return;
+
+    e.preventDefault();
+
+    if (distanceX < 0)      return handle.style.webkitTransform = 'translate3d(0,0,0)';
+    if (distanceX > offset) return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+
+    handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
+
+    toggle.classList[(distanceX > (toggleWidth/2 - handleWidth/2)) ? 'add' : 'remove']('active');
+  });
+
+  window.addEventListener('touchend', function (e) {
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = (toggleWidth - handleWidth);
+    var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
+
+    if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+    else handle.style.webkitTransform = 'translate3d(0,0,0)';
+
+    toggle.classList[slideOn ? 'add' : 'remove']('active');
+
+    e = new CustomEvent('toggle', {
+      detail: { isActive: slideOn },
+      bubbles: true,
+      cancelable: true
+    });
+
+    toggle.dispatchEvent(e);
+
+    touchMove = false;
+    toggle    = false;
+  });
+
+}();

docs/dist/ratchicons/ratchicons.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
+<defs>
+<font id="ratchicons" horiz-adv-x="1000" >
+<font-face font-family="ratchicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="and-caret" unicode="&#xe800;" d="m313 225l375 0v376" horiz-adv-x="1000" />
+<glyph glyph-name="user" unicode="&#xe831;" d="m736 128q204-72 204-122l0-106l-940 0l0 106q0 50 204 122q94 34 128 69t34 95q0 22-22 49t-32 73q-2 12-9 18t-14 8t-14 17t-9 43q0 16 5 26t9 12l4 4q-8 50-12 88q-4 54 41 112t157 58t158-58t40-112l-12-88q18-8 18-42q-2-28-9-43t-14-17t-14-8t-9-18q-8-48-31-74t-23-48q0-60 35-95t127-69z" horiz-adv-x="940" />
+<glyph glyph-name="and-download" unicode="&#xe802;" d="m875 38h-750v62h750v-62z m-312 375v250h-125v-250h-125l187-250l188 250h-125z" horiz-adv-x="1000" />
+<glyph glyph-name="and-left" unicode="&#xe803;" d="m306 349l325 373l67-59l-273-314l273-315l-67-59l-325 373l0 1z" horiz-adv-x="1000" />
+<glyph glyph-name="and-more-vertical" unicode="&#xe804;" d="m406-25v188h188v-188h-188z m0 563h188v188h-188v-188z m188-281v188h-188v-188h188z" horiz-adv-x="1000" />
+<glyph glyph-name="and-more" unicode="&#xe805;" d="m125 444h188v-187h-188v187z m563 0v-187h187v187h-187z m-281-187h187v187h-187v-187z" horiz-adv-x="1000" />
+<glyph glyph-name="and-right" unicode="&#xe806;" d="m698 348l-325-373l-67 59l274 315l-274 314l68 59l324-373l0-1z" horiz-adv-x="1000" />
+<glyph glyph-name="and-share" unicode="&#xe808;" d="m728 215c-33 0-63-14-84-36l-263 153c1 6 2 12 2 18c0 6-1 12-2 18l263 152c21-23 51-37 84-37c62 0 113 51 113 113s-51 114-113 114s-114-51-114-114c0-7 1-14 2-21l-261-150c-21 23-51 38-85 38c-63 0-114-50-114-113s51-113 114-113c33 0 64 15 85 38l261-151c-1-7-2-14-2-22c0-62 51-113 114-113s113 51 113 113s-51 113-113 113z" horiz-adv-x="1000" />
+<glyph glyph-name="and-up" unicode="&#xe809;" d="m500 548l374-325l-59-67l-315 273l-314-273l-59 67l373 325l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="back" unicode="&#xe80a;" d="m500 174l-313 176l313 176m312-352l-312 176l312 176" horiz-adv-x="1000" />
+<glyph glyph-name="down" unicode="&#xe80b;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
+<glyph glyph-name="gear" unicode="&#xe80c;" d="m820 274l118 40l0 72l-118 40c-8 34-22 67-40 97l55 111l-51 51l-111-55c-30 18-62 32-97 40l-39 118l-73 0l-40-118c-34-8-67-22-97-40l-111 55l-51-51l55-111c-18-30-32-62-40-97l-117-39l0-73l117-40c9-34 22-67 41-96l-56-111l52-52l111 56c29-19 62-32 96-40l40-119l73 0l39 119c35 8 67 21 97 40l111-56l51 52l-55 111c18 29 32 62 40 96z m-320-174c-139 0-251 112-251 251s112 250 251 250s250-112 250-250s-112-251-250-251z" horiz-adv-x="1000" />
+<glyph glyph-name="left" unicode="&#xe80d;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
+<glyph glyph-name="list" unicode="&#xe80e;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
+<glyph glyph-name="pages" unicode="&#xe80f;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="refresh" unicode="&#xe810;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
+<glyph glyph-name="right" unicode="&#xe811;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
+<glyph glyph-name="sound" unicode="&#xe812;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound2" unicode="&#xe813;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound3" unicode="&#xe814;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound4" unicode="&#xe815;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
+<glyph glyph-name="up" unicode="&#xe816;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
+<glyph glyph-name="bars" unicode="&#xe817;" d="m875 632h-750v-62l750-1l0 63l0 0z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="caret" unicode="&#xe818;" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
+<glyph glyph-name="check" unicode="&#xe819;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
+<glyph glyph-name="and-down" unicode="&#xe801;" d="m500 156l-373 325l59 67l314-273l315 273l59-67l-374-325l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="code" unicode="&#xe81b;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
+<glyph glyph-name="down-nav" unicode="&#xe81d;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
+<glyph glyph-name="download" unicode="&#xe81e;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-344-323v635l-62 0v-635l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
+<glyph glyph-name="edit" unicode="&#xe81f;" d="m749 511l-404-404l-110-22l22 110l404 404l16-16l-404-405l56-55l404 404l16-16z m16 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20" horiz-adv-x="1000" />
+<glyph glyph-name="forward" unicode="&#xe820;" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
+<glyph glyph-name="info" unicode="&#xe822;" d="m500 725c-207 0-375-168-375-375s168-375 375-375s375 168 375 375s-168 375-375 375z m63-625h-125v313h125v-313z m-63 375c-34 0-62 28-62 63c0 34 28 62 62 62s63-28 63-62c0-35-28-63-63-63z" horiz-adv-x="1000" />
+<glyph glyph-name="left-nav" unicode="&#xe823;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
+<glyph glyph-name="more-vertical" unicode="&#xe824;" d="m500 163c52 0 94-42 94-94c0-52-42-94-94-94s-94 42-94 94c0 52 42 94 94 94z m-94 468c0-51 42-93 94-93s94 42 94 93s-42 94-94 94s-94-42-94-94z m0-281c0-52 42-94 94-94s94 42 94 94s-42 94-94 94s-94-42-94-94z" horiz-adv-x="1000" />
+<glyph glyph-name="more" unicode="&#xe825;" d="m313 350c0-52-42-94-94-94s-94 42-94 94s42 94 94 94s94-42 94-94z m468 94c-52 0-93-42-93-94s41-94 93-94s94 42 94 94s-42 94-94 94z m-281 0c-52 0-94-42-94-94c0-52 42-94 94-94s94 42 94 94c0 52-42 94-94 94z" horiz-adv-x="1000" />
+<glyph glyph-name="pause" unicode="&#xe826;" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
+<glyph glyph-name="person" unicode="&#xe827;" d="m501 847c-275 0-497-222-497-497s222-496 497-496s496 222 496 496s-222 497-496 497z m315-801c-25 11-53 26-79 28c-149 12-152 43-152 106c0 47 30 8 52 118c8 36 15 29 36 95c13 47-12 41-12 41s8 35 12 72c10 96-32 187-175 187c-64 0-94-27-133-57c-41-32-55-76-44-130c7-39 21-77 12-72c0 0-22 6-12-41c21-59 32-59 38-95c18-107 47-70 53-118c6-63-7-94-148-106c-25-2-55-16-79-27c-76 79-123 186-123 303c0 242 197 439 439 439s438-197 438-439c0-118-47-226-123-304z" horiz-adv-x="1000" />
+<glyph glyph-name="play" unicode="&#xe828;" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe829;" d="m469 725v-750h61l1 750l-62 0l0 0z m406-344h-750v-61l750-1l0 62l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="right-nav" unicode="&#xe82a;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
+<glyph glyph-name="share" unicode="&#xe82c;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-406 197v-572h62v572l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
+<glyph glyph-name="stop" unicode="&#xe82f;" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
+<glyph glyph-name="trash" unicode="&#xe830;" d="m875 725h-250c0 22 0 50 0 62c0 18-15 34-34 34h-182c-19 0-34-16-34-34c0-14 0-41 0-62h-250v-63h69l57-715c0-19 16-34 34-34h432c19 0 34 15 34 34l58 715h66v63z m-459 33c0 14 11 25 24 25h120c13 0 24-11 24-25c0-6 0-20 0-33h-168c0 12 0 26 0 33z m287-757c0-15-11-26-26-26h-355c-14 0-25 11-25 26l-42 661h490l-42-661z m-273 37h-47l-39 562l46 0l40-562z m187 0l-46 0l39 562l47 0l-40-562z m-94 0h-47v562h47v-562z" horiz-adv-x="1000" />
+<glyph glyph-name="up-nav" unicode="&#xe832;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
+<glyph glyph-name="star-filled" unicode="&#xe82e;" d="m500 812l116-354l371 0l-300-218l115-353l-301 218l-300-218l114 353l-300 218l371 0l114 354z" horiz-adv-x="1000" />
+<glyph glyph-name="star" unicode="&#xe82d;" d="m987 458l-372 0l-115 354l-114-354l-371 0l301-218l-115-353l301 218l299-218l-115 353l301 218z m-252-478l-234 174l-234-174l99 274l-252 171l295 0l92 290l91-290l296 0l-253-175l100-270z" horiz-adv-x="1000" />
+<glyph glyph-name="and-search" unicode="&#xe807;" d="m928 51l-167 167c-17 17-47 15-66-4l-3-3l-69 69c42 54 67 121 67 194c0 173-140 313-314 313s-313-140-313-313s140-314 313-314c71 0 137 24 190 64l69-70c-18-19-19-48-2-65l166-166c17-17 47-16 66 4l59 58c19 19 21 49 4 66z m-801 423c0 137 112 249 249 249s249-112 249-249s-111-249-249-249s-249 111-249 249z" horiz-adv-x="1000" />
+<glyph glyph-name="search" unicode="&#xe82b;" d="m935-10l-279 279c39 54 62 120 62 191c0 181-147 328-328 328s-327-147-327-328s147-327 327-327c71 0 136 22 190 61l279-280l76 76z m-808 470c0 146 118 263 263 263s264-117 264-263s-118-263-264-263s-263 118-263 263z" horiz-adv-x="1000" />
+<glyph glyph-name="home" unicode="&#xe821;" d="m939 350l-438 438l0 0l0 0l-438-438l48-47l54 54v-444h16h51h168h47h109h46h168h55h12v444l54-54l48 47z m-501-370v245h125v-245h-125z m332 444v-444h-161v291h-16h-30h-125h-34h-12v-291h-160v444h0l269 269l269-269h0z" horiz-adv-x="1000" />
+<glyph glyph-name="compose" unicode="&#xe81c;" d="m890 651l-405-404l-110-22l22 110l404 405l17-17l-405-404l56-56l404 405l17-17z m15 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20m-4-272v-445h-625v625h440l63 62h-566v-750h750v570l-62-62z" horiz-adv-x="1000" />
+<glyph glyph-name="close" unicode="&#xe81a;" d="m213 593l530-530l43 44l-529 530l-44-44l0 0z m530 44l-530-530l43-44l531 530l-44 44l0 0z" horiz-adv-x="1000" />
+</font>
+</defs>
+</svg>

docs/getting-started.html

@@ -1,7 +1,6 @@
 ---
 layout: default
-title: Ratchet ~ Getting Started
-base_url: "../"
+title: Ratchet · Getting Started
 ---
 
 <!-- Getting started -->

docs/index.html

@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Ratchet
-base_url: "./"
 ---
 
 <div class="docs-header">