Add basic test page for default theme
This commit is contained in:
parent
08bd0767f2
commit
e57d02f5af
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,24 @@
|
|||
|
||||
module.exports = {
|
||||
'/': {
|
||||
get: (req, res) => {
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
'/login': {
|
||||
get: (req, res) => {
|
||||
|
||||
},
|
||||
|
||||
post: (req, res) => {
|
||||
|
||||
},
|
||||
},
|
||||
'/logout': {
|
||||
|
||||
'/logout': {
|
||||
get: (req, res) => {
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -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',
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
@ -50,5 +50,5 @@ module.exports = {
|
|||
|
||||
sqlite3_delete_timestamp_update_trigger() {
|
||||
return `DROP TRIGGER IF EXISTS [UpdateModified]`;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -1,28 +1,137 @@
|
|||
<main>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#"><strong>First</strong></a></li>
|
||||
<li><a href="#">Second</a></li>
|
||||
<li><a href="#">Third</a></li>
|
||||
<li><a href="#">Fourth</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<header class="w930">
|
||||
<div class="heading">
|
||||
<a href="#"><span class="title">Tim's Blog</span></a>
|
||||
<span class="tagline">Random musings and rantings</span>
|
||||
</div>
|
||||
</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>
|
||||
<h1>Article</h1>
|
||||
</article>
|
||||
Here are some random code examples:
|
||||
|
||||
<aside>
|
||||
<h1>Aside</h1>
|
||||
</aside>
|
||||
<p>HTML is always fun to look at, right?</p>
|
||||
<pre><code><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Some Random Title</title>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
</code></pre>
|
||||
|
||||
<section>
|
||||
<h1>Section</h1>
|
||||
<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><?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>© Timothy J. Warren</p>
|
||||
</footer>
|
||||
</main>
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
Reference in New Issue