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; }