Add basic test page for default theme

app/config/error-handlers.js

@@ -12,12 +12,16 @@ const negotiate = require('express-negotiate');
 
 let errorHandlers = new Set([
 
-	function handle400Errors(err, req, res, next) {
+	function handle404(req, res, next) {
-
 		if (! req.route) {
 			// if no route matches, send a 404
-			err = new errors.Http404Error();
+			let err = new errors.Http404Error();
-		} else if (err instanceof negotiate.NotAcceptable) {
+			return next(err);
+		}
+	},
+
+	function handle400Errors(err, req, res, next) {
+		if (err instanceof negotiate.NotAcceptable) {
 			// if no content type matches, send a 406
 			err = new errors.Http406Error();
 		}

app/controllers/admin.js

@@ -2,12 +2,24 @@
 
 module.exports = {
 	'/': {
+		get: (req, res) => {
 
+		},
 	},
+
 	'/login': {
+		get: (req, res) => {
 
+		},
+
+		post: (req, res) => {
+
+		},
 	},
-	'/logout': {
 
+	'/logout': {
+		get: (req, res) => {
+
+		},
 	},
 };

app/controllers/index.js

@@ -1,5 +1,8 @@
 'use strict';
 
+const container = require('../Container');
+const hasher = container.get('helpers/password-hash');
+
 module.exports = {
 	'/': {
 		// Get homepage
@@ -7,6 +10,7 @@ module.exports = {
 			req.negotiate({
 				html: () => {
 					return res.render('index', {
+						theme: 'github-gist',
 						title: 'Blog test page',
 					});
 				},

app/helpers/render-markdown.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const marked = require('marked');
+const hlite = require('highlight.js');
+
+module.exports = function (text) {
+	marked.setOptions({
+		highlight(code) {
+			return hlite.highlightAuto(code).value;
+		},
+	});
+
+	return marked(text);
+};

app/migration_helpers.js

@@ -50,5 +50,5 @@ module.exports = {
 
 	sqlite3_delete_timestamp_update_trigger() {
 		return `DROP TRIGGER IF EXISTS [UpdateModified]`;
-	}
+	},
 };

app/views/index.stache

@@ -1,28 +1,137 @@
-<main>
+<header class="w930">
-	<header>
+	<div class="heading">
-		<nav>
+		<a href="#"><span class="title">Tim's Blog</span></a>
-			<ul>
+		<span class="tagline">Random musings and rantings</span>
-				<li><a href="#"><strong>First</strong></a></li>
+	</div>
-				<li><a href="#">Second</a></li>
+</header>
-				<li><a href="#">Third</a></li>
+<main class="w930">
-				<li><a href="#">Fourth</a></li>
+<section class="pagebody">
-			</ul>
+	<section class="grid grid-fit grid-gutters">
-		</nav>
+		<article class="main cell no-top-padding">
-	</header>
+			<div class="title">
+				<h2>Article Title</h2>
+			</div>
+			<div class="subtitle">Feb 18, 2016</div>
 
-	<article>
+			Here are some random code examples:
-		<h1>Article</h1>
-	</article>
 
-	<aside>
+			<p>HTML is always fun to look at, right?</p>
-		<h1>Aside</h1>
+			<pre><code>&lt;!DOCTYPE html&gt;
-	</aside>
+&lt;html&gt;
+	&lt;head&gt;
+		&lt;meta charset="utf-8" /&gt;
+		&lt;title&gt;Some Random Title&lt;/title&gt;
+	&lt;/head&gt;
+	&lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
 
-	<section>
+			<p>Javascript has several ways of making a self-executing function.</p>
-		<h1>Section</h1>
+			<pre><code>// ES5 IIFE
+(function() {
+	var x = 'foo';
+}());
+
+// ES5 Alternate IIFE
+(function() {
+	var y = 'bar';
+})();
+
+// ES6 IIFE
+(() => {
+	let x = 'foo';
+	const y = 'bar';
+})();</code></pre>
+
+Or, how about some php magic methods?
+
+		<pre><code>&lt;?php
+
+class Foo {
+	/**
+	 * A Constructor
+	 */
+	public function __construct()
+	{
+
+	}
+
+	/**
+	 * A Destructor
+	 */
+	public function __destruct()
+	{
+
+	}
+
+	/**
+	 * Dynamically get class properties
+	 *
+	 * @param  string $key - the key of the item to get
+	 * @return mixed - the value of the item
+	 */
+	public function __get($key)
+	{
+
+	}
+
+	/**
+	 * Dynamically set class properties
+	 *
+	 * @param string $key - the key of the item to set
+	 * @param mixed $value - the value of the item to set
+	 */
+	public function __set($key, $value)
+	{
+
+	}
+}</code></pre>
+
+			<p>Or, you could even showcase CSS</p>
+			<pre><code>:root {
+	--body-font: 'Slabo 27px', serif;
+	--header-fonts: 'PT Serif', serif;
+	background:whitesmoke;
+	font-family: var(--body-font);
+	box-sizing: border-box;
+	cursor: default;
+	line-height: 1.4;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	overflow-y: scroll;
+	text-rendering: optimizeLegibility;
+	text-size-adjust: 100%
+}
+
+/*
+ *! Flexbox grid
+ */
+section {
+	flex: 0;
+}</code></pre>
+		</article>
+		<aside class="sidebar cell cell-1of3 no-top-padding">
+			<div class="bio">
+				<img class="logo" src="https://secure.gravatar.com/avatar/2ea65d51f854de868d4e94de8583ed96.jpg?r=g&s=100&d=wavatar" />
+				<div class="title">Timothy J. Warren</div>
+				<div class="tagline">Web Developer, Programmer, and all-around Technology Enthusiast</div>
+			</div>
+			<div class="recent-posts">
+				<div class="title">Recent Posts <a class="showall" href="#">show all</a></div>
+				<div>
+					<a class="post" href="#">Hello, this is a sample post!</a>
+				</div>
+			</div>
+		</aside>
 	</section>
-
 	<footer>
 		<p>&copy; Timothy J. Warren</p>
 	</footer>
+</section>
 </main>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
+<script>
+	hljs.configure({
+		tabReplace: '    '
+	});
+	hljs.initHighlightingOnLoad();
+</script>

app/views/partials/blog/head.stache

@@ -1,5 +1,7 @@
 <head>
 	<meta charset="utf-8" />
 	<title>{{title}}</title>
-	<link rel="stylesheet" href="//cdn.rawgit.com/mblode/marx/master/css/marx.min.css">
+	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/{{theme}}.min.css">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slabo+27px|PT+Serif|Anonymous+Pro"  />
+	<link rel="stylesheet" href="/assets/css/blog.css" />
 </head>

public/assets/css/blog.css

@@ -0,0 +1,747 @@
+:root {
+  background: whitesmoke;
+  font-family: 'Slabo 27px', serif;
+  box-sizing: border-box;
+  cursor: default;
+  line-height: 1.4;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  overflow-y: scroll;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+/*
+ *! Flexbox grid
+ */
+
+section {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0;
+  -ms-flex: 0;
+  flex: 0;
+}
+
+.w930 {
+  max-width: 930px;
+}
+
+.grid {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.grid-top {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.grid-bottom {
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+
+.grid-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.grid-justify-center {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.cell {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+;
+.cell-top {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
+
+.cell-bottom {
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: end;
+  align-self: flex-end;
+}
+
+.cell-center {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+.cell-autoSize {
+  -webkit-box-flex: 0;
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+}
+
+.cell-1of2 {
+  -webkit-box-flex: 0 !important;
+  -webkit-flex: 0 0 50% !important;
+  -ms-flex: 0 0 50% !important;
+  flex: 0 0 50% !important;
+}
+
+.cell-1of3 {
+  -webkit-box-flex: 0 !important;
+  -webkit-flex: 0 0 33.3333% !important;
+  -ms-flex: 0 0 33.3333% !important;
+  flex: 0 0 33.3333% !important;
+}
+
+.cell-2of3 {
+  -webkit-box-flex: 0 !important;
+  -webkit-flex: 0 0 66.6666% !important;
+  -ms-flex: 0 0 66.6666% !important;
+  flex: 0 0 66.6666% !important;
+}
+
+.cell-1of4 {
+  -webkit-box-flex: 0 !important;
+  -webkit-flex: 0 0 25% !important;
+  -ms-flex: 0 0 25% !important;
+  flex: 0 0 25% !important;
+}
+
+.grid-fit > .cell {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.grid-full > .cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 100%;
+  -ms-flex: 0 0 100%;
+  flex: 0 0 100%;
+}
+
+.grid-1of2 > .cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.grid-1of3 > .cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 33.3333%;
+  -ms-flex: 0 0 33.3333%;
+  flex: 0 0 33.3333%;
+}
+
+.grid-1of4 > .cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 25%;
+  -ms-flex: 0 0 25%;
+  flex: 0 0 25%;
+}
+
+.grid-gutters {
+  margin: 0 0 1em 0;
+}
+
+.grid-gutters > .cell {
+  padding: 1em 0 0 1em;
+}
+
+.grid-guttersLg {
+  margin: -1.5em 0 1.5em -1.5em;
+}
+
+.grid-guttersLg > .cell {
+  padding: 1.5em 0 0 1.5em;
+}
+
+.grid-guttersXl {
+  margin: -2em 0 2em -2em;
+}
+
+.grid-guttersXl > .cell {
+  padding: 2em 0 0 2em;
+}
+
+/*
+ *! Basic element styles
+ */
+
+h1,
+h2,
+h3 {
+  font-weight: 500;
+}
+
+body,
+h5 {
+  font-size: 1.6rem;
+}
+
+h4,
+h5,
+h6 {
+  font-weight: 600;
+}
+
+a,
+a:focus,
+a:hover {
+  text-decoration: none;
+}
+
+blockquote,
+pre {
+  margin: 1.6rem 0;
+}
+
+blockquote,
+figcaption {
+  font-family: serif;
+}
+
+article,
+aside,
+dl,
+hr,
+section {
+  margin-bottom: 1.6rem;
+}
+
+footer,
+hr {
+  border-top: .1rem solid rgba(0, 0, 0, .2);
+}
+
+footer,
+img,
+section {
+  max-width: 100%;
+}
+
+img,
+select[multiple] {
+  height: auto;
+}
+
+hr {
+  width: 100%;
+}
+
+audio,
+canvas,
+iframe,
+img,
+input[type=radio],
+input[type=checkbox],
+svg,
+textarea,
+video {
+  vertical-align: middle;
+}
+
+pre,
+textarea {
+  overflow: auto;
+}
+
+legend,
+ol,
+textarea,
+ul {
+  margin-bottom: .8rem;
+}
+
+body {
+  padding: 0;
+}
+
+::after,
+::before,
+td,
+th {
+  vertical-align: inherit;
+}
+
+footer,
+nav ul,
+td,
+th {
+  text-align: center;
+}
+
+[hidden],
+audio:not([controls]),
+template {
+  display: none;
+}
+
+small {
+  font-size: 75%;
+  color: #777;
+}
+
+big {
+  font-size: 125%;
+}
+
+[unselectable] {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+[unselectable],
+button,
+input[type=submit] {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+::after,
+::before {
+  text-decoration: inherit;
+}
+
+a {
+  color: #1271db;
+  -webkit-transition: .25s ease;
+  transition: .25s ease;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: 'Anonymous Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+pre {
+  box-shadow: rgba(0,0,0,0.1) 0 0 5px;
+}
+
+code,
+pre {
+  color: #444;
+  background: #efefef;
+  font-family: 'Anonymous Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 1.4rem;
+  word-break: break-all;
+  word-wrap: break-word;
+  overflow-x: auto;
+}
+
+::-moz-selection {
+  background-color: #b3d4fc;
+  text-shadow: none;
+}
+
+::selection {
+  background-color: #b3d4fc;
+  text-shadow: none;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+hr,
+legend,
+main,
+pre,
+textarea {
+  display: block;
+}
+
+body {
+  color: #444;
+  font-style: normal;
+  font-weight: 400;
+}
+
+p {
+  margin: 0 0 1.6rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'PT Serif', serif;
+  margin-start: 0;
+  margin-end: 0;
+  margin-before: 0.67em;
+  margin-after: 0.67em;
+  /*margin: 2rem 0 1.6rem*/
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-style: normal;
+  margin: 1.6rem 0 .4rem;
+}
+
+h1 {
+  border-bottom: .1rem solid rgba(0, 0, 0, .2);
+  font-size: 3.6rem;
+  font-style: normal;
+}
+
+h2 {
+  font-size: 3rem;
+  font-style: normal;
+}
+
+h3 {
+  font-size: 2.4rem;
+}
+
+h4 {
+  font-size: 1.8rem;
+}
+
+h6 {
+  color: #777;
+  font-size: 1.4rem;
+}
+
+pre {
+  padding: 0;
+}
+
+dd {
+  margin-left: 4rem;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+blockquote {
+  border-left: .2rem solid #1271db;
+  font-style: italic;
+  padding-left: 1.6rem;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+article,
+aside,
+details,
+footer,
+header,
+main,
+section,
+summary {
+  display: block;
+  height: auto;
+  margin: 0 auto;
+  width: 100%;
+}
+
+main {
+  margin: 0 auto;
+  max-width: 76.8rem;
+  padding: 0 1.6rem 1.6rem;
+}
+
+footer {
+  padding: 1rem 0;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0.5em auto;
+}
+
+nav a,
+td,
+th {
+  padding: .8rem 1.6rem;
+}
+
+nav ul li {
+  display: inline;
+}
+
+nav a {
+  border-bottom: .2rem solid transparent;
+  color: #444;
+  -webkit-transition: .25s ease;
+  transition: .25s ease;
+}
+
+nav a:hover {
+  border-color: rgba(0, 0, 0, .2);
+}
+
+nav a:active {
+  border-color: rgba(0, 0, 0, .56);
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-bottom: 1.6rem;
+}
+
+caption {
+  padding: .8rem 0;
+}
+
+thead th {
+  background: #efefef;
+  color: #444;
+}
+
+tr {
+  background: #fff;
+  margin-bottom: .8rem;
+}
+
+td,
+th {
+  border: .1rem solid #ccc;
+}
+
+tfoot tr {
+  background: 0 0;
+}
+
+tfoot td {
+  color: #efefef;
+  font-size: .8rem;
+  font-style: italic;
+  padding: 1.6rem .4rem;
+}
+
+/*
+ *! Misc layout styles
+ */
+
+.no-top-margin {
+  margin-top: 0 !important;
+}
+
+.no-top-padding {
+  padding-top: 0 !important;
+}
+
+.pagebody {
+  background: #fff;
+  min-height: 100%;
+  border-top: 2px solid silver;
+  box-shadow: rgba(0,0,0,0.1) 0 0 5px;
+}
+
+.heading {
+  margin-top: 16px;
+  margin-bottom: 14px;
+  line-height: 24px;
+  font-size: 22px;
+}
+
+.heading .title {
+  font-family: 'PT Serif', serif;
+  color: #000;
+  font-weight: bold;
+}
+
+.heading .tagline {
+  padding-left: 15px;
+  font-weight: 300;
+  font-size: 80%;
+  color: #000;
+}
+
+.bio {
+  background: #f9f9f9;
+  margin: 12px;
+  padding: 15px;
+  text-align: center;
+}
+
+.bio .logo {
+  height: 100px;
+  width: 100px;
+}
+
+.bio .title {
+  margin-top: 14px;
+  font-weight: 600;
+}
+
+.bio .tagline {
+  margin: 8px auto 0 auto;
+  font-weight: 300;
+  text-align: justify;
+  max-width: 80%;
+  font-size: 94%;
+}
+
+.recent-posts {
+  padding: 15px;
+}
+
+.recent-posts .title {
+  font-family: 'PT Serif', serif;
+  margin-top: -12px;
+  border-top: 6px solid #fff;
+  padding-top: 14px;
+  font-weight: 600;
+  font-size: 90%;
+  margin-bottom: 14px;
+}
+
+.recent-posts .title .showall {
+  float: right;
+  text-decoration: underline;
+  padding-right: 10px;
+  font-size: 0.80em;
+}
+
+.recent-posts .post {
+  border-top: 2px solid #fff;
+  text-decoration: underline;
+  font-size: 94%;
+  font-weight: 400;
+  display: block;
+  padding-top: 8px;
+  padding-bottom: 6px;
+}
+
+@media (min-width:12em) {
+  .small-Grid--gutters {
+    margin: -1em 0 1em -1em;
+  }
+
+  .small-Grid--gutters > .cell {
+    padding: 1em 0 0 1em;
+  }
+
+  .small-Grid--guttersLg {
+    margin: -1.5em 0 1.5em -1.5em;
+  }
+
+  .small-Grid--guttersLg > .cell {
+    padding: 1.5em 0 0 1.5em;
+  }
+
+  .small-Grid--guttersXl {
+    margin: -2em 0 2em -2em;
+  }
+
+  .small-Grid--guttersXl > .cell {
+    padding: 2em 0 0 2em;
+  }
+}
+
+@media (min-width:24em) {
+  .med-Grid--gutters {
+    margin: -1em 0 1em -1em;
+  }
+
+  .med-Grid--gutters > .cell {
+    padding: 1em 0 0 1em;
+  }
+
+  .med-Grid--guttersLg {
+    margin: -1.5em 0 1.5em -1.5em;
+  }
+
+  .med-Grid--guttersLg > .cell {
+    padding: 1.5em 0 0 1.5em;
+  }
+
+  .med-Grid--guttersXl {
+    margin: -2em 0 2em -2em;
+  }
+
+  .med-Grid--guttersXl > .cell {
+    padding: 2em 0 0 2em;
+  }
+}
+
+@media (min-width:48em) {
+  .large-Grid--gutters {
+    margin: -1em 0 1em -1em;
+  }
+
+  .large-Grid--gutters > .cell {
+    padding: 1em 0 0 1em;
+  }
+
+  .large-Grid--guttersLg {
+    margin: -1.5em 0 1.5em -1.5em;
+  }
+
+  .large-Grid--guttersLg > .cell {
+    padding: 1.5em 0 0 1.5em;
+  }
+
+  .large-Grid--guttersXl {
+    margin: -2em 0 2em -2em;
+  }
+
+  .large-Grid--guttersXl > .cell {
+    padding: 2em 0 0 2em;
+  }
+}
+
+@media screen {
+  [hidden~=screen] {
+    display: inherit;
+  }
+
+  [hidden~=screen]:not(:active):not(:focus):not(:target) {
+    clip: rect(0 0 0 0)!important;
+    position: absolute!important;
+  }
+}
+
+@media screen and (max-width:40rem) {
+  article,
+  aside,
+  section {
+    clear: both;
+    display: block;
+    max-width: 100%;
+  }
+
+  img {
+    margin-right: 1.6rem;
+  }
+}

public/assets/css/blog.myth.css

@@ -0,0 +1,497 @@
+:root {
+	--code-fonts: 'Anonymous Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;
+	--body-font: 'Slabo 27px', serif;
+	--header-fonts: 'PT Serif', serif;
+	background:whitesmoke;
+	font-family: var(--body-font);
+	box-sizing: border-box;
+	cursor: default;
+	line-height: 1.4;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	overflow-y: scroll;
+	text-rendering: optimizeLegibility;
+	text-size-adjust: 100%
+}
+
+/*
+ *! Flexbox grid
+ */
+section {
+	flex: 0;
+}
+
+.w930 {
+	max-width:930px;
+}
+
+.grid {
+	display:flex;
+	flex-wrap:wrap;
+	margin:0 auto;
+	padding:0;
+}
+
+.grid-top {align-items:flex-start}
+.grid-bottom {align-items:flex-end}
+.grid-center {align-items:center}
+.grid-justify-center {justify-content:center}
+
+.cell {flex:1};
+.cell-top {align-self: flex-start}
+.cell-bottom {align-self: flex-end}
+.cell-center {align-self: center}
+.cell-autoSize {flex: none}
+
+.cell-1of2 {flex: 0 0 50% !important}
+.cell-1of3 {flex: 0 0 33.3333% !important}
+.cell-2of3 {flex: 0 0 66.6666% !important}
+.cell-1of4 {flex: 0 0 25% !important}
+
+.grid-fit > .cell {
+	flex: 1;
+}
+
+.grid-full > .cell {
+	flex: 0 0 100%;
+}
+
+.grid-1of2 > .cell {
+	flex: 0 0 50%;
+}
+
+.grid-1of3 > .cell {
+	flex: 0 0 33.3333%;
+}
+
+.grid-1of4 > .cell {
+	flex: 0 0 25%;
+}
+
+.grid-gutters {
+	margin: 0 0 1em 0;
+}
+.grid-gutters > .cell {
+	padding: 1em 0 0 1em;
+}
+
+.grid-guttersLg {
+	margin: -1.5em 0 1.5em -1.5em;
+}
+.grid-guttersLg > .cell {
+	padding: 1.5em 0 0 1.5em;
+}
+
+.grid-guttersXl {
+	margin: -2em 0 2em -2em;
+}
+.grid-guttersXl > .cell {
+	padding: 2em 0 0 2em;
+}
+
+/*
+ *! Basic element styles
+ */
+
+h1, h2, h3 {
+	font-weight: 500
+}
+body, h5 {
+	font-size: 1.6rem
+}
+h4, h5, h6 {
+	font-weight: 600
+}
+a, a:focus, a:hover {
+	text-decoration: none
+}
+blockquote, pre {
+	margin: 1.6rem 0
+}
+blockquote, figcaption {
+	font-family: serif
+}
+article, aside, dl, hr, section {
+	margin-bottom: 1.6rem
+}
+footer, hr {
+	border-top: .1rem solid rgba(0, 0, 0, .2)
+}
+footer, img, section {
+	max-width: 100%
+}
+img, select[multiple] {
+	height: auto
+}
+hr {
+	width: 100%
+}
+audio, canvas, iframe, img, input[type=radio], input[type=checkbox], svg, textarea, video {
+	vertical-align: middle
+}
+pre, textarea {
+	overflow: auto
+}
+legend, ol, textarea, ul {
+	margin-bottom: .8rem
+}
+body {
+	padding: 0
+}
+::after, ::before, td, th {
+	vertical-align: inherit
+}
+footer, nav ul, td, th {
+	text-align: center
+}
+[hidden], audio:not([controls]), template {
+	display: none
+}
+small {
+	font-size: 75%;
+	color: #777
+}
+big {
+	font-size: 125%
+}
+[unselectable] {
+	user-select: none
+}
+[unselectable], button, input[type=submit] {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none
+}
+::after, ::before {
+	text-decoration: inherit
+}
+a {
+	color: #1271db;
+	-webkit-transition: .25s ease;
+	transition: .25s ease
+}
+code, kbd, pre, samp {
+	font-family: var(--code-fonts);
+}
+pre {
+	box-shadow:rgba(0,0,0,0.1) 0 0 5px;
+}
+code, pre {
+	color: #444;
+	background: #efefef;
+	font-family: var(--code-fonts);
+	font-size: 1.4rem;
+	word-break: break-all;
+	word-wrap: break-word;
+	overflow-x: auto;
+}
+::-moz-selection {
+	background-color: #b3d4fc;
+	text-shadow: none
+}
+::selection {
+	background-color: #b3d4fc;
+	text-shadow: none
+}
+button::-moz-focus-inner {
+	border: 0
+}
+
+hr, legend, main, pre, textarea {
+	display: block
+}
+body {
+	color: #444;
+	font-style: normal;
+	font-weight: 400
+}
+p {
+	margin: 0 0 1.6rem
+}
+h1, h2, h3, h4, h5, h6 {
+	font-family: var(--header-fonts);
+	margin-start:0;
+	margin-end:0;
+	margin-before:0.67em;
+	margin-after:0.67em;
+	/*margin: 2rem 0 1.6rem*/
+}
+h3, h4, h5, h6 {
+	font-style: normal;
+	margin: 1.6rem 0 .4rem
+}
+h1 {
+	border-bottom: .1rem solid rgba(0, 0, 0, .2);
+	font-size: 3.6rem;
+	font-style: normal
+}
+h2 {
+	font-size: 3rem;
+	font-style: normal
+}
+h3 {
+	font-size: 2.4rem
+}
+h4 {
+	font-size: 1.8rem
+}
+h6 {
+	color: #777;
+	font-size: 1.4rem
+}
+pre {
+	padding: 0
+}
+dd {
+	margin-left: 4rem
+}
+ol, ul {
+	padding-left: 2rem
+}
+blockquote {
+	border-left: .2rem solid #1271db;
+	font-style: italic;
+	padding-left: 1.6rem
+}
+html {
+	font-size: 62.5%
+}
+article, aside, details, footer, header, main, section, summary {
+	display: block;
+	height: auto;
+	margin: 0 auto;
+	width: 100%
+}
+main {
+	margin: 0 auto;
+	max-width: 76.8rem;
+	padding: 0 1.6rem 1.6rem
+}
+footer {
+	padding: 1rem 0
+}
+
+nav ul {
+	list-style: none;
+	margin: 0.5em auto;
+}
+nav a, td, th {
+	padding: .8rem 1.6rem
+}
+nav ul li {
+	display: inline
+}
+nav a {
+	border-bottom: .2rem solid transparent;
+	color: #444;
+	transition: .25s ease
+}
+nav a:hover {
+	border-color: rgba(0, 0, 0, .2)
+}
+nav a:active {
+	border-color: rgba(0, 0, 0, .56)
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+	margin-bottom: 1.6rem
+}
+caption {
+	padding: .8rem 0
+}
+thead th {
+	background: #efefef;
+	color: #444
+}
+tr {
+	background: #fff;
+	margin-bottom: .8rem
+}
+td, th {
+	border: .1rem solid #ccc
+}
+tfoot tr {
+	background: 0 0
+}
+tfoot td {
+	color: #efefef;
+	font-size: .8rem;
+	font-style: italic;
+	padding: 1.6rem .4rem
+}
+
+/*
+ *! Misc layout styles
+ */
+.no-top-margin{margin-top:0 !important}
+.no-top-padding{padding-top:0 !important}
+
+
+.pagebody {
+	background:#fff;
+	min-height:100%;
+	border-top:2px solid silver;
+	box-shadow:rgba(0,0,0,0.1) 0 0 5px;
+}
+
+.heading {
+	margin-top:16px;
+	margin-bottom:14px;
+	line-height:24px;
+	font-size:22px;
+}
+
+	.heading .title {
+		font-family: var(--header-fonts);
+		color: #000;
+		font-weight:bold;
+	}
+
+	.heading .tagline {
+		padding-left:15px;
+		font-weight:300;
+		font-size:80%;
+		color:#000;
+	}
+
+.bio {
+	background:#f9f9f9;
+	margin:12px;
+	padding:15px;
+	text-align:center;
+}
+
+	.bio .logo {
+		height:100px;
+		width:100px;
+	}
+
+	.bio .title {
+		margin-top:14px;
+		font-weight:600;
+	}
+
+	.bio .tagline {
+		margin:8px auto 0 auto;
+		font-weight:300;
+		text-align:justify;
+		max-width:80%;
+		font-size:94%;
+	}
+
+.recent-posts {
+	padding:15px;
+}
+	.recent-posts .title {
+		font-family: var(--header-fonts);
+		margin-top:-12px;
+		border-top:6px solid #fff;
+		padding-top:14px;
+		font-weight:600;
+		font-size:90%;
+		margin-bottom:14px;
+	}
+
+	.recent-posts .title .showall {
+		float:right;
+		text-decoration:underline;
+		padding-right:10px;
+		font-size:0.80em;
+	}
+
+	.recent-posts .post {
+		border-top:2px solid #fff;
+		text-decoration:underline;
+		font-size:94%;
+		font-weight:400;
+		display:block;
+		padding-top:8px;
+		padding-bottom:6px;
+	}
+
+@media (min-width:12em) {
+	.small-Grid--gutters {
+		margin: -1em 0 1em -1em;
+	}
+	.small-Grid--gutters > .cell {
+		padding: 1em 0 0 1em;
+	}
+	.small-Grid--guttersLg {
+		margin: -1.5em 0 1.5em -1.5em;
+	}
+	.small-Grid--guttersLg > .cell {
+		padding: 1.5em 0 0 1.5em;
+	}
+	.small-Grid--guttersXl {
+		margin: -2em 0 2em -2em;
+	}
+	.small-Grid--guttersXl > .cell {
+		padding: 2em 0 0 2em;
+	}
+}
+
+@media (min-width:24em) {
+	.med-Grid--gutters {
+		margin: -1em 0 1em -1em;
+	}
+	.med-Grid--gutters > .cell {
+		padding: 1em 0 0 1em;
+	}
+	.med-Grid--guttersLg {
+		margin: -1.5em 0 1.5em -1.5em;
+	}
+	.med-Grid--guttersLg > .cell {
+		padding: 1.5em 0 0 1.5em;
+	}
+	.med-Grid--guttersXl {
+		margin: -2em 0 2em -2em;
+	}
+	.med-Grid--guttersXl > .cell {
+		padding: 2em 0 0 2em;
+	}
+}
+
+@media (min-width:48em) {
+	.large-Grid--gutters {
+		margin: -1em 0 1em -1em;
+	}
+	.large-Grid--gutters > .cell {
+		padding: 1em 0 0 1em;
+	}
+	.large-Grid--guttersLg {
+		margin: -1.5em 0 1.5em -1.5em;
+	}
+	.large-Grid--guttersLg > .cell {
+		padding: 1.5em 0 0 1.5em;
+	}
+	.large-Grid--guttersXl {
+		margin: -2em 0 2em -2em;
+	}
+	.large-Grid--guttersXl > .cell {
+		padding: 2em 0 0 2em;
+	}
+}
+
+
+
+@media screen {
+	[hidden~=screen] {
+		display: inherit
+	}
+	[hidden~=screen]:not(:active):not(:focus):not(:target) {
+		clip: rect(0 0 0 0)!important;
+		position: absolute!important
+	}
+}
+
+@media screen and (max-width:40rem) {
+	article, aside, section {
+		clear: both;
+		display: block;
+		max-width: 100%
+	}
+	img {
+		margin-right: 1.6rem
+	}
+}