From e57d02f5afbc4575acb7348725e05291737d86b5 Mon Sep 17 00:00:00 2001 From: Timothy J Warren Date: Wed, 24 Feb 2016 14:09:22 -0500 Subject: [PATCH] Add basic test page for default theme --- app/config/error-handlers.js | 12 +- app/controllers/admin.js | 14 +- app/controllers/index.js | 4 + app/helpers/render-markdown.js | 14 + app/migration_helpers.js | 2 +- app/views/index.stache | 151 +++++- app/views/partials/blog/head.stache | 4 +- public/assets/css/blog.css | 747 ++++++++++++++++++++++++++++ public/assets/css/blog.myth.css | 497 ++++++++++++++++++ 9 files changed, 1417 insertions(+), 28 deletions(-) create mode 100644 app/helpers/render-markdown.js diff --git a/app/config/error-handlers.js b/app/config/error-handlers.js index 0cdaa0a..6c6231f 100644 --- a/app/config/error-handlers.js +++ b/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(); - } else if (err instanceof negotiate.NotAcceptable) { + let err = new errors.Http404Error(); + 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(); } diff --git a/app/controllers/admin.js b/app/controllers/admin.js index 3126752..17cbb42 100644 --- a/app/controllers/admin.js +++ b/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) => { + + }, }, }; \ No newline at end of file diff --git a/app/controllers/index.js b/app/controllers/index.js index a87d753..03a97fa 100644 --- a/app/controllers/index.js +++ b/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', }); }, diff --git a/app/helpers/render-markdown.js b/app/helpers/render-markdown.js new file mode 100644 index 0000000..75f6e92 --- /dev/null +++ b/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); +}; \ No newline at end of file diff --git a/app/migration_helpers.js b/app/migration_helpers.js index c940ccd..b3357c7 100644 --- a/app/migration_helpers.js +++ b/app/migration_helpers.js @@ -50,5 +50,5 @@ module.exports = { sqlite3_delete_timestamp_update_trigger() { return `DROP TRIGGER IF EXISTS [UpdateModified]`; - } + }, }; \ No newline at end of file diff --git a/app/views/index.stache b/app/views/index.stache index bf228f0..c3f75f0 100644 --- a/app/views/index.stache +++ b/app/views/index.stache @@ -1,28 +1,137 @@ -
-
- -
+
+
+ Tim's Blog + Random musings and rantings +
+
+
+
+
+
+
+

Article Title

+
+
Feb 18, 2016
-
-

Article

-
+ Here are some random code examples: - +

HTML is always fun to look at, right?

+ 
<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Some Random Title</title>
+	</head>
+	<body></body>
+</html>
+
-
-

Section

+

Javascript has several ways of making a self-executing function.

+ 
// ES5 IIFE
+(function() {
+	var x = 'foo';
+}());
+
+// ES5 Alternate IIFE
+(function() {
+	var y = 'bar';
+})();
+
+// ES6 IIFE
+(() => {
+	let x = 'foo';
+	const y = 'bar';
+})();
+ +Or, how about some php magic methods? + + 
<?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)
+	{
+
+	}
+}
+ +

Or, you could even showcase CSS

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

© Timothy J. Warren

-
\ No newline at end of file + +
+ + \ No newline at end of file diff --git a/app/views/partials/blog/head.stache b/app/views/partials/blog/head.stache index a488617..0815657 100644 --- a/app/views/partials/blog/head.stache +++ b/app/views/partials/blog/head.stache @@ -1,5 +1,7 @@ {{title}} - + + + \ No newline at end of file diff --git a/public/assets/css/blog.css b/public/assets/css/blog.css index e69de29..97bfbe4 100644 --- a/public/assets/css/blog.css +++ b/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; + } +} \ No newline at end of file diff --git a/public/assets/css/blog.myth.css b/public/assets/css/blog.myth.css index e69de29..55d705a 100644 --- a/public/assets/css/blog.myth.css +++ b/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 + } +} \ No newline at end of file