From 72ac45045456bdbbbecb38db2e62e113f22f37d4 Mon Sep 17 00:00:00 2001
From: Barry Clark <barry@barryclark.co>
Date: Thu, 6 Feb 2014 19:18:00 -0500
Subject: [PATCH] First commit of base theme.

---
 .gitignore                   |   9 +
 Gruntfile.js                 |  30 +++
 README.md                    |   2 +
 _config.yml                  |  25 ++
 _includes/analytics.html     |  14 ++
 _includes/disqus.html        |  16 ++
 _layouts/default.html        |  42 ++++
 _layouts/page.html           |  11 +
 _layouts/post.html           |  15 ++
 _posts/2014-1-1-Test-Post.md |  10 +
 about.html                   |   8 +
 blog.html                    |  27 +++
 index.html                   |  35 +++
 scss/_highlights.scss        |  60 +++++
 scss/_mixins.scss            |   6 +
 scss/_reset.scss             |  48 ++++
 scss/_variables.scss         |  32 +++
 scss/style.scss              | 216 ++++++++++++++++++
 sitemap.xml                  |  52 +++++
 style.css                    | 431 +++++++++++++++++++++++++++++++++++
 20 files changed, 1089 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 Gruntfile.js
 create mode 100644 README.md
 create mode 100644 _config.yml
 create mode 100644 _includes/analytics.html
 create mode 100644 _includes/disqus.html
 create mode 100644 _layouts/default.html
 create mode 100644 _layouts/page.html
 create mode 100644 _layouts/post.html
 create mode 100644 _posts/2014-1-1-Test-Post.md
 create mode 100644 about.html
 create mode 100644 blog.html
 create mode 100644 index.html
 create mode 100644 scss/_highlights.scss
 create mode 100644 scss/_mixins.scss
 create mode 100644 scss/_reset.scss
 create mode 100644 scss/_variables.scss
 create mode 100755 scss/style.scss
 create mode 100644 sitemap.xml
 create mode 100644 style.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000..e5d2d8f12cc3e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,9 @@
