First commit of base theme.

This commit is contained in:
Barry Clark 2014-02-06 19:18:00 -05:00
commit 72ac450454
20 changed files with 1089 additions and 0 deletions

9
.gitignore vendored Normal file
View file

@ -0,0 +1,9 @@
_site
.DS_Store
.jekyll
.bundle
.sass-cache
Gemfile
Gemfile.lock
node_modules/*
package.json

30
Gruntfile.js Normal file
View file

@ -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");
};

2
README.md Normal file
View file

@ -0,0 +1,2 @@
# README

25
_config.yml Normal file
View file

@ -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

14
_includes/analytics.html Normal file
View file

@ -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>

16
_includes/disqus.html Normal file
View file

@ -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>

42
_layouts/default.html Normal file
View file

@ -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>

11
_layouts/page.html Normal file
View file

@ -0,0 +1,11 @@
---
layout: default
---
<article class="page">
<h1>{{ page.title }}</h1>
<div class="entry">
{{ content }}
</div>
</article>

15
_layouts/post.html Normal file
View file

@ -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>

View file

@ -0,0 +1,10 @@
---
layout: post
title: Test Post
---
First test post!
### H3
Hoy hoy hoy!

8
about.html Normal file
View file

@ -0,0 +1,8 @@
---
layout: default
title: About
---
# About Me
About page content

27
blog.html Normal file
View file

@ -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>

35
index.html Normal file
View file

@ -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>

60
scss/_highlights.scss Normal file
View file

@ -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 */

6
scss/_mixins.scss Normal file
View file

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

48
scss/_reset.scss Normal file
View file

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

32
scss/_variables.scss Normal file
View file

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

216
scss/style.scss Executable file
View file

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

52
sitemap.xml Normal file
View file

@ -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>

431
style.css Normal file
View file

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