aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.gitignore9
-rw-r--r--Gruntfile.js30
-rw-r--r--README.md2
-rw-r--r--_config.yml25
-rw-r--r--_includes/analytics.html14
-rw-r--r--_includes/disqus.html16
-rw-r--r--_layouts/default.html42
-rw-r--r--_layouts/page.html11
-rw-r--r--_layouts/post.html15
-rw-r--r--_posts/2014-1-1-Test-Post.md10
-rw-r--r--about.html8
-rw-r--r--blog.html27
-rw-r--r--index.html35
-rw-r--r--scss/_highlights.scss60
-rw-r--r--scss/_mixins.scss6
-rw-r--r--scss/_reset.scss48
-rw-r--r--scss/_variables.scss32
-rwxr-xr-xscss/style.scss216
-rw-r--r--sitemap.xml52
-rw-r--r--style.css431
20 files changed, 1089 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e5d2d8f
--- /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 0000000..663cb1a
--- /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 0000000..3e8f208
--- /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 0000000..d49bef6
--- /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 0000000..6707963
--- /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 0000000..82f4fe5
--- /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 0000000..34dc7b3
--- /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 0000000..7f97e69
--- /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 0000000..4a3c140
--- /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 0000000..02d6ba3
--- /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 0000000..0f7fa61
--- /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 0000000..0a9f265
--- /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 0000000..7a0d4be
--- /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 0000000..1e651cf
--- /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 0000000..d6da0e9
--- /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 0000000..c50757b
--- /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 0000000..0a85575
--- /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 0000000..f49ed62
--- /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 0000000..15d799f
--- /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 0000000..3d30571
--- /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; }