updating to new docs

2014-12-09 12:37:37 -08:00 · 2014-12-09 12:37:37 -08:00 · 296e00584b
commit 296e00584b
parent 670341983c
36 changed files with 797 additions and 830 deletions
--- a/README.md
+++ b/README.md
@ -1,59 +0,0 @@
-# [Skeleton](http://getskeleton.com)
-Skeleton is a simple, responsive boilerplate to kickstart any responsive project.
-
-Check out <http://getskeleton.com> for documentation and details.
-
-## Getting started
-
-There are a couple ways to download Skeleton:
- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0/Skeleton.2.0.zip)
- Clone the repo: `git clone https://github.com/dhg/Skeleton.git`
-
-
-### What's in the download?
-
-The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point.
-
-```
-skeleton/
-├── index.html
-├── css/
-│   ├── normalize.min.css
-│   └── skeleton.css
-├── images/
-│   └── favicon.ico
-└── README.md
-```
-
-### Why it's awesome
-
-Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. 
- Minified, it's less than a kb
- It's a starting point, not a UI framework 
- No compiling or installing...just vanilla CSS
-
-
-## Browser support
-
- Chrome latest
- Firefox latest
- Opera latest
- Safari latest
- IE latest
-
-The above list is non-exhaustive. Skeleton works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9.
-
-
-## License
-
-All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php).
-
-
-## Colophon
-
-Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux.
-
-
-## Acknowledgement
-
-Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web.
--- a/css/custom.css
+++ b/css/custom.css
@ -0,0 +1,227 @@
+.container {
+  max-width: 800px; }
+.header {
+  margin-top: 6rem;
+  text-align: center; }
+.value-prop {
+  margin-top: 1rem; }
+.value-props {
+  margin-top: 4rem;
+  margin-bottom: 4rem; }
+.docs-header {
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  letter-spacing: .2rem;
+  font-weight: 600; }
+.docs-section {
+  border-top: 1px solid #eee;
+  padding: 4rem 0;
+  margin-bottom: 0;}
+.value-img {
+  display: block;
+  text-align: center;
+  margin: 2.5rem auto 0; }
+.example-grid .column,
+.example-grid .columns {
+  background: #EEE;
+  text-align: center;
+  border-radius: 4px;
+  font-size: 1rem;
+  text-transform: uppercase;
+  height: 30px;
+  line-height: 30px;
+  margin-bottom: .75rem;
+  font-weight: 600;
+  letter-spacing: .1rem; }
+.docs-example .row,
+.docs-example.row,
+.docs-example form {
+  margin-bottom: 0; }
+.docs-example h1,
+.docs-example h2,
+.docs-example h3,
+.docs-example h4,
+.docs-example h5,
+.docs-example h6 {
+  margin-bottom: 1rem; }
+.heading-font-size {
+  font-size: 1.2rem;
+  color: #999;
+  letter-spacing: normal; }
+.code-example {
+  margin-top: 1.5rem;
+  margin-bottom: 0; }
+.code-example-body {
+  white-space: pre;
+  word-wrap: break-word }
+
+.example {
+  position: relative; 
+  margin-top: 4rem; }
+.example-header {
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: .5rem; }
+.example-description {
+  margin-bottom: 1.5rem; }
+.example-screenshot-wrapper {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid #eee;
+  height: 250px; }
+.example-screenshot {
+  width: 100%;
+  height: auto; }
+.example-screenshot.coming-soon {
+  width: auto;
+  position: absolute;
+  background: #eee;
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+  left: 5px; }
+
+.navbar {
+  display: none; }
+
+/* Larger than phone */
+@media (min-width: 550px) {
+  .header {
+    margin-top: 18rem; }
+  .value-props {
+    margin-top: 9rem;
+    margin-bottom: 7rem; }
+  .value-img {
+    margin-bottom: 1rem; }
+  .example-grid .column,
+  .example-grid .columns {
+    margin-bottom: 1.5rem; }
+  .docs-section {
+    padding: 6rem 0; }
+  .example-send-yourself-copy {
+    float: right;
+    margin-top: 12px; }
+  .example-screenshot-wrapper {
+    position: absolute;
+    width: 48%;
+    height: 100%;
+    left: 0;
+    max-height: none; }
+}
+
+/* Larger than tablet */
+@media (min-width: 750px) {
+  /* Navbar */
+  .navbar + .docs-section {
+    border-top-width: 0; }
+  .navbar,
+  .navbar-spacer {
+    display: block;
+    width: 100%;
+    height: 6.5rem;
+    background: #fff;
+    z-index: 99;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee; }
+  .navbar-spacer {
+    display: none; }
+  .navbar > .container {
+    width: 100%; }
+  .navbar-list {
+    list-style: none;
+    margin-bottom: 0; }
+  .navbar-item {
+    position: relative;
+    float: left;
+    margin-bottom: 0; }
+  .navbar-link {
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: .2rem;
+    margin-right: 35px;
+    text-decoration: none;
+    line-height: 6.3rem;
+    color: #222; }
+  .navbar-link.active {
+    color: #33C3F0; }
+  .has-docked-nav .navbar {
+    position: fixed;
+    top: 0;
+    left: 0; }
+  .has-docked-nav .navbar-spacer {
+    display: block; }
+  /* Re-overiding the width 100% declaration to match size of % based container */
+  .has-docked-nav .navbar > .container {
+    width: 80%; }
+
+  /* Popover */
+  .popover.open {
+    display: block;
+  }
+  .popover {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    top: 92%;
+    left: -50%;
+    -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
+       -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
+            filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); }
+  .popover-item:first-child .popover-link:after, 
+  .popover-item:first-child .popover-link:before {
+    bottom: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none; }
+  .popover-item:first-child .popover-link:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #fff;
+    border-width: 10px;
+    margin-left: -10px; }
+  .popover-item:first-child .popover-link:before {
+    border-color: rgba(238, 238, 238, 0);
+    border-bottom-color: #eee;
+    border-width: 11px;
+    margin-left: -11px; }
+  .popover-list {
+    padding: 0;
+    margin: 0;
+    list-style: none; }
+  .popover-item {
+    padding: 0;
+    margin: 0; }
+  .popover-link {
+    position: relative;
+    color: #222;
+    display: block;
+    padding: 8px 20px;
+    border-bottom: 1px solid #eee;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 1.0rem;
+    font-weight: 600;
+    text-align: center;
+    letter-spacing: .1rem; }
+  .popover-item:first-child .popover-link {
+    border-radius: 4px 4px 0 0; }
+  .popover-item:last-child .popover-link {
+    border-radius: 0 0 4px 4px;
+    border-bottom-width: 0; }
+  .popover-link:hover {
+    color: #fff;
+    background: #33C3F0; }
+  .popover-link:hover,
+  .popover-item:first-child .popover-link:hover:after {
+    border-bottom-color: #33C3F0; }
+}
--- a/css/github-prettify-theme.css
+++ b/css/github-prettify-theme.css
@ -0,0 +1,149 @@
+/* GitHub Theme */
+.prettyprint {
+  background: #fff;
+  font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
+  font-size: 1.2rem;
+  padding: 2.5rem 3rem;
+  -webkit-font-smoothing: antialiased; 
+}
+
+.pln {
+  color: #333333;
+}
+
+@media screen {
+  .str {
+    color: #dd1144;
+  }
+
+  .kwd {
+    color: #333333;
+  }
+
+  .com {
+    color: #999988;
+  }
+
+  .typ {
+    color: #445588;
+  }
+
+  .lit {
+    color: #445588;
+  }
+
+  .pun {
+    color: #333333;
+  }
+
+  .opn {
+    color: #333333;
+  }
+
+  .clo {
+    color: #333333;
+  }
+
+  .tag {
+    color: navy;
+  }
+
+  .atn {
+    color: teal;
+  }
+
+  .atv {
+    color: #dd1144;
+  }
+
+  .dec {
+    color: #333333;
+  }
+
+  .var {
+    color: teal;
+  }
+
+  .fun {
+    color: #990000;
+  }
+}
+@media print, projection {
+  .str {
+    color: #006600;
+  }
+
+  .kwd {
+    color: #006;
+    font-weight: bold;
+  }
+
+  .com {
+    color: #600;
+    font-style: italic;
+  }
+
+  .typ {
+    color: #404;
+    font-weight: bold;
+  }
+
+  .lit {
+    color: #004444;
+  }
+
+  .pun, .opn, .clo {
+    color: #444400;
+  }
+
+  .tag {
+    color: #006;
+    font-weight: bold;
+  }
+
+  .atn {
+    color: #440044;
+  }
+
+  .atv {
+    color: #006600;
+  }
+}
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+  /* */
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+  /* */
+}
+
+/* My additional styles */
+
+/*li.L0, li.L1, li.L2, li.L3,
+li.L5, li.L6, li.L7, li.L8
+{ list-style-type: decimal !important }*/
+
+.prettyprint li {
+  margin-bottom: .3rem;
+}
--- a/dist/css/normalize.css
+++ b/dist/css/normalize.css
--- a/dist/css/skeleton.css
+++ b/dist/css/skeleton.css
--- a/dist/images/favicon.png
+++ b/dist/images/favicon.png
--- a/documentation-assets/Skeleton-Grid.psd.zip
+++ b/documentation-assets/Skeleton-Grid.psd.zip
--- a/documentation-assets/docs.css
+++ b/documentation-assets/docs.css
@ -1,200 +0,0 @@
-/*
-* Skeleton V1.0.3
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 7/17/2011
-*/
-
-
-/* Documentation Styles
-================================================== */
-	div.container {
-		padding-top: 60px; }
-
-	/* Doc nav */
-	nav {
-		position: fixed;
-		width: 160px; }
-	#logo {
-		margin-bottom: 20px;
-		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-		letter-spacing: -1px;
-		font-weight: bold; }
-	nav ul {
-		float: left;  }
-	nav ul li {
-		display: block;
-		margin-bottom: 10px; }
-	nav ul li a,
-	nav ul li a:visited,
-	nav ul li a:active  {
-		font-size: 14px;
-		color: #555;
-		text-decoration: none;
-		font-weight: bold; }
-	nav ul li a:hover,
-	nav ul li a:focus {
-		color: #222; }
-	header h1 {
-		font-size: 52px;
-		line-height: 61px;
-		letter-spacing: -1px;
-		font-weight: normal;
-		font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; }
-	hr.large {
-		border: none;
-		height: 8px;
-		background: #ebebeb;
-		margin: 50px 0; }
-	div.doc-section {
-		margin: 30px 0; }
-
-	#whatAndWhy .row {
-		padding: 30px 0 0; }
-
-	#typography blockquote {
-		margin-top: 20px; }
-
-	.hidden-code a {
-		font-size: 12px;
-		color: #999; }
-	.hidden-code>div {
-		display: none; }
-
-
-	/* Grid */
-	#grid .column,
-	#grid .columns {
-		background: #ddd;
-		height: 25px;
-		line-height: 25px;
-		margin-bottom: 10px;
-		text-align: center;
-		text-transform: uppercase;
-		color: #555;
-		font-size: 12px;
-		font-weight: bold;
-		-moz-border-radius: 2px;
-		 -webkit-border-radius: 2px;
-		 border-radius: 2px; }
-	#grid .column:hover,
-	#grid .columns:hover {
-		background: #bbb;
-		color: #333; }
-	#grid .example-grid { overflow: hidden; }
-
-	.post-button-note,
-	.post-button-note a {
-		font-size: 11px;
-		color: #999; }
-
-	#examples .four.columns a {
-		text-decoration: none;
-	}
-	#examples .four.columns a:hover {
-		text-decoration: underline;
-	}
-
-
-	.resize {
-		position: fixed;
-		bottom: 0;
-		right: 0;
-		height: 80px;
-		width: 80px;
-		background: url(images/resize.png); }
-
-
-	img {
-		max-width: 100%;
-		height: auto; }
-
-	.gist-meta { display: none !important;}
-
-	ul ul ul li { margin-bottom: 3px; }
-
-	.twitter-share-button { margin-bottom: -18px; }
-
-.carbonad,
-.carbonad-image,
-.carbonad-text,
-.carbonad-tag {
-	background: none !important;
-	border: none !important;
-	margin-left: 0 !important;
-}
-.carbonad-tag {
-	margin-top: 6px !important;
-	padding-top: 0 !important;
-}
-.carbonad-text {
-	height: auto !important;
-}
-.carbonad-image {
-	margin-top: 0 !important;
-}
-
-
-	/* Mobile */
-	@media only screen and (max-width: 767px) {
-		header h1 { font-size: 34px; line-height: 37px; }
-		nav { position: relative; }
-		nav ul,
-		.carbonad {
-				display: none;
-		}
-		#logo { text-align: left; }
-		#examples .four.columns {
-			padding-top: 30px;
-		}
-	}
-
-	/* Mobile Landscape */
-	@media only screen and (min-width: 480px) and (max-width: 767px) {
-		nav ul {
-			display: none;
-		}
-	}
-
-	/* Non 960 */
-	@media only screen and (max-width: 959px) {
-		#logo {
-			font-size: 21px;
-			margin-bottom: 15px; }
-		nav .button {
-			padding: 9px 20px 11px; }
-	}
-
-	/* iPad Portrait/Browser */
-	@media only screen and (min-width: 768px) and (max-width: 959px) {
-		nav {
-			width: 124px; }
-	}
-
-	/* Mobile/Browser */
-	@media only screen and (max-width: 767px) {}
-
-	/* Mobile Landscape/Browser */
-	@media only screen and (min-width: 480px) and (max-width: 767px) {}
-
-	/* Anything smaller than standard 960 */
-	@media only screen and (max-width: 959px) {}
-
-
-	/* iPad Portrait Only */
-	@media only screen and (min-width: 768px) and (max-width: 959px) and (max-device-width: 1000px) {}
-
-	/* Mobile Only */
-	@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}
-
-	/* Mobile Landscape Only */
-	@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}
-
-	/* Anything smaller than standard 960 on a device */
-	@media only screen and (max-width: 959px) and (max-device-width: 1000px) {
-		.resize { display: none; }
-	}
-
-
--- a/documentation-assets/images/artisticly.jpg
+++ b/documentation-assets/images/artisticly.jpg
--- a/documentation-assets/images/blink182.jpg
+++ b/documentation-assets/images/blink182.jpg
--- a/documentation-assets/images/eleventhedition.jpg
+++ b/documentation-assets/images/eleventhedition.jpg
--- a/documentation-assets/images/fast.jpg
+++ b/documentation-assets/images/fast.jpg
--- a/documentation-assets/images/foundation.jpg
+++ b/documentation-assets/images/foundation.jpg
--- a/documentation-assets/images/hivemind.jpg
+++ b/documentation-assets/images/hivemind.jpg
--- a/documentation-assets/images/jimnielson.jpg
+++ b/documentation-assets/images/jimnielson.jpg
--- a/documentation-assets/images/resize.png
+++ b/documentation-assets/images/resize.png
--- a/documentation-assets/images/responsive.jpg
+++ b/documentation-assets/images/responsive.jpg
--- a/documentation-assets/images/superskeleton.jpg
+++ b/documentation-assets/images/superskeleton.jpg
--- a/examples/landing/css/custom.css
+++ b/examples/landing/css/custom.css
@ -0,0 +1,157 @@
+/* Shared
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button {
+  border-radius: 100px;
+}
+
+/* Nav
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.navbar {
+  display: none;
+}
+
+/* Sections
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.section {
+  padding: 8rem 0 7rem;
+  text-align: center;
+}
+.section-heading,
+.section-description {
+  margin-bottom: 1.2rem;
+}
+
+/* Hero
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.phones {
+  position: relative;
+}
+.phone {
+  position: relative;
+  max-width: 80%;
+  margin: 3rem auto -12rem;
+}
+.phone + .phone {
+  display: none;
+}
+
+/* Values
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.values {
+  background-image: url('../images/values-bg.jpg');
+  background-size: cover;
+  color: #fff;
+  padding-bottom: 5rem;
+}
+.value-multiplier {
+  margin-bottom: .5rem;
+  color: #11DFC7;
+}
+.value-heading {
+  margin-bottom: .3rem;
+}
+.value-description {
+  opacity: .8;
+  font-weight: 300;
+}
+
+/* Help
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.get-help {
+  border-bottom: 1px solid #ddd;
+}
+
+/* Categories
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.categories {
+  background-image: url('../images/values-bg.jpg');
+  background-size: cover;
+  color: #fff;
+}
+.categories .section-description { 
+  margin-bottom: 4rem;
+}
+
+/* Bigger than 550 */
+@media (min-width: 550px) {
+  .hero {
+    padding: 12rem 0;
+    text-align: left;
+    height: 165px;
+  }
+  .section {
+    padding: 12rem 0 11rem;
+  }
+  .phone {
+    position: absolute;
+    top: -7rem;
+    right: 3rem;
+    max-height: 362px;
+    z-index: 3;
+  }
+  .phone + .phone {
+    top: -6rem;
+    display: block;
+    max-width: 73.8%;
+    right: 0;
+    z-index: 2;
+    max-height: 338px;
+  }
+  .hero-heading {
+    font-size: 2.4rem;
+  }
+}
+
+/* Bigger than 750 */
+@media (min-width: 750px) {
+  .hero {
+    height: 190px;
+  }
+  .hero-heading {
+    font-size: 2.6rem;
+  }
+  .section {
+    padding: 14rem 0 15rem;
+  }
+  .hero {
+    padding: 16rem 0 14rem;
+  }
+  .section-description {
+    max-width: 60%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .phone {
+    top: -14rem;
+    right: 5rem;
+    max-height: 510px;
+  }
+  .phone + .phone {
+    top: -12rem;
+    max-height: 472px;
+  }
+  .categories {
+    padding: 15rem 0 8rem;
+  }
+}
+
+/* Bigger than 1000 */
+@media (min-width: 1000px) {
+  .section {
+    padding: 20rem 0 19rem;
+  }
+  .hero {
+    padding: 22rem 0;
+  }
+  .hero-heading {
+    font-size: 3.0rem;
+  }
+  .phone {
+    top: -16rem;
+    max-height: 615px;
+  }
+  .phone + .phone {
+    top: -14rem;
+    max-height: 570px;
+  }
+}
--- a/examples/landing/images/iphone.png
+++ b/examples/landing/images/iphone.png
--- a/examples/landing/images/placeholder.png
+++ b/examples/landing/images/placeholder.png
--- a/examples/landing/images/values-bg.jpg
+++ b/examples/landing/images/values-bg.jpg
--- a/examples/landing/index.html
+++ b/examples/landing/index.html
@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <!-- Basic Page Needs
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta charset="utf-8">
+  <title>Skeleton: Responsive CSS Boilerplate</title>
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <!-- Mobile Specific Metas
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  <!-- FONT
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
+
+  <!-- CSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="stylesheet" href="../../dist/css/normalize.css">
+  <link rel="stylesheet" href="../../dist/css/skeleton.css">
+  <link rel="stylesheet" href="css/custom.css">
+
+  <!-- Scripts
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+
+  <!-- Favicon
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="icon" type="image/png" href="../../dist/images/favicon.png">
+
+</head>
+<body>
+
+  <!-- Primary Page Layout
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+
+  <nav class="navbar container">
+    <h4 class="logo"></h4>
+    <ul class="navbar-list">
+      <li class="navbar-list-item">
+        <a class="navbar-list-link">About</a>
+      </li>
+      <li class="navbar-list-item">
+        <a class="navbar-list-link">Jobs</a>
+      </li>
+      <li class="navbar-list-item">
+        <a class="navbar-list-link">Contact</a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="section container hero">
+    <div class="row">
+      <div class="one-half column">
+        <h4 class="hero-heading">Stop coding non-responsive sites. Let users view sites from anywhere.</h4>
+        <a class="button button-primary" href="http://getskeleton.com">Try Skeleton</a>
+      </div>
+      <div class="one-half column phones">
+        <img class="phone" src="images/iphone.png">
+        <img class="phone" src="images/iphone.png">
+      </div>
+    </div>
+  </div>
+
+  <div class="section values">
+    <div class="container">
+      <div class="row">
+        <div class="one-third column value">
+          <h2 class="value-multiplier">67%</h2>
+          <h5 class="value-heading">Purchase Increase</h5>
+          <p class="value-description">Percentage of users more likely to purchase on mobile friendly site.</p>
+        </div>
+        <div class="one-third column value">
+          <h2 class="value-multiplier">90%</h2>
+          <h5 class="value-heading">Multi-device Users</h5>
+          <p class="value-description">Most of the world accesses the internet on multiple devices.</p>
+        </div>
+        <div class="one-third column value">
+          <h2 class="value-multiplier">66%</h2>
+          <h5 class="value-heading">Sad Users</h5>
+          <p class="value-description">Percentage of users that are frustrated with page load times.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container section get-help">
+    <h3 class="section-heading">Need help getting started?</h3>
+    <p class="section-description">Skeleton is an amazingly easy place to start with responsive development. If you want to learn more, just visit the documentation!</p>
+    <a class="button button-primary" href="http://getskeleton.com">View Skeleton Docs</a>
+  </div>
+
+  <div class="section categories">
+    <div class="container">
+      <h3 class="section-heading">Responsive Images</h3>
+      <p class="section-description">Skeleton images sit easily in grid with .u-max-full-width class. I suggest exploring solution to serving different images based on device size.</p>
+      <div class="row">
+        <div class="one-half column category">
+          <img class="u-max-full-width" src="images/placeholder.png">
+        </div>
+        <div class="one-half column category">
+          <img class="u-max-full-width" src="images/placeholder.png">
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+
+<!-- End Document
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+</body>
+</html>
--- a/images/examples/landing.jpg
+++ b/images/examples/landing.jpg
--- a/images/feather.svg
+++ b/images/feather.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>feather</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="feather" sketch:type="MSArtboardGroup" stroke-width="1.5" stroke="#FFFFFF" fill="#000000">
+            <path d="M62.7545597,80.9293443 L62.7545597,91.4097889 C62.7545597,92.4644569 63.6105221,93.3204193 64.6651901,93.3204193 C65.719858,93.3204193 66.5758205,92.4644569 66.5758205,91.4097889 L66.5758205,80.9293443 L70.2404096,80.822349 C70.8161462,80.8057902 71.354944,80.5293857 71.7039525,80.0695606 L84.4414884,63.3324383 C84.9892025,62.6140413 84.9573587,61.6090497 84.366337,60.9263178 L78.959253,54.6696401 L84.014781,51.1438902 C84.5268299,50.7872391 84.8325308,50.2013125 84.8325308,49.5771732 L84.8325308,2.83933241 C84.8325308,2.42026748 84.6949654,2.01394008 84.4402147,1.68021663 L66.1835044,-22.240876 C66.1401967,-22.2981949 66.0803303,-22.3351337 66.0306539,-22.3873576 C65.9555025,-22.4663303 65.8841723,-22.5453031 65.7962833,-22.6115383 C65.7134893,-22.6726784 65.6230528,-22.7134385 65.53389,-22.7605674 C65.4689286,-22.7949588 65.4128834,-22.8420877 65.342827,-22.8688365 C65.187429,-22.9159654 65.0855288,-22.9287029 64.9836285,-22.9452617 C64.893192,-22.9605467 64.805303,-22.9822006 64.7148665,-22.9834743 C64.6244299,-22.9860218 64.5352672,-22.969463 64.4435569,-22.959273 C64.3365616,-22.9465355 64.2333876,-22.9350717 64.1302136,-22.9057753 C63.9951957,-22.8739315 63.9506143,-22.8344451 63.8945691,-22.8102438 C63.7939426,-22.7656624 63.6958636,-22.7198073 63.6041533,-22.6573934 C63.5264543,-22.6051695 63.4602192,-22.5440293 63.3927102,-22.4816154 C63.3417601,-22.4357603 63.2831674,-22.4039164 63.2373123,-22.3516925 L50.5354414,-8.03979708 C50.051415,-7.49335679 49.9202184,-6.7189146 50.1978967,-6.04382519 L53.0676635,0.926154503 L46.407206,0.926154503 C45.352538,0.926154503 44.4965756,1.78211692 44.4965756,2.8367849 L44.4965756,43.126885 C44.4965756,43.6121851 44.6812698,44.0783789 45.0124458,44.4324824 L50.8385947,50.65859 L44.7513263,61.2205549 C44.3666527,61.886728 44.4201504,62.7197629 44.8863442,63.3311646 L57.6238802,80.0682869 C57.9741624,80.5293857 58.5129602,80.807064 59.0886968,80.822349 L62.7545597,80.9293443 Z M75.0360919,52.7488197 C74.5915519,53.0583418 74.301136,53.5423682 74.2336271,54.0786184 C74.1661182,54.6161425 74.3291586,55.156214 74.6845359,55.5650889 L80.463556,62.2522953 L69.2163117,77.0303846 L66.5758205,77.1080835 L66.5758205,75.761726 L66.5758205,-15.4288417 L81.01127,3.48512548 L81.01127,48.5823717 L75.0360919,52.7488197 Z M54.5961679,49.0829568 L48.3178364,42.3740966 L48.3178364,4.74996281 L55.9208716,4.74996281 C56.5577484,4.74996281 57.1538651,4.43152441 57.5079686,3.90291666 C57.8620721,3.37303517 57.929581,2.70176702 57.6875678,2.1120191 L54.1860192,-6.39283368 L62.7558334,-16.0491597 L62.7558334,45.4056302 L56.7131463,40.6914681 C55.8788377,40.0418538 54.6789618,40.190883 54.031895,41.0226441 C53.3822807,41.8544052 53.5300361,43.0555548 54.363071,43.7038954 L62.7571072,50.2522626 L62.7571072,65.3844554 L56.7144201,60.6715671 C55.8801115,60.0219527 54.6802356,60.1709819 54.0331688,61.002743 C53.3835544,61.8345041 53.5313099,63.0356538 54.3643447,63.6839943 L62.7583809,70.2310878 L62.7583809,75.7629997 L62.7583809,77.1093573 L60.116616,77.0316583 L48.7012362,62.0319359 L54.8572873,51.3425957 C55.2763523,50.6140087 55.1706307,49.6969061 54.5961679,49.0829568 Z" sketch:type="MSShapeGroup" transform="translate(64.664190, 35.168341) rotate(90.000000) translate(-64.664190, -35.168341) "></path>
+        </g>
+    </g>
+</svg>
--- a/images/pens.svg
+++ b/images/pens.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>pens</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="pens" sketch:type="MSArtboardGroup">
+            <g id="capped" sketch:type="MSLayerGroup" transform="translate(65.143695, 20.838603) scale(-1, 1) rotate(-90.000000) translate(-65.143695, -20.838603) translate(16.643695, -32.161397)">
+                <g id="Background"></g>
+                <g id="Pictograms" transform="translate(40.462213, 0.000000)" fill="#000000" sketch:type="MSShapeGroup">
+                    <path d="M11.9353896,2.67942793 L11.9353896,1.83430371 C11.9353896,1.30610107 11.5018659,0.873935276 10.9720035,0.873935276 L1.55008813,0.873935276 C1.02022581,0.873935276 0.586702095,1.30610107 0.586702095,1.83430371 L0.586702095,37.7040648 C0.586702095,38.1554379 0.894985626,38.5299816 1.30924162,38.6260185 L1.30924162,101.667167 C1.30924162,102.070522 1.55972199,102.416255 1.91617482,102.56031 L1.91617482,104.173729 C1.91617482,104.433028 2.02214729,104.682724 2.20519063,104.865194 C2.53274188,105.172512 2.85065928,105.172512 3.53466336,105.162908 L4.07415954,105.153305 L8.91035743,105.162908 L9.23790868,105.162908 C9.70996784,105.162908 9.97008207,105.124494 10.2398302,104.865194 C10.4228735,104.682724 10.528846,104.433028 10.528846,104.173729 L10.5384798,102.579517 C10.9238342,102.454669 11.2032162,102.089729 11.2032162,101.667167 L11.2032162,38.6356221 C11.627106,38.5299816 11.9353896,38.1650416 11.9353896,37.7040648 L11.9353896,4.6001648 L12.8987756,4.6001648 L12.8987756,37.8865348 C12.8987756,38.4243411 13.3322993,38.8469032 13.8621616,38.8469032 C14.4016578,38.8469032 14.8255477,38.4243411 14.8255477,37.8865348 L14.8255477,3.63979637 C14.8255477,3.11159373 14.4016578,2.67942793 13.8621616,2.67942793 L11.9353896,2.67942793 Z M3.23601369,100.706799 L3.23601369,38.6644332 L9.27644412,38.6644332 L9.27644412,100.706799 L3.23601369,100.706799 Z M10.0086175,36.7436963 L2.51347416,36.7436963 L2.51347416,2.79467215 L10.0086175,2.79467215 L10.0086175,36.7436963 L10.0086175,36.7436963 Z" id="Shape"></path>
+                </g>
+                <g id="Guides"></g>
+            </g>
+            <g id="clicked" sketch:type="MSLayerGroup" transform="translate(65.121739, 45.950758) rotate(135.000000) translate(-65.121739, -45.950758) translate(22.350262, 2.839502)" fill="#000000">
+                <path d="M3.51676594,0 C3.32667048,0 3.0415273,0.0947500115 2.85143184,0.284250035 L0.665334096,2.55825031 C0.285143184,2.93725036 0.285143184,3.50575043 0.665334096,3.88475047 L5.4177205,8.71700106 L3.13657502,11.0857513 L3.13657502,11.0857513 L3.0415273,11.1805014 C2.66133638,11.5595014 2.66133638,12.1280015 3.0415273,12.5070015 L6.84343642,16.297002 L3.99200458,19.1395023 C3.61181367,19.5185024 3.61181367,20.0870024 3.99200458,20.4660025 L23.6668843,40.4582549 C23.8569797,40.6477549 24.0470752,40.742505 24.3322184,40.742505 L29.1796525,40.837255 L29.1796525,45.2905055 C29.1796525,45.5747555 29.2747002,45.7642556 29.4647957,45.9537556 L33.8369912,50.4070061 C34.2171821,50.7860062 34.7874685,50.7860062 35.1676594,50.4070061 C35.3577548,50.2175061 35.4528026,49.9332561 35.4528026,49.743756 C35.4528026,49.459506 35.3577548,49.270006 35.1676594,49.080506 L30.9855593,44.9115055 L30.9855593,40.742505 L31.0806071,40.837255 L31.0806071,40.837255 L62.6364528,72.5785088 C62.6364528,72.5785088 62.7315005,72.5785088 62.7315005,72.6732588 C62.7315005,72.6732588 62.7315005,72.7680088 62.8265482,72.7680088 L77.6539938,82.33776 C77.939137,82.52726 78.2242802,82.52726 78.5094234,82.43251 L83.5469529,85.1802604 C83.9271438,85.3697604 84.4023825,85.2750104 84.6875257,84.9907603 C84.8776211,84.8012603 84.9726689,84.5170103 84.9726689,84.3275102 C84.9726689,84.1380102 84.9726689,84.0432602 84.8776211,83.8537602 L82.121237,78.7372596 C82.121237,78.6425096 82.2162847,78.5477595 82.2162847,78.3582595 C82.2162847,78.1687595 82.121237,77.9792595 82.0261893,77.8845095 L72.5214165,62.9140076 C72.5214165,62.9140076 72.5214165,62.9140076 72.4263688,62.8192576 C72.4263688,62.8192576 72.4263688,62.7245076 72.331321,62.7245076 L12.8314433,2.55825031 C12.6413478,2.36875029 12.3562046,2.27400028 12.1661092,2.27400028 C11.880966,2.27400028 11.6908705,2.36875029 11.5007751,2.55825031 L9.02953416,5.02175061 L4.27714776,0.189500023 C4.08705231,0.0947500115 3.80190912,0 3.51676594,0 L3.51676594,0 Z M34.7874685,27.5722534 L27.7539366,34.6785042 L26.3282207,33.162504 L33.3617525,26.1510032 L34.7874685,27.5722534 L34.7874685,27.5722534 Z M38.9695685,31.7412539 L31.9360366,38.8475047 L29.0846048,36.0050044 L36.1181367,28.8987535 L38.9695685,31.7412539 L38.9695685,31.7412539 Z M43.1516685,35.9102544 L36.1181367,43.0165052 L33.2667048,40.1740049 L40.3002367,33.162504 L43.1516685,35.9102544 L43.1516685,35.9102544 Z M47.3337686,40.1740049 L40.3002367,47.2802557 L37.4488048,44.4377554 L44.4823367,37.3315045 L47.3337686,40.1740049 L47.3337686,40.1740049 Z M51.5158686,44.3430054 L44.4823367,51.4492563 L41.6309049,48.6067559 L48.6644368,41.500505 L51.5158686,44.3430054 L51.5158686,44.3430054 Z M31.9360366,24.729753 L24.9025047,31.7412539 L9.59982053,16.202252 L16.6333524,9.19075112 L31.9360366,24.729753 L31.9360366,24.729753 Z M12.1661092,4.73750058 L15.2076365,7.86425096 L8.26915234,14.7810018 L5.22762504,11.6542514 L12.1661092,4.73750058 L12.1661092,4.73750058 Z M24.7124093,38.7527547 L5.98800687,19.8027524 L8.17410461,17.6235021 L29.2747002,39.0370047 L24.7124093,38.7527547 L24.7124093,38.7527547 Z M45.8130049,52.7757564 L52.8465368,45.6695055 L54.177205,46.9960057 L47.1436731,54.0075066 L45.8130049,52.7757564 L45.8130049,52.7757564 Z M48.569389,55.5235067 L55.6029209,48.4172559 L70.5254142,63.4825077 L63.4918823,70.4940086 L48.569389,55.5235067 L48.569389,55.5235067 Z M80.2202825,78.2635095 L78.2242802,80.2532598 L65.012646,71.7257587 L71.6659869,64.9985079 L80.2202825,78.2635095 L80.2202825,78.2635095 Z M7.69886597,6.44300078 L6.84343642,7.29575089 L2.66133638,3.22150039 L3.51676594,2.36875029 L7.69886597,6.44300078 L7.69886597,6.44300078 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/images/watch.svg
+++ b/images/watch.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>watch</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="watch" sketch:type="MSArtboardGroup">
+            <g sketch:type="MSLayerGroup" transform="translate(64.000000, 33.000000) scale(1, -1) rotate(90.000000) translate(-64.000000, -33.000000) translate(37.000000, -27.000000)">
+                <path d="M25.268,39.056 C13.572,39.056 4.056,48.572 4.056,60.268 C4.056,71.964 13.572,81.48 25.268,81.48 C36.964,81.48 46.48,71.964 46.48,60.268 C46.48,48.572 36.964,39.056 25.268,39.056 L25.268,39.056 Z M25.268,79.635 C14.588,79.635 5.901,70.947 5.901,60.268 C5.901,49.589 14.589,40.901 25.268,40.901 C35.947,40.901 44.635,49.589 44.635,60.268 C44.635,70.947 35.948,79.635 25.268,79.635 L25.268,79.635 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+                <path d="M49.724,55.657 C48.467,48.978 44.549,43.232 39.102,39.577 L39.102,5.378 C39.102,2.835 37.034,0.767 34.491,0.767 L16.045,0.767 C13.502,0.767 11.434,2.835 11.434,5.378 L11.434,39.577 C4.766,44.05 0.367,51.653 0.367,60.268 C0.367,68.883 4.766,76.487 11.434,80.959 L11.434,115.158 C11.434,117.701 13.502,119.769 16.045,119.769 L34.49,119.769 C37.033,119.769 39.101,117.701 39.101,115.158 L39.101,80.959 C44.548,77.304 48.466,71.558 49.723,64.879 L51.09,64.879 C52.615,64.879 53.857,63.638 53.857,62.112 L53.857,58.423 C53.858,56.898 52.617,55.657 51.091,55.657 L49.724,55.657 Z M16.046,2.611 L34.491,2.611 C36.016,2.611 37.258,3.852 37.258,5.378 L37.258,38.455 C33.699,36.492 29.613,35.368 25.269,35.368 C20.925,35.368 16.839,36.492 13.28,38.455 L13.28,5.378 C13.279,3.853 14.52,2.611 16.046,2.611 Z M34.49,117.925 L16.045,117.925 C14.52,117.925 13.278,116.684 13.278,115.158 L13.278,82.082 C16.837,84.045 20.923,85.169 25.267,85.169 C29.611,85.169 33.697,84.045 37.256,82.082 L37.256,115.158 C37.257,116.683 36.016,117.925 34.49,117.925 Z M25.268,83.324 C12.555,83.324 2.212,72.981 2.212,60.268 C2.212,47.555 12.555,37.212 25.268,37.212 C37.981,37.212 48.324,47.555 48.324,60.268 C48.324,72.981 37.981,83.324 25.268,83.324 L25.268,83.324 Z M52.013,62.113 C52.013,62.621 51.599,63.035 51.091,63.035 L50.005,63.035 C50.108,62.125 50.169,61.205 50.169,60.268 C50.169,59.331 50.107,58.411 50.005,57.501 L51.091,57.501 C51.599,57.501 52.013,57.915 52.013,58.423 L52.013,62.113 L52.013,62.113 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+                <path d="M26.806,44.666 C27.973,44.778 29.126,45.021 30.234,45.39 C30.331,45.422 30.428,45.437 30.526,45.437 C30.913,45.437 31.272,45.192 31.401,44.807 C31.561,44.322 31.3,43.8 30.818,43.64 C29.579,43.227 28.289,42.955 26.983,42.829 C26.491,42.8 26.026,43.151 25.976,43.66 C25.927,44.167 26.3,44.617 26.806,44.666 L26.806,44.666 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+                <path d="M34.979,45.674 C34.56,45.393 33.985,45.505 33.7,45.93 C33.417,46.353 33.533,46.926 33.956,47.209 C36.507,48.907 38.49,51.291 39.689,54.099 C39.838,54.451 40.179,54.659 40.538,54.659 C40.659,54.659 40.783,54.636 40.9,54.585 C41.368,54.385 41.587,53.843 41.386,53.375 C40.044,50.235 37.828,47.573 34.979,45.674 L34.979,45.674 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+                <path d="M32.1347656,44.5683594 L32.1347656,60.0185547 L23.7851563,68" id="Path-71" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup" transform="translate(27.959961, 56.284180) rotate(90.000000) translate(-27.959961, -56.284180) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/index.html
+++ b/index.html
@ -6,8 +6,8 @@
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Skeleton: Responsive CSS Boilerplate</title>
-  <meta name="description" content="A dead simple, responsive boilerplate for starting any project.">
-  <meta name="author" content="Dave Gamache">
+  <meta name="description" content="">
+  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
--- a/js/site.js
+++ b/js/site.js
@ -0,0 +1,94 @@
+$(document).ready(function() {
+
+  // Variables
+  var $codeSnippets = $('.code-example-body'),
+      $nav = $('.navbar'),
+      $body = $('body'),
+      $window = $(window),
+      $popoverLink = $('[data-popover]'),
+      navOffsetTop = $nav.offset().top,
+      $document = $(document),
+      entityMap = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': '&quot;',
+        "'": '&#39;',
+        "/": '&#x2F;'
+      }
+
+  function init() {
+    $window.on('scroll', onScroll)
+    $window.on('resize', resize)
+    $popoverLink.on('click', openPopover)
+    $document.on('click', closePopover)
+    $('a[href^="#"]').on('click', smoothScroll)
+    buildSnippets();
+  }
+
+  function smoothScroll(e) {
+    e.preventDefault();
+    $(document).off("scroll");
+    var target = this.hash,
+        menu = target;
+    $target = $(target);
+    $('html, body').stop().animate({
+        'scrollTop': $target.offset().top-40
+    }, 0, 'swing', function () {
+        window.location.hash = target;
+        $(document).on("scroll", onScroll);
+    });
+  }
+
+  function openPopover(e) {
+    e.preventDefault()
+    closePopover();
+    var popover = $($(this).data('popover'));
+    popover.toggleClass('open')
+    e.stopImmediatePropagation();
+  }
+
+  function closePopover(e) {
+    if($('.popover.open').length > 0) {
+      $('.popover').removeClass('open')
+    }
+  }
+
+  $("#button").click(function() {
+    $('html, body').animate({
+        scrollTop: $("#elementtoScrollToID").offset().top
+    }, 2000);
+});
+
+  function resize() {
+    $body.removeClass('has-docked-nav')
+    navOffsetTop = $nav.offset().top
+    onScroll()
+  }
+
+  function onScroll() {
+    if(navOffsetTop < $window.scrollTop() && !$body.hasClass('has-docked-nav')) {
+      $body.addClass('has-docked-nav')
+    }
+    if(navOffsetTop > $window.scrollTop() && $body.hasClass('has-docked-nav')) {
+      $body.removeClass('has-docked-nav')
+    }
+  }
+
+  function escapeHtml(string) {
+    return String(string).replace(/[&<>"'\/]/g, function (s) {
+      return entityMap[s];
+    });
+  }
+
+  function buildSnippets() {
+    $codeSnippets.each(function() {
+      var newContent = escapeHtml($(this).html())
+      $(this).html(newContent)
+    })
+  }
+
+
+  init();
+
+});
--- a/src/images/apple-touch-icon-114x114.png
+++ b/src/images/apple-touch-icon-114x114.png
--- a/src/images/apple-touch-icon-72x72.png
+++ b/src/images/apple-touch-icon-72x72.png
--- a/src/images/apple-touch-icon.png
+++ b/src/images/apple-touch-icon.png
--- a/src/images/favicon.ico
+++ b/src/images/favicon.ico
--- a/src/stylesheets/base.css
+++ b/src/stylesheets/base.css
@ -1,269 +0,0 @@
-/*
-* Skeleton V1.2
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 6/20/2012
-*/
-
-
-/* Table of Content
-==================================================
-	#Reset & Basics
-	#Basic Styles
-	#Site Styles
-	#Typography
-	#Links
-	#Lists
-	#Images
-	#Buttons
-	#Forms
-	#Misc */
-
-
-/* #Reset & Basics (Inspired by E. Meyers)
-================================================== */
-	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
-		margin: 0;
-		padding: 0;
-		border: 0;
-		font-size: 100%;
-		font: inherit;
-		vertical-align: baseline; }
-	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-		display: block; }
-	body {
-		line-height: 1; }
-	ol, ul {
-		list-style: none; }
-	blockquote, q {
-		quotes: none; }
-	blockquote:before, blockquote:after,
-	q:before, q:after {
-		content: '';
-		content: none; }
-	table {
-		border-collapse: collapse;
-		border-spacing: 0; }
-
-
-/* #Basic Styles
-================================================== */
-	body {
-		background: #fff;
-		font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-		color: #444;
-		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-		-webkit-text-size-adjust: 100%;
- }
-
-
-/* #Typography
-================================================== */
-	h1, h2, h3, h4, h5, h6 {
-		color: #181818;
-		font-family: "Georgia", "Times New Roman", serif;
-		font-weight: normal; }
-	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
-	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
-	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
-	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
-	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
-	h5 { font-size: 17px; line-height: 24px; }
-	h6 { font-size: 14px; line-height: 21px; }
-	.subheader { color: #777; }
-
-	p { margin: 0 0 20px 0; }
-	p img { margin: 0; }
-	p.lead { font-size: 21px; line-height: 27px; color: #777;  }
-
-	em { font-style: italic; }
-	strong { font-weight: bold; color: #333; }
-	small { font-size: 80%; }
-
-/*	Blockquotes  */
-	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
-	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
-	blockquote cite { display: block; font-size: 12px; color: #555; }
-	blockquote cite:before { content: "\2014 \0020"; }
-	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
-
-	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
-
-
-/* #Links
-================================================== */
-	a, a:visited { color: #333; text-decoration: underline; outline: 0; }
-	a:hover, a:focus { color: #000; }
-	p a, p a:visited { line-height: inherit; }
-
-
-/* #Lists
-================================================== */
-	ul, ol { margin-bottom: 20px; }
-	ul { list-style: none outside; }
-	ol { list-style: decimal; }
-	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
-	ul.square { list-style: square outside; }
-	ul.circle { list-style: circle outside; }
-	ul.disc { list-style: disc outside; }
-	ul ul, ul ol,
-	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
-	ul ul li, ul ol li,
-	ol ol li, ol ul li { margin-bottom: 6px; }
-	li { line-height: 18px; margin-bottom: 12px; }
-	ul.large li { line-height: 21px; }
-	li p { line-height: 21px; }
-
-/* #Images
-================================================== */
-
-	img.scale-with-grid {
-		max-width: 100%;
-		height: auto; }
-
-
-/* #Buttons
-================================================== */
-
-	.button,
-	button,
-	input[type="submit"],
-	input[type="reset"],
-	input[type="button"] {
-		background: #eee; /* Old browsers */
-		background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
-		background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
-		background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
-		background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
-		background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
-		background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
-	  border: 1px solid #aaa;
-	  border-top: 1px solid #ccc;
-	  border-left: 1px solid #ccc;
-	  -moz-border-radius: 3px;
-	  -webkit-border-radius: 3px;
-	  border-radius: 3px;
-	  color: #444;
-	  display: inline-block;
-	  font-size: 11px;
-	  font-weight: bold;
-	  text-decoration: none;
-	  text-shadow: 0 1px rgba(255, 255, 255, .75);
-	  cursor: pointer;
-	  margin-bottom: 20px;
-	  line-height: normal;
-	  padding: 8px 10px;
-	  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
-
-	.button:hover,
-	button:hover,
-	input[type="submit"]:hover,
-	input[type="reset"]:hover,
-	input[type="button"]:hover {
-		color: #222;
-		background: #ddd; /* Old browsers */
-		background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
-		background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
-		background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
-		background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
-		background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
-		background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
-	  border: 1px solid #888;
-	  border-top: 1px solid #aaa;
-	  border-left: 1px solid #aaa; }
-
-	.button:active,
-	button:active,
-	input[type="submit"]:active,
-	input[type="reset"]:active,
-	input[type="button"]:active {
-		border: 1px solid #666;
-		background: #ccc; /* Old browsers */
-		background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
-		background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
-		background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
-		background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
-		background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
-		background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
-
-	.button.full-width,
-	button.full-width,
-	input[type="submit"].full-width,
-	input[type="reset"].full-width,
-	input[type="button"].full-width {
-		width: 100%;
-		padding-left: 0 !important;
-		padding-right: 0 !important;
-		text-align: center; }
-
-	/* Fix for odd Mozilla border & padding issues */
-	button::-moz-focus-inner,
-	input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-	}
-
-
-/* #Forms
-================================================== */
-
-	form {
-		margin-bottom: 20px; }
-	fieldset {
-		margin-bottom: 20px; }
-	input[type="text"],
-	input[type="password"],
-	input[type="email"],
-	textarea,
-	select {
-		border: 1px solid #ccc;
-		padding: 6px 4px;
-		outline: none;
-		-moz-border-radius: 2px;
-		-webkit-border-radius: 2px;
-		border-radius: 2px;
-		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-		color: #777;
-		margin: 0;
-		width: 210px;
-		max-width: 100%;
-		display: block;
-		margin-bottom: 20px;
-		background: #fff; }
-	select {
-		padding: 0; }
-	input[type="text"]:focus,
-	input[type="password"]:focus,
-	input[type="email"]:focus,
-	textarea:focus {
-		border: 1px solid #aaa;
- 		color: #444;
- 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
-		box-shadow:  0 0 3px rgba(0,0,0,.2); }
-	textarea {
-		min-height: 60px; }
-	label,
-	legend {
-		display: block;
-		font-weight: bold;
-		font-size: 13px;  }
-	select {
-		width: 220px; }
-	input[type="checkbox"] {
-		display: inline; }
-	label span,
-	legend span {
-		font-weight: normal;
-		font-size: 13px;
-		color: #444; }
-
-/* #Misc
-================================================== */
-	.remove-bottom { margin-bottom: 0 !important; }
-	.half-bottom { margin-bottom: 10px !important; }
-	.add-bottom { margin-bottom: 20px !important; }
-
-
--- a/src/stylesheets/layout.css
+++ b/src/stylesheets/layout.css
@ -1,58 +0,0 @@
-/*
-* Skeleton V1.2
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 6/20/2012
-*/
-
-/* Table of Content
-==================================================
-	#Site Styles
-	#Page Styles
-	#Media Queries
-	#Font-Face */
-
-/* #Site Styles
-================================================== */
-
-/* #Page Styles
-================================================== */
-
-/* #Media Queries
-================================================== */
-
-	/* Smaller than standard 960 (devices and browsers) */
-	@media only screen and (max-width: 959px) {}
-
-	/* Tablet Portrait size to standard 960 (devices and browsers) */
-	@media only screen and (min-width: 768px) and (max-width: 959px) {}
-
-	/* All Mobile Sizes (devices and browser) */
-	@media only screen and (max-width: 767px) {}
-
-	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
-	@media only screen and (min-width: 480px) and (max-width: 767px) {}
-
-	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
-	@media only screen and (max-width: 479px) {}
-
-
-/* #Font-Face
-================================================== */
-/* 	This is the proper syntax for an @font-face file
-		Just create a "fonts" folder at the root,
-		copy your FontName into code below and remove
-		comment brackets */
-
-/*	@font-face {
-	    font-family: 'FontName';
-	    src: url('../fonts/FontName.eot');
-	    src: url('../fonts/FontName.eot?iefix') format('eot'),
-	         url('../fonts/FontName.woff') format('woff'),
-	         url('../fonts/FontName.ttf') format('truetype'),
-	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
-	    font-weight: normal;
-	    font-style: normal; }
-*/
--- a/src/stylesheets/skeleton.css
+++ b/src/stylesheets/skeleton.css
@ -1,242 +0,0 @@
-/*
-* Skeleton V1.2
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 6/20/2012
-*/
-
-
-/* Table of Contents
-==================================================
-    #Base 960 Grid
-    #Tablet (Portrait)
-    #Mobile (Portrait)
-    #Mobile (Landscape)
-    #Clearing */
-
-
-
-/* #Base 960 Grid
-================================================== */
-
-    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
-    .container .column,
-    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
-    .row                                        { margin-bottom: 20px; }
-
-    /* Nested Column Classes */
-    .column.alpha, .columns.alpha               { margin-left: 0; }
-    .column.omega, .columns.omega               { margin-right: 0; }
-
-    /* Base Grid */
-    .container .one.column,
-    .container .one.columns                     { width: 40px;  }
-    .container .two.columns                     { width: 100px; }
-    .container .three.columns                   { width: 160px; }
-    .container .four.columns                    { width: 220px; }
-    .container .five.columns                    { width: 280px; }
-    .container .six.columns                     { width: 340px; }
-    .container .seven.columns                   { width: 400px; }
-    .container .eight.columns                   { width: 460px; }
-    .container .nine.columns                    { width: 520px; }
-    .container .ten.columns                     { width: 580px; }
-    .container .eleven.columns                  { width: 640px; }
-    .container .twelve.columns                  { width: 700px; }
-    .container .thirteen.columns                { width: 760px; }
-    .container .fourteen.columns                { width: 820px; }
-    .container .fifteen.columns                 { width: 880px; }
-    .container .sixteen.columns                 { width: 940px; }
-
-    .container .one-third.column                { width: 300px; }
-    .container .two-thirds.column               { width: 620px; }
-
-    /* Offsets */
-    .container .offset-by-one                   { padding-left: 60px;  }
-    .container .offset-by-two                   { padding-left: 120px; }
-    .container .offset-by-three                 { padding-left: 180px; }
-    .container .offset-by-four                  { padding-left: 240px; }
-    .container .offset-by-five                  { padding-left: 300px; }
-    .container .offset-by-six                   { padding-left: 360px; }
-    .container .offset-by-seven                 { padding-left: 420px; }
-    .container .offset-by-eight                 { padding-left: 480px; }
-    .container .offset-by-nine                  { padding-left: 540px; }
-    .container .offset-by-ten                   { padding-left: 600px; }
-    .container .offset-by-eleven                { padding-left: 660px; }
-    .container .offset-by-twelve                { padding-left: 720px; }
-    .container .offset-by-thirteen              { padding-left: 780px; }
-    .container .offset-by-fourteen              { padding-left: 840px; }
-    .container .offset-by-fifteen               { padding-left: 900px; }
-
-
-
-/* #Tablet (Portrait)
-================================================== */
-
-    /* Note: Design for a width of 768px */
-
-    @media only screen and (min-width: 768px) and (max-width: 959px) {
-        .container                                  { width: 768px; }
-        .container .column,
-        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
-        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
-        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
-        .alpha.omega                                { margin-left: 0; margin-right: 0; }
-
-        .container .one.column,
-        .container .one.columns                     { width: 28px; }
-        .container .two.columns                     { width: 76px; }
-        .container .three.columns                   { width: 124px; }
-        .container .four.columns                    { width: 172px; }
-        .container .five.columns                    { width: 220px; }
-        .container .six.columns                     { width: 268px; }
-        .container .seven.columns                   { width: 316px; }
-        .container .eight.columns                   { width: 364px; }
-        .container .nine.columns                    { width: 412px; }
-        .container .ten.columns                     { width: 460px; }
-        .container .eleven.columns                  { width: 508px; }
-        .container .twelve.columns                  { width: 556px; }
-        .container .thirteen.columns                { width: 604px; }
-        .container .fourteen.columns                { width: 652px; }
-        .container .fifteen.columns                 { width: 700px; }
-        .container .sixteen.columns                 { width: 748px; }
-
-        .container .one-third.column                { width: 236px; }
-        .container .two-thirds.column               { width: 492px; }
-
-        /* Offsets */
-        .container .offset-by-one                   { padding-left: 48px; }
-        .container .offset-by-two                   { padding-left: 96px; }
-        .container .offset-by-three                 { padding-left: 144px; }
-        .container .offset-by-four                  { padding-left: 192px; }
-        .container .offset-by-five                  { padding-left: 240px; }
-        .container .offset-by-six                   { padding-left: 288px; }
-        .container .offset-by-seven                 { padding-left: 336px; }
-        .container .offset-by-eight                 { padding-left: 384px; }
-        .container .offset-by-nine                  { padding-left: 432px; }
-        .container .offset-by-ten                   { padding-left: 480px; }
-        .container .offset-by-eleven                { padding-left: 528px; }
-        .container .offset-by-twelve                { padding-left: 576px; }
-        .container .offset-by-thirteen              { padding-left: 624px; }
-        .container .offset-by-fourteen              { padding-left: 672px; }
-        .container .offset-by-fifteen               { padding-left: 720px; }
-    }
-
-
-/*  #Mobile (Portrait)
-================================================== */
-
-    /* Note: Design for a width of 320px */
-
-    @media only screen and (max-width: 767px) {
-        .container { width: 300px; }
-        .container .columns,
-        .container .column { margin: 0; }
-
-        .container .one.column,
-        .container .one.columns,
-        .container .two.columns,
-        .container .three.columns,
-        .container .four.columns,
-        .container .five.columns,
-        .container .six.columns,
-        .container .seven.columns,
-        .container .eight.columns,
-        .container .nine.columns,
-        .container .ten.columns,
-        .container .eleven.columns,
-        .container .twelve.columns,
-        .container .thirteen.columns,
-        .container .fourteen.columns,
-        .container .fifteen.columns,
-        .container .sixteen.columns,
-        .container .one-third.column,
-        .container .two-thirds.column  { width: 300px; }
-
-        /* Offsets */
-        .container .offset-by-one,
-        .container .offset-by-two,
-        .container .offset-by-three,
-        .container .offset-by-four,
-        .container .offset-by-five,
-        .container .offset-by-six,
-        .container .offset-by-seven,
-        .container .offset-by-eight,
-        .container .offset-by-nine,
-        .container .offset-by-ten,
-        .container .offset-by-eleven,
-        .container .offset-by-twelve,
-        .container .offset-by-thirteen,
-        .container .offset-by-fourteen,
-        .container .offset-by-fifteen { padding-left: 0; }
-
-    }
-
-
-/* #Mobile (Landscape)
-================================================== */
-
-    /* Note: Design for a width of 480px */
-
-    @media only screen and (min-width: 480px) and (max-width: 767px) {
-        .container { width: 420px; }
-        .container .columns,
-        .container .column { margin: 0; }
-
-        .container .one.column,
-        .container .one.columns,
-        .container .two.columns,
-        .container .three.columns,
-        .container .four.columns,
-        .container .five.columns,
-        .container .six.columns,
-        .container .seven.columns,
-        .container .eight.columns,
-        .container .nine.columns,
-        .container .ten.columns,
-        .container .eleven.columns,
-        .container .twelve.columns,
-        .container .thirteen.columns,
-        .container .fourteen.columns,
-        .container .fifteen.columns,
-        .container .sixteen.columns,
-        .container .one-third.column,
-        .container .two-thirds.column { width: 420px; }
-    }
-
-
-/* #Clearing
-================================================== */
-
-    /* Self Clearing Goodness */
-    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
-
-    /* Use clearfix class on parent to clear nested columns,
-    or wrap each row of columns in a <div class="row"> */
-    .clearfix:before,
-    .clearfix:after,
-    .row:before,
-    .row:after {
-      content: '\0020';
-      display: block;
-      overflow: hidden;
-      visibility: hidden;
-      width: 0;
-      height: 0; }
-    .row:after,
-    .clearfix:after {
-      clear: both; }
-    .row,
-    .clearfix {
-      zoom: 1; }
-
-    /* You can also use a <br class="clear" /> to clear columns */
-    .clear {
-      clear: both;
-      display: block;
-      overflow: hidden;
-      visibility: hidden;
-      width: 0;
-      height: 0;
-    }