reidev275/index.html

## index.html
<body class="{{body_class}}">
  <div class="container">
    <nav class="main-nav">
      <h1><a href="/">Reid Evans</a></h1>
      <p>{{@blog.description}}</p>
      <ul>
        <li><a href="{{@blog.url}}/about/">About</a></li>
        <li><a href="{{@blog.url}}/recent-work/">Recent Work</a></li>
      </ul>
    </nav>

    <main class="content" role="main">
      <article class="{{post_class}}">
        <h1 class="post-title">{{{title}}}</h1>
    		<p class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='MMMM YYYY'}}</time> {{tags prefix="on " separator=" | "}}</p>
        <section class="post-content">
          {{content}}
        </section>
      </article>
    </main>
  </div>
</body>

## style.css
html {
	font-family: 'Roboto', sans-serif;
	color: #111;
	font-size: 62.5%;
	line-height: 1.6;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body, html {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #C4953A;
}

p {
	letter-spacing: 0.03em;
}

p, ul, ol {
	font-size: 1.8rem;
	letter-spacing: -0.005em
}

section a {
	font-family: 'Oswald', sans-serif;
	font-size: 1.8rem;
}

ul {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Bitter', serif;
	color: #111;
	margin-top: 0;
	line-height: 1.2;
}

h1 {
	font-size: 2.8rem
}
h2 {
	font-size: 2.4rem
}
h3 {
	font-size: 2.0rem
}

.container {
	display: -webkit-flex;
  display:         flex;
  -webkit-flex-flow: row;
          flex-flow: row;
}

nav.main-nav {
	-webkit-flex: 0 1;
           flex: 0 1;
  -webkit-order: 1;
           order: 1;
	min-height: 100%;
	min-width: 150px;
  background: #1D222D;
	padding: 30px;
}
	nav.main-nav h1 a {
		opacity: 1;
	}
	nav.main-nav h1 {
		line-height: .8;
		font-size: 3.4rem
	}
	nav.main-nav a {
		color: #FFF;
		text-decoration: none;
		opacity: 0.8;
		font-weight: 300;
	}
	nav.main-nav ul {
		padding-left: 0;
	}
	nav.main-nav ul li {
		font-family: 'Oswald', sans-serif;
		font-size: 2rem;
	}
	nav.main-nav p {
		color: #fff;
		opacity: 0.5;
		line-spacing:1;
		font-size: 1.3rem;
	}

main.content {
	-webkit-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-order: 2;
          order: 2;
}

article, footer, nav.pagination, .tag-archive-header {
	padding: 2% 5%;
	background: #fff;
}

article:nth-child(2n){
	background: #f5f5f5;
}

article p.post-meta {
	font-family: 'Oswald', sans-serif;
}

pre, code {
	font-family: 'Source Code Pro',monospace !important;
	font-size: 1.5rem;
	background-color: #eee;
}

:not(pre) > code[class*="language-"], pre[class*="language-"], .token.operator {
	background: #eee !important;
}

div.alert {
	font-size: 1.6rem;
	opacity: 0.6;
	background-color: #f5f5f5;
	padding: 10px;
}

@media only screen and (max-width: 960px)  {
	.container {
		-webkit-flex-flow: column;
	          flex-flow: column;
	}
	article {
		padding: 5%;
		background: #fff;
	}
	nav.main-nav {
		min-height: 150px;
		display: inline;
	}
		nav.main-nav p{
			display: none;
		}
		nav.main-nav h1{
			margin-top: 0;
		}
	main.content {
		-webkit-flex: 1 0 auto;
	          flex: 1 0 auto;
	  -webkit-order: 2;
	          order: 2;
	}
}
	<body class="{{body_class}}">
	<div class="container">
	<nav class="main-nav">
	<h1><a href="/">Reid Evans</a></h1>
	<p>{{@blog.description}}</p>
	<ul>
	<li><a href="{{@blog.url}}/about/">About</a></li>
	<li><a href="{{@blog.url}}/recent-work/">Recent Work</a></li>
	</ul>
	</nav>

	<main class="content" role="main">
	<article class="{{post_class}}">
	<h1 class="post-title">{{{title}}}</h1>
	<p class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='MMMM YYYY'}}</time> {{tags prefix="on " separator=" \| "}}</p>
	<section class="post-content">
	{{content}}
	</section>
	</article>
	</main>
	</div>
	</body>
	html {
	font-family: 'Roboto', sans-serif;
	color: #111;
	font-size: 62.5%;
	line-height: 1.6;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	}

	body, html {
	margin: 0;
	padding: 0;
	}

	a {
	text-decoration: none;
	color: #C4953A;
	}

	p {
	letter-spacing: 0.03em;
	}

	p, ul, ol {
	font-size: 1.8rem;
	letter-spacing: -0.005em
	}

	section a {
	font-family: 'Oswald', sans-serif;
	font-size: 1.8rem;
	}

	ul {
	list-style: none;
	}

	h1, h2, h3, h4, h5, h6 {
	font-family: 'Bitter', serif;
	color: #111;
	margin-top: 0;
	line-height: 1.2;
	}

	h1 {
	font-size: 2.8rem
	}
	h2 {
	font-size: 2.4rem
	}
	h3 {
	font-size: 2.0rem
	}

	.container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row;
	flex-flow: row;
	}

	nav.main-nav {
	-webkit-flex: 0 1;
	flex: 0 1;
	-webkit-order: 1;
	order: 1;
	min-height: 100%;
	min-width: 150px;
	background: #1D222D;
	padding: 30px;
	}
	nav.main-nav h1 a {
	opacity: 1;
	}
	nav.main-nav h1 {
	line-height: .8;
	font-size: 3.4rem
	}
	nav.main-nav a {
	color: #FFF;
	text-decoration: none;
	opacity: 0.8;
	font-weight: 300;
	}
	nav.main-nav ul {
	padding-left: 0;
	}
	nav.main-nav ul li {
	font-family: 'Oswald', sans-serif;
	font-size: 2rem;
	}
	nav.main-nav p {
	color: #fff;
	opacity: 0.5;
	line-spacing:1;
	font-size: 1.3rem;
	}

	main.content {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-order: 2;
	order: 2;
	}

	article, footer, nav.pagination, .tag-archive-header {
	padding: 2% 5%;
	background: #fff;
	}

	article:nth-child(2n){
	background: #f5f5f5;
	}

	article p.post-meta {
	font-family: 'Oswald', sans-serif;
	}

	pre, code {
	font-family: 'Source Code Pro',monospace !important;
	font-size: 1.5rem;
	background-color: #eee;
	}

	:not(pre) > code[class="language-"], pre[class="language-"], .token.operator {
	background: #eee !important;
	}

	div.alert {
	font-size: 1.6rem;
	opacity: 0.6;
	background-color: #f5f5f5;
	padding: 10px;
	}

	@media only screen and (max-width: 960px) {
	.container {
	-webkit-flex-flow: column;
	flex-flow: column;
	}
	article {
	padding: 5%;
	background: #fff;
	}
	nav.main-nav {
	min-height: 150px;
	display: inline;
	}
	nav.main-nav p{
	display: none;
	}
	nav.main-nav h1{
	margin-top: 0;
	}
	main.content {
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	-webkit-order: 2;
	order: 2;
	}
	}