First commit. Will clean up the css and things.

2 files changed, 849 insertions, 0 deletions

diff --git a/css/core.css b/css/core.css
new file mode 100755
index 0000000..f575862
--- /dev/null
+++ b/css/core.css
@@ -0,0 +1,685 @@
+@import url('reset.css');
+
+@font-face{
+	font-family: 'League Gothic';
+	src:	local('League Gothic'),
+		local('League-Gothic'),
+		url('/fonts/league-gothic.woff2') format('woff2'),
+		url('/fonts/league-gothic.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face{
+	font-family: 'Lora';
+	src:	local('Lora'),
+		url('/fonts/lora.woff2') format('woff2'),
+		url('/fonts/lora.woff') format('woff');
+	font-style: normal;
+	font-weight: normal;
+}
+
+@font-face{
+	font-family: 'Lora';
+	src:	local('Lora'),
+		url('/fonts/lora-italic.woff2') format('woff2'),
+		url('/fonts/lora-italic.woff') format('woff');
+	font-style: italic;
+	font-weight: normal;
+}
+
+@font-face{
+	font-family: 'Lora';
+	src:	local('Lora'),
+		url('/fonts/lora-bold.woff2') format('woff2'),
+		url('/fonts/lora-bold.woff') format('woff');
+	font-style: normal;
+	font-weight: bold;
+}
+
+@font-face{
+	font-family: 'Lora';
+	src:	local('Lora'),
+		url('/fonts/lora-bold-italic.woff2') format('woff2'),
+		url('/fonts/lora-bold-italic.woff') format('woff');
+	font-style: italic;
+	font-weight: bold;
+}
+
+::selection{
+	background: #BC3E3E;
+	color: #ffffff;
+}
+
+::-moz-selection{
+	background: #BC3E3E;
+	color: #ffffff;
+}
+
+h1,h2,h3,h4,h5,h6,code{
+	hyphens: none;
+}
+
+#comments li > p::selection{
+	background: #ffffff;
+	color: #BC3E3E;
+}
+
+#comments li > p::-moz-selection{
+	background: #ffffff;
+	color: #BC3E3E;
+}
+
+#comments li > p *::selection{
+	background: #ffffff;
+	color: #BC3E3E;
+}
+
+#comments li > p *::-moz-selection{
+	background: #ffffff;
+	color: #BC3E3E;
+}
+
+html,
+body{
+	background: #ffffff;
+	font-size: 16px;
+	line-height: 1.4;
+}
+
+body{
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+}
+
+figure{
+	text-align: center;
+	margin: 0;
+	font-size: 0;
+}
+
+mark{
+	background: #BC3E3E;
+	color: #ffffff;
+}
+
+article * + figcaption{
+	margin-top: 0;
+	font-size: .75rem;
+}
+
+b, strong{
+	font-weight: bold;
+}
+
+i, em{
+	font-style: italic;
+}
+
+a,
+a:link,
+a:visited{
+	color: #BC3E3E;
+	text-decoration: underline;
+}
+
+#comments li > p a:hover{
+	color: #ffffff;
+}
+
+
+body{
+	background: none;
+	margin: auto;
+}
+
+footer::after{
+	content: url('/images/footer-red.svg');
+	display: block;
+	line-height: 0;
+	font-size: 0;
+}
+
+footer{
+	background: #19232C;
+	text-align: center;
+    	padding: 2rem 0;
+    	margin-top: auto; /* for flex */
+}
+
+footer p{
+	color: #ffffff;
+	font-family: 'Lora', serif;
+	margin-bottom: 2rem;
+}
+
+header{
+	padding: 1rem;
+	background: #19232C;
+	text-align: center;
+}
+
+header > *{
+	max-width: 650px;
+	color: #ffffff;
+	font-family: 'Lora', serif;
+	margin: auto;
+}
+
+header nav{
+	font-size: 0;
+	line-height: 0;
+	padding: 0;
+}
+
+header nav ul li{
+	color: #ffffff;
+	font-family: 'League Gothic', sans-serif;
+	display: inline-block;
+}
+
+header nav ul li a{
+	font-size: 2rem;
+	height: 1.75rem;
+	line-height: 1;
+	display: inline-block;
+	text-transform: uppercase;
+	padding: 1rem;
+}
+
+header nav ul li + li::before{
+	content: '\2022';
+	color: #fff;
+	display: inline-block;
+	margin: 0 1rem;
+	font-size: 1.5rem;
+	position: relative;
+	top: -2px;
+}
+
+header a,
+header a:link,
+header a:visited,
+footer a,
+footer a:link,
+footer a:visited{
+	color: #BC3E3E;
+	text-decoration: none;
+}
+
+header > a,
+header > a:link,
+header > a:visited{
+	font-family: 'League Gothic', sans-serif;
+	font-size: 5rem;
+	line-height: .85;
+	height: 3.75rem;
+	text-transform: uppercase;
+	display: block;
+	padding: 1rem 0;
+}
+
+header a:hover,
+footer a:hover{
+	background: rgba(255, 255, 255, .05);
+	text-decoration: none;
+}
+
+header > p{
+	margin: 1rem auto;
+	max-width: 970px;
+	line-height: 1.6;
+}
+
+header nav p{
+	display: inline-block;
+}
+
+article,
+main{
+	padding: 2rem 0;
+}
+
+#comments{
+	padding-bottom: 2rem;
+}
+
+main.error{
+	display: flex;
+	flex-grow: 1;
+}
+
+main.error h1{
+	margin: auto;
+}
+
+article,
+#comments{
+	color: #222;
+	font-family: 'Lora', serif;
+	line-height: 1.7;
+	font-size: 1.125rem;
+	max-width: 650px;
+	margin: 0 auto;
+	hyphens: auto;
+	text-align: justify;
+}
+
+article img{
+	border: 1px solid #888;
+	border-radius: 5px;
+	max-width: 100%;
+	box-sizing: border-box;
+}
+
+article ol{
+	list-style: decimal;
+}
+
+article ul{
+	list-style: disc;
+}
+
+nav{
+	padding: 2rem 0;
+	max-width: 650px;
+	margin: auto;
+	font-family: 'Lora', serif;
+}
+
+h1,
+h2,
+h3,
+header + main nav ul li p:first-child a,
+#comments h2{
+	font-weight: normal;
+	font-family: League Gothic, sans-serif;
+	text-transform: uppercase;
+	font-size: 3.125rem;
+	line-height: 1;
+	text-align: center;
+}
+
+h1,
+header + main nav ul li p:first-child a,
+header + main nav ul li p:first-child a:link,
+header + main nav ul li p:first-child a:visited{
+	color: #333;
+	text-decoration: none;
+}
+
+header + main nav ul li p:first-child a:hover{
+	color: #BC3E3E;
+}
+
+header + main nav ul li p:first-child a{
+	font-size: 2rem;
+	line-height: 1;
+}
+
+nav ul li{
+	color: #444444;
+	list-style: none;
+}
+
+header + main nav ul li + li,
+#comments ol li + li{
+	margin-top: 2rem;
+}
+
+header + main nav li p + p{
+	display: flex;
+	margin-top: .5rem;
+}
+
+ul.post-categories{
+	display: inline;
+}
+
+ul + time::before,
+body nav ul li time + a::before,
+#comments time::before{
+	content: '\2022';
+	margin-right: .5rem;
+	margin-left: .5rem;
+	display: inline-block;
+	color: #222;
+}
+
+#comments time::before{
+	font-size: 1rem;
+	color: #fff;
+}
+
+article h2,
+#comments h2{
+	font-size: 2.125rem;
+	line-height: 1;
+	text-align: left;
+	color: #444;
+	margin-top: 3rem;
+}
+
+#comments h2:first-child{
+	display: none;
+}
+
+article h3{
+	font-size: 2rem;
+	text-align: left;
+	color: #444;
+	margin-top: 3rem;
+}
+
+article * + *,
+#comments ol li > div p + p{
+	margin-top: 1rem;
+}
+
+article time{
+	display: block;
+	border-top: 3px double #888;
+	border-bottom: 3px double #888;
+	margin: 2rem 0;
+	text-align: center;
+	padding: 1rem 0;
+	font-style: italic;
+}
+
+sup{
+	vertical-align: super;
+	font-size: .5rem;
+}
+
+.mono{
+	font-family: monospace;
+}
+
+aside{
+	border-radius: 5px;
+	color: #ffffff;
+	text-shadow: none;
+	padding: 2rem;
+}
+
+aside::before{
+	font-family: League Gothic, sans-serif;
+	display: block;
+	text-transform: uppercase;
+	font-size: 2rem;
+	line-height: 1;
+	border-bottom: 3px double rgba(255, 255, 255, .5);
+	padding-bottom: 1rem;
+	margin-bottom: 1rem;
+}
+
+aside a,
+aside a:link,
+aside a:visited{
+	color: #fff;
+}
+
+aside.update{
+	background: #FBFAAA;
+	color: #222;
+}
+
+aside.update::before{
+	content: 'Update';
+	color: #444;
+	border-bottom: 3px double rgba(0, 0, 0, .5);
+}
+
+aside.warning{
+	background: #BC3E3E;
+}
+
+aside.warning::before{
+	content: 'Attention';
+}
+
+aside.note{
+	background: #3E80BC;
+}
+
+aside.note::before{
+	content: 'Note';
+}
+
+img[src*="alex-cabal.jpg"]{
+	float: left;
+	margin-right: 2rem;
+	max-width: 200px;
+}
+
+#comments::before{
+	content: url('/images/footer-leaf.svg');
+	display: block;
+	line-height: 0;
+	font-size: 0;
+	margin-bottom: 2rem;
+	text-align: center;
+}
+
+#comments ol + h2::before{
+	content: url('/images/footer-square.svg');
+	display: block;
+	line-height: 0;
+	font-size: 0;
+	margin: 2rem 0;
+	margin-bottom: 2rem;
+	text-align: center;
+}
+
+#comments ol li > p,
+#comments ol li > p a{
+	font-weight: bold;
+	background: #BC3E3E;
+	padding: 1rem;
+	border-top-right-radius: 5px;
+	border-top-left-radius: 5px;
+	min-height: 3.125rem;
+	color: #ffffff;
+	padding: 0;
+}
+
+#comments ol li > p time{
+	font-weight: normal;
+}
+
+#comments ol li > div{
+	padding: 1rem;
+}
+
+#comments ol li{
+	color: #fff;
+	background: #19232C;
+	border-radius: 5px;
+}
+
+.avatar{
+	border-top-left-radius: 5px;
+	display: inline;
+	margin-right: 1rem;
+	vertical-align: middle;
+}
+
+.nav-buttons{
+	display: flex;
+}
+
+nav .next{
+	margin-left: auto;
+}
+
+nav .next::after{
+	content:' \2192';
+}
+
+nav .back::before{
+	content:'\2190 ';
+}
+
+code{
+	hyphens: none;
+	text-align: left;
+	overflow-x: auto;
+}
+
+code.terminal{
+	color:#fff;
+	background-color:#444;
+	background-image: url('/images/terminal.svg');
+	font-family:'Courier New', Courier, Fixed;
+	background-position: 1rem 1.25rem;
+	background-repeat:no-repeat;
+	padding: 1rem;
+	padding-left: 3rem;
+	border-radius: 5px;
+	display: block;
+	font-style: normal;
+}
+
+code.raw{
+	white-space: pre;
+}
+
+code.terminal.multiline span{
+	display: block;
+}
+
+code.terminal::before,
+code.terminal.multiline span::before{
+	display: inline;
+	margin-right: .5rem;
+	color: #56DA55;
+	font-weight: bold;
+}
+
+code.terminal:not(.multiline)::before{
+	content:'user@localhost:';
+}
+
+code.terminal[data-host]:not(.multiline)::before{
+	content:'user@'attr(data-host)':';
+}
+
+code.terminal[data-user]:not(.multiline)::before{
+	content:attr(data-user)'@localhost:';
+}
+
+code.terminal[data-host][data-user]:not(.multiline)::before{
+	content:attr(data-user)'@'attr(data-host)':';
+}
+
+code.terminal.multiline > span::before{
+	content:'user@localhost:';
+}
+
+code.terminal.multiline > span[data-host]::before{
+	content:'user@'attr(data-host)':';
+}
+
+code.terminal.multiline > span[data-user]::before{
+	content:attr(data-user)'@localhost:';
+}
+
+code.terminal.multiline > span[data-user][data-host]::before{
+	content:attr(data-user)'@'attr(data-host)':';
+}
+
+code.terminal.multiline span + span{
+	margin-top: 5px;
+}
+
+/* fancy keyboard stuff */
+/* adapted from http://michaelhue.com/keyscss */
+kbd{
+	text-transform: capitalize;
+	display: inline;
+	display: inline-block;
+	min-width: 1rem;
+	font-size: 1rem !important;
+	padding: .5rem;
+	font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
+	text-align: center;
+	text-decoration: none;
+	border-radius: .3em;
+	border: none;
+	cursor: default;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+	background: rgb(250, 250, 250);
+	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
+	color:  rgb(50, 50, 50);
+	text-shadow: 0 0 2px rgb(255, 255, 255);
+	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
+}
+
+kbd[title]{
+	cursor: help;
+}
+
+code kbd{
+	text-transform: initial;
+}
+
+.keys{
+	white-space: nowrap;
+}
+
+/* Responsive garbage */
+@media(max-width: 700px){
+	@viewport{
+		zoom: 1.0;
+		width: auto;
+	}
+
+	@-ms-viewport{
+		zoom: 1.0;
+		width: auto;
+	}
+
+	header{
+		margin-bottom: 0;
+	}
+
+	footer{
+		margin-top: 0;
+	}
+
+	header p{
+		display: none;
+	}
+
+	body > nav,
+	article,
+	#comments{
+		padding: 2rem;
+		max-width: calc(100% - 4rem);
+	}
+
+	textarea,
+	input{
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	code.raw{
+		white-space: pre-wrap;
+	}
+}
+
+@media(max-width: 350px){
+	header nav ul li + li::before{
+		display: none;
+	}
+
+	body > header nav > ul{
+		display: flex;
+		flex-direction: column;
+	}
+}
diff --git a/css/reset.css b/css/reset.css
new file mode 100755
index 0000000..13ace62
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,164 @@
+html{
+	margin: 0;
+	padding: 0;
+	line-height: 1;
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
+
+body{
+	margin: 0;
+	padding: 0;
+}
+
+a{
+	outline: 0;
+}
+
+blockquote{
+	margin: 0;
+	quotes: none;
+}
+
+fieldset{
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+
+p{
+	margin: 0;
+}
+
+ol{
+	margin: 0;
+	padding: 0;
+}
+
+ul{
+	margin: 0;
+	padding: 0;
+}
+
+h1{
+	margin: 0;
+}
+
+h2{
+	margin: 0;
+}
+
+h3{
+	margin: 0;
+}
+
+h4{
+	margin: 0;
+}
+
+h5{
+	margin: 0;
+}
+
+h6{
+	margin: 0;
+}
+
+figure{
+	margin: 0;
+}
+
+input{
+	font-family: inherit;
+	line-height: inherit;
+	font-size: 1rem;
+	color: inherit;
+}
+
+textarea{
+	font-family: inherit;
+	line-height: inherit;
+	font-size: 1rem;
+	color: inherit;
+}
+
+input:not([type=radio]):not([type=checkbox]){
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	-ms-appearance: none;
+	appearance: none;
+}
+
+select{
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	-ms-appearance: none;
+	appearance: none;
+	font-family: inherit;
+	line-height: inherit;
+	font-size: 1rem;
+	color: inherit;
+}
+
+legend{
+	padding: 0;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+q{
+	quotes: none;
+}
+
+button{
+	font-family: inherit;
+	font-size: 1rem;
+	line-height: inherit;
+}
+
+input:focus{
+	outline: 0;
+}
+
+button:focus{
+	outline: 0;
+}
+
+select:focus{
+	outline: 0;
+}
+
+
+/* ie 11 compatibility */
+header{
+	display: block;
+}
+
+nav{
+	display: block;
+}
+
+main{
+	display: block;
+}
+
+footer{
+	display: block;
+}
+/* end ie 11 compatibility */
+
+
+/* firefox compatibility */
+button::-moz-focus-inner{ /* needed to workaround bug that doesn't let us set padding in button elements: https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
+	border: 0;
+	padding: 0;
+}
+
+input::-moz-focus-inner{ /* needed to workaround bug that doesn't let us set padding in button elements: https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
+	border: 0;
+	padding: 0;
+}
+/* end firefox compatibility */