+_site
+.DS_Store
+.jekyll
+.bundle
+.sass-cache
+Gemfile
+Gemfile.lock
+node_modules/*
+package.json
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000000000..663cb1a954fce
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,30 @@
+
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON("package.json"),
+
+    watch: {
+      sass: {
+        files: ["scss/**/*.{scss,sass}"],
+        tasks: ["sass:dev"]
+      }
+    },
+
+    sass: {
+      dev: {
+        options: {
+          style: 'nested'
+        },
+        files: {
+          '_site/style.css': 'scss/style.scss',
+          'style.css': 'scss/style.scss'
+        }
+      },
+    },
+  });
+
+  grunt.registerTask("default", ["watch"]);
+
+  grunt.loadNpmTasks('grunt-sass');
+  grunt.loadNpmTasks("grunt-contrib-watch");
+};
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000..3e8f208a62e95
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+
+# README
\ No newline at end of file
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000000000..d49bef6e9f295
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,25 @@
+name: Jekyll Boilerplate
+
+markdown: redcarpet
+markdown_ext: md
+
+pygments: true
+
+exclude:
+    - Gemfile
+    - Gemfile.lock
+    - scss
+    - js
+    - README.md
+
+disqus:
+    shortname: ''
+
+googleanalytics:
+    id: ''
+
+links:
+    #github: https://github.com/YOUR-USERNAME
+    #twitter: https://twitter.com/YOUR-USERNAME
+    #linkedin: https://linkedin.com/in/YOUR-USERNAME
+    #avatar: http://YOUR-USERNAME.github.io/images/avatar.jpg
diff --git a/_includes/analytics.html b/_includes/analytics.html
new file mode 100644
index 0000000000000..670796326e46f
--- /dev/null
+++ b/_includes/analytics.html
@@ -0,0 +1,14 @@
+<!-- Google Analytics -->
+<script type="text/javascript">
+
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', '{{ site.googleanalytics.id }}']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+
+</script>
\ No newline at end of file
diff --git a/_includes/disqus.html b/_includes/disqus.html
new file mode 100644
index 0000000000000..82f4fe5503c03
--- /dev/null
+++ b/_includes/disqus.html
@@ -0,0 +1,16 @@
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+      /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+      var disqus_shortname = '{{ site.disqus.shortname }}'; // required: replace example with your forum shortname
+
+      {% if include.disqus_identifier %}
+      var disqus_identifier = "{{ include.disqus_identifier }}";
+      {% endif %}
+
+      (function() {
+          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+      })();
+  </script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 0000000000000..34dc7b31d1b45
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
+
+    <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.name }}</title>
+
+    <meta name="author" content="{{ site.name }}" />
+    <meta name="description" content="{{ site.description }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <!--[if IE]>
+      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <link rel="stylesheet" type="text/css" href="/style.css" />
+  </head>
+
+  <body>
+    <header>
+      <a href="/" class="logo"><img src="/404.ups" /></a>
+      
+      <nav>
+        <a href="/">Blog</a>
+        <a href="/about">About</a>
+      </nav>
+
+      <div style="clear:both;"></div>
+    </header>
+
+    <div id="main" role="main">{{ content }}</div>
+      
+    <footer>
+        <p></p>
+    </footer>
+
+    {% include analytics.html %}
+  </body>
+</html>
diff --git a/_layouts/page.html b/_layouts/page.html
new file mode 100644
index 0000000000000..7f97e69f4bdf1
--- /dev/null
+++ b/_layouts/page.html
@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<article class="page">
+  <h1>{{ page.title }}</h1>
+
+  <div class="entry">
+    {{ content }}
+  </div>
+</article>
diff --git a/_layouts/post.html b/_layouts/post.html
new file mode 100644
index 0000000000000..4a3c140dca77d
--- /dev/null
+++ b/_layouts/post.html
@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+<article class="post">
+  <h1>{{ page.title }}</h1>
+
+  <div class="entry">
+    {{ content }}
+  </div>
+
+  <section id="comments">
+    {% include disqus.html disqus_identifier=page.disqus_identifier %}
+  </section>
+</article>
diff --git a/_posts/2014-1-1-Test-Post.md b/_posts/2014-1-1-Test-Post.md
new file mode 100644
index 0000000000000..02d6ba363ffd9
--- /dev/null
+++ b/_posts/2014-1-1-Test-Post.md
@@ -0,0 +1,10 @@
+---
+layout: post
+title: Test Post
+---
+
+First test post! 
+
+### H3
+
+Hoy hoy hoy!
diff --git a/about.html b/about.html
new file mode 100644
index 0000000000000..0f7fa61fbfd95
--- /dev/null
+++ b/about.html
@@ -0,0 +1,8 @@
+---
+layout: default
+title: About
+---
+
+# About Me
+
+About page content
\ No newline at end of file
diff --git a/blog.html b/blog.html
new file mode 100644
index 0000000000000..0a9f265fba95c
--- /dev/null
+++ b/blog.html
@@ -0,0 +1,27 @@
+---
+layout: default
+title: Blog
+---
+
+<h1>Blog</h1>
+
+<ul class="posts">
+  {% for post in site.posts %}
+    <li>
+      <article class="post">
+        <header>
+          <time datetime="{{ post.date }}">{{ post.date | date: "%m.%d.%Y" }}</time>
+          <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+        </header>
+
+        <div class="entry">
+          {{ post.content | truncatewords:85}}
+
+          <p class="read-more">
+            <a href="{{ post.url }}">Read more</a>
+          </p>
+        </div>
+      </article>
+    </li>
+  {% endfor %}
+</ul>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000..7a0d4be3defd4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,35 @@
+---
+layout: default
+---
+
+<div class="hero"> 
+  <img src="/images/avatar.jpg"/>
+  <h1>Hi. Introduce yourself.</h1>
+  <p>Introduce yourself.</p>
+  <div style="clear:both;"></div>
+</div>
+
+<div class="articles"> 
+  <h2><a href="/blog">Blog</a></h2>
+
+  <div class="article">
+    <!-- <img src="assets/img/article1.jpg"/> -->
+    <h3>Article Title</h3>
+    <p>Article description text. Article description text. Article description text. Article description text. Article description text. Article description text. Article description text.</p>
+    </p>
+  </div>
+
+  <div class="article">
+    <!-- <img src="assets/img/article2.jpg"/> -->
+    <h3>Article Title</h3>
+    <p>Article description text. Article description text. Article description text. Article description text. Article description text. Article description text. Article description text.</p>
+    </p>
+  </div>
+
+  <div class="article">
+    <!-- <img src="assets/img/article3.jpg"/> -->
+    <h3>Article Title</h3>
+    <p>Article description text. Article description text. Article description text. Article description text. Article description text. Article description text. Article description text.</p>
+    </p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/scss/_highlights.scss b/scss/_highlights.scss
new file mode 100644
index 0000000000000..1e651cf79db82
--- /dev/null
+++ b/scss/_highlights.scss
@@ -0,0 +1,60 @@
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
\ No newline at end of file
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
new file mode 100644
index 0000000000000..d6da0e925a15b
--- /dev/null
+++ b/scss/_mixins.scss
@@ -0,0 +1,6 @@
+
+// Define font-size and line height together
+@mixin font-size-line-height($font-size, $line-height) {
+  font-size: $font-size;
+  line-height: $line-height;
+}
diff --git a/scss/_reset.scss b/scss/_reset.scss
new file mode 100644
index 0000000000000..c50757bc1351f
--- /dev/null
+++ b/scss/_reset.scss
@@ -0,0 +1,48 @@
+
+//
+// RESET
+//
+
+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;
+}
+/* HTML5 display-role reset for older browsers */
+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;
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
new file mode 100644
index 0000000000000..0a85575992d66
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,32 @@
+
+//
+// VARIABLES
+//
+
+// Colors
+$blue: #4183C4; 
+$orange: #D26911;
+
+// Grays
+$black: #000;
+$darkerGray: #222;
+$darkGray: #333;
+$gray: #666;
+$lightGray: #bbb;
+$lighterGray: #eee;
+$white: #fff;
+
+// Font stacks
+$helvetica: Helvetica, Arial, sans-serif;
+$helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$georgia: Georgia, serif;
+
+// Breakpoints
+$mobile-width: 520px !default;
+
+// Mobile breakpoint
+@mixin mobile {
+  @media screen and (max-width: $mobile-width) {
+    @content;
+  }
+}
diff --git a/scss/style.scss b/scss/style.scss
new file mode 100755
index 0000000000000..f49ed626acbaf
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,216 @@
+
+//
+// IMPORTS
+//
+
+@import "_reset";
+@import "_variables";
+@import "_mixins";
+@import "_highlights"; // Tempted to move this to the end of the file, so that it shows up at the end of the .css
+
+//
+// BASE RULES
+//
+
+html {
+  font-size: 100%;
+}
+
+body {
+  max-width: 820px;
+	margin: 0 auto;
+	
+	background: $white;
+  font: 18px/1.4 $helvetica;
+  color: $darkGray;
+}
+
+h1, h2, h3, h4, h5, h6, .section > header {
+  font-family: $helveticaNeue;
+  color: $darkerGray;
+  font-weight: bold;
+  
+  line-height: 1.7;
+  margin: 2em 0 15px;
+  padding: 0;
+}
+
+h1 {  
+  font-size: 2rem;
+  @include mobile {
+    font-size: 2rem;
+  }
+}
+
+h2 {  
+  letter-spacing: 1px;
+  font-weight: 300;
+
+  font-size: 1.7rem;
+  @include mobile {
+    font-size: 1.5rem;
+  }
+}
+
+h3 {  
+  font-weight: 600;
+
+  font-size: 1.2rem;
+  @include mobile {
+    font-size: 1.2rem;
+  }
+}
+
+h4 {  
+  font-size: 1rem;
+  @include mobile {
+    font-size: 1rem;
+  }
+}
+
+p {
+  margin: 15px 0;
+}
+
+a {
+  text-decoration: none;
+	cursor: pointer;
+	color: $blue;
+	&:hover, &:active {
+    text-decoration: underline;
+  }
+}
+
+ul {
+  padding-left: 30px;
+  list-style-type: disc;
+}
+
+// Specify the color of the selection
+::-moz-selection {
+  color: $black;
+  background: $lighterGray;
+}
+::selection {
+  color: $black;
+  background: $lighterGray;
+}
+
+
+//
+// LAYOUT / SECTIONS
+//
+
+header {
+  margin: 40px 0;
+}
+
+.logo {
+  float: left;
+
+  a {
+    text-decoration: none;
+    cursor: pointer;
+    color: $darkGray;
+    &:hover, &:active {
+      color: $blue;
+    }
+  }
+}
+
+nav {
+  float: right;
+
+  font-family: $helveticaNeue; 
+  font-size: 1.1rem;
+  @include mobile {
+    font-size: 1rem;
+  }
+
+  a {
+    margin-left: 25px;
+    text-align: right;
+    font-weight: 300;
+    letter-spacing: 1px;
+    color: $gray;
+
+    &:hover, &:active {
+      text-decoration: none;
+      cursor: pointer;
+      color: $darkGray;
+      &:hover, &:active {
+        color: $blue;
+      }
+    }
+  }
+}
+
+.logo, nav {
+  @include mobile {
+    float: none;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.hero {
+  margin: 80px 20px 40px;
+  @include mobile {
+    margin: 40px 0;
+  }
+
+  img {
+    float: left;
+    width: 160px;
+    padding-right: 30px;
+  }
+
+  h1 {
+  float: left;
+  width: 590px;
+
+  margin: 0;
+
+  font-weight: 400;
+  font-size: 2.5rem;
+  line-height: 1.3;
+    @include mobile {
+      font-size: 2.5rem;
+    }
+  }
+
+  p {
+    float: left;
+    width: 590px;
+  }
+}
+
+article {
+  width: 700px;
+  //margin: 0 auto;
+  
+  @include mobile {
+    width: 100%;
+  }
+
+  blockquote {
+    border-left: 2px solid $gray;
+    font-size: 1.2em;
+    font-style: italic;
+    margin: 1.8em .8em;
+    padding: 0.1em 1em;
+    color: $gray;
+  }
+}
+
+footer {
+	text-align: center;
+
+  border-top: 1px $lightGray solid;
+  padding: 1rem 0;
+
+  p {
+    margin: 0 0 1rem 0;
+    font-size: 14px;
+  }
+}
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 0000000000000..15d799f5f67a7
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,52 @@
+---
+layout: none
+sitemap:
+    priority: 0.7
+    changefreq: monthly
+    lastmod: 2013-11-16T10:17:00-05:00
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>{{ site.url }}/</loc>
+    <lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  {% for post in site.posts %}
+    <url>
+      <loc>{{ site.url }}{{ post.url }}</loc>
+      {% if post.lastmod == null %}
+        <lastmod>{{ post.date | date_to_xmlschema }}</lastmod>
+      {% else %}
+        <lastmod>{{ post.lastmod | date_to_xmlschema }}</lastmod>
+      {% endif %}
+      <changefreq>monthly</changefreq>
+      <priority>0.5</priority>
+    </url>
+  {% endfor %}
+  {% for page in site.pages %}
+  <url>
+    <loc>{{ site.url }}{{ page.url }}</loc>
+    {% if page.sitemap.lastmod %}
+      <lastmod>{{ page.sitemap.lastmod | date: "%Y-%m-%d" }}</lastmod>
+    {% elsif page.lastmod %}
+      <lastmod>{{ page.lastmod | date: "%Y-%m-%d" }}</lastmod>
+    {% elsif page.date %}
+      <lastmod>{{ page.date | date: "%Y-%m-%d" }}</lastmod>
+    {% else %}
+      <lastmod>{{ site.time | date: "%Y-%m-%d" }}</lastmod>
+    {% endif %}
+    {% if page.sitemap.changefreq %}
+      <changefreq>{{ page.sitemap.changefreq }}</changefreq>
+    {% else %}
+      <changefreq>monthly</changefreq>
+    {% endif %}
+    {% if page.sitemap.priority %}
+      <priority>{{ page.sitemap.priority }}</priority>
+    {% else %}
+      <priority>0.3</priority>
+    {% endif %}
+  </url>
+  {% endfor %}
+</urlset>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000000000..3d3057176ded6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,431 @@
+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; }
+
+/* HTML5 display-role reset for older browsers */
+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; }
+
+.highlight {
+  background: white; }
+
+.highlight .c {
+  color: #999988;
+  font-style: italic; }
+
+/* Comment */
+.highlight .err {
+  color: #a61717;
+  background-color: #e3d2d2; }
+
+/* Error */
+.highlight .k {
+  font-weight: bold; }
+
+/* Keyword */
+.highlight .o {
+  font-weight: bold; }
+
+/* Operator */
+.highlight .cm {
+  color: #999988;
+  font-style: italic; }
+
+/* Comment.Multiline */
+.highlight .cp {
+  color: #999999;
+  font-weight: bold; }
+
+/* Comment.Preproc */
+.highlight .c1 {
+  color: #999988;
+  font-style: italic; }
+
+/* Comment.Single */
+.highlight .cs {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic; }
+
+/* Comment.Special */
+.highlight .gd {
+  color: black;
+  background-color: #ffdddd; }
+
+/* Generic.Deleted */
+.highlight .gd .x {
+  color: black;
+  background-color: #ffaaaa; }
+
+/* Generic.Deleted.Specific */
+.highlight .ge {
+  font-style: italic; }
+
+/* Generic.Emph */
+.highlight .gr {
+  color: #aa0000; }
+
+/* Generic.Error */
+.highlight .gh {
+  color: #999999; }
+
+/* Generic.Heading */
+.highlight .gi {
+  color: black;
+  background-color: #ddffdd; }
+
+/* Generic.Inserted */
+.highlight .gi .x {
+  color: black;
+  background-color: #aaffaa; }
+
+/* Generic.Inserted.Specific */
+.highlight .go {
+  color: #888888; }
+
+/* Generic.Output */
+.highlight .gp {
+  color: #555555; }
+
+/* Generic.Prompt */
+.highlight .gs {
+  font-weight: bold; }
+
+/* Generic.Strong */
+.highlight .gu {
+  color: #aaaaaa; }
+
+/* Generic.Subheading */
+.highlight .gt {
+  color: #aa0000; }
+
+/* Generic.Traceback */
+.highlight .kc {
+  font-weight: bold; }
+
+/* Keyword.Constant */
+.highlight .kd {
+  font-weight: bold; }
+
+/* Keyword.Declaration */
+.highlight .kp {
+  font-weight: bold; }
+
+/* Keyword.Pseudo */
+.highlight .kr {
+  font-weight: bold; }
+
+/* Keyword.Reserved */
+.highlight .kt {
+  color: #445588;
+  font-weight: bold; }
+
+/* Keyword.Type */
+.highlight .m {
+  color: #009999; }
+
+/* Literal.Number */
+.highlight .s {
+  color: #dd1144; }
+
+/* Literal.String */
+.highlight .na {
+  color: teal; }
+
+/* Name.Attribute */
+.highlight .nb {
+  color: #0086b3; }
+
+/* Name.Builtin */
+.highlight .nc {
+  color: #445588;
+  font-weight: bold; }
+
+/* Name.Class */
+.highlight .no {
+  color: teal; }
+
+/* Name.Constant */
+.highlight .ni {
+  color: purple; }
+
+/* Name.Entity */
+.highlight .ne {
+  color: #990000;
+  font-weight: bold; }
+
+/* Name.Exception */
+.highlight .nf {
+  color: #990000;
+  font-weight: bold; }
+
+/* Name.Function */
+.highlight .nn {
+  color: #555555; }
+
+/* Name.Namespace */
+.highlight .nt {
+  color: navy; }
+
+/* Name.Tag */
+.highlight .nv {
+  color: teal; }
+
+/* Name.Variable */
+.highlight .ow {
+  font-weight: bold; }
+
+/* Operator.Word */
+.highlight .w {
+  color: #bbbbbb; }
+
+/* Text.Whitespace */
+.highlight .mf {
+  color: #009999; }
+
+/* Literal.Number.Float */
+.highlight .mh {
+  color: #009999; }
+
+/* Literal.Number.Hex */
+.highlight .mi {
+  color: #009999; }
+
+/* Literal.Number.Integer */
+.highlight .mo {
+  color: #009999; }
+
+/* Literal.Number.Oct */
+.highlight .sb {
+  color: #dd1144; }
+
+/* Literal.String.Backtick */
+.highlight .sc {
+  color: #dd1144; }
+
+/* Literal.String.Char */
+.highlight .sd {
+  color: #dd1144; }
+
+/* Literal.String.Doc */
+.highlight .s2 {
+  color: #dd1144; }
+
+/* Literal.String.Double */
+.highlight .se {
+  color: #dd1144; }
+
+/* Literal.String.Escape */
+.highlight .sh {
+  color: #dd1144; }
+
+/* Literal.String.Heredoc */
+.highlight .si {
+  color: #dd1144; }
+
+/* Literal.String.Interpol */
+.highlight .sx {
+  color: #dd1144; }
+
+/* Literal.String.Other */
+.highlight .sr {
+  color: #009926; }
+
+/* Literal.String.Regex */
+.highlight .s1 {
+  color: #dd1144; }
+
+/* Literal.String.Single */
+.highlight .ss {
+  color: #990073; }
+
+/* Literal.String.Symbol */
+.highlight .bp {
+  color: #999999; }
+
+/* Name.Builtin.Pseudo */
+.highlight .vc {
+  color: teal; }
+
+/* Name.Variable.Class */
+.highlight .vg {
+  color: teal; }
+
+/* Name.Variable.Global */
+.highlight .vi {
+  color: teal; }
+
+/* Name.Variable.Instance */
+.highlight .il {
+  color: #009999; }
+
+/* Literal.Number.Integer.Long */
+html {
+  font-size: 100%; }
+
+body {
+  max-width: 820px;
+  margin: 0 auto;
+  background: white;
+  font: 18px/1.4 Helvetica, Arial, sans-serif;
+  color: #333333; }
+
+h1, h2, h3, h4, h5, h6, .section > header {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222222;
+  font-weight: bold;
+  line-height: 1.7;
+  margin: 2em 0 15px;
+  padding: 0; }
+
+h1 {
+  font-size: 2rem; }
+  @media screen and (max-width: 520px) {
+    h1 {
+      font-size: 2rem; } }
+
+h2 {
+  letter-spacing: 1px;
+  font-weight: 300;
+  font-size: 1.7rem; }
+  @media screen and (max-width: 520px) {
+    h2 {
+      font-size: 1.5rem; } }
+
+h3 {
+  font-weight: 600;
+  font-size: 1.2rem; }
+  @media screen and (max-width: 520px) {
+    h3 {
+      font-size: 1.2rem; } }
+
+h4 {
+  font-size: 1rem; }
+  @media screen and (max-width: 520px) {
+    h4 {
+      font-size: 1rem; } }
+
+p {
+  margin: 15px 0; }
+
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: #4183c4; }
+  a:hover, a:active {
+    text-decoration: underline; }
+
+ul {
+  padding-left: 30px;
+  list-style-type: disc; }
+
+::-moz-selection {
+  color: black;
+  background: #eeeeee; }
+
+::selection {
+  color: black;
+  background: #eeeeee; }
+
+header {
+  margin: 40px 0; }
+
+.logo {
+  float: left; }
+  .logo a {
+    text-decoration: none;
+    cursor: pointer;
+    color: #333333; }
+    .logo a:hover, .logo a:active {
+      color: #4183c4; }
+
+nav {
+  float: right;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1.1rem; }
+  @media screen and (max-width: 520px) {
+    nav {
+      font-size: 1rem; } }
+  nav a {
+    margin-left: 25px;
+    text-align: right;
+    font-weight: 300;
+    letter-spacing: 1px;
+    color: #666666; }
+    nav a:hover, nav a:active {
+      text-decoration: none;
+      cursor: pointer;
+      color: #333333; }
+      nav a:hover:hover, nav a:hover:active, nav a:active:hover, nav a:active:active {
+        color: #4183c4; }
+
+@media screen and (max-width: 520px) {
+  .logo, nav {
+    float: none;
+    width: 100%;
+    text-align: center; } }
+
+.hero {
+  margin: 80px 20px 40px; }
+  @media screen and (max-width: 520px) {
+    .hero {
+      margin: 40px 0; } }
+  .hero img {
+    float: left;
+    width: 160px;
+    padding-right: 30px; }
+  .hero h1 {
+    float: left;
+    width: 590px;
+    margin: 0;
+    font-weight: 400;
+    font-size: 2.5rem;
+    line-height: 1.3; }
+    @media screen and (max-width: 520px) {
+      .hero h1 {
+        font-size: 2.5rem; } }
+  .hero p {
+    float: left;
+    width: 590px; }
+
+article {
+  width: 700px; }
+  @media screen and (max-width: 520px) {
+    article {
+      width: 100%; } }
+  article blockquote {
+    border-left: 2px solid #666666;
+    font-size: 1.2em;
+    font-style: italic;
+    margin: 1.8em 0.8em;
+    padding: 0.1em 1em;
+    color: #666666; }
+
+footer {
+  text-align: center;
+  border-top: 1px #bbbbbb solid;
+  padding: 1rem 0; }
+  footer p {
+    margin: 0 0 1rem 0;
+    font-size: 14px; }