Add basic test page for default theme

This commit is contained in:
Timothy Warren 2016-02-24 14:09:22 -05:00
parent 08bd0767f2
commit e57d02f5af
9 changed files with 1417 additions and 28 deletions

View File

@ -12,12 +12,16 @@ const negotiate = require('express-negotiate');
let errorHandlers = new Set([ let errorHandlers = new Set([
function handle400Errors(err, req, res, next) { function handle404(req, res, next) {
if (! req.route) { if (! req.route) {
// if no route matches, send a 404 // 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 // if no content type matches, send a 406
err = new errors.Http406Error(); err = new errors.Http406Error();
} }

View File

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

View File

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

View File

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

View File

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

View File

@ -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>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
</ul>
</nav>
</header> </header>
<main class="w930">
<section class="pagebody">
<section class="grid grid-fit grid-gutters">
<article class="main cell no-top-padding">
<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>
<p>HTML is always fun to look at, right?</p>
<pre><code>&lt;!DOCTYPE html&gt;
&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>
<p>Javascript has several ways of making a self-executing function.</p>
<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> </article>
<aside class="sidebar cell cell-1of3 no-top-padding">
<aside> <div class="bio">
<h1>Aside</h1> <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> </aside>
<section>
<h1>Section</h1>
</section> </section>
<footer> <footer>
<p>&copy; Timothy J. Warren</p> <p>&copy; Timothy J. Warren</p>
</footer> </footer>
</section>
</main> </main>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script>
hljs.configure({
tabReplace: ' '
});
hljs.initHighlightingOnLoad();
</script>

View File

@ -1,5 +1,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{{title}}</title> <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> </head>

View File

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

View File

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