/* fonts */

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/Open-Sans/OpenSans-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/Open-Sans/OpenSans-Bold.woff') format('woff');
	font-weight: bold;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/Open-Sans/OpenSans-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/Open-Sans/OpenSans-Italic.woff') format('woff');
	font-style: italic;
}

@font-face {
	font-family: 'Source Code Pro';
	src: url('../fonts/Source-Code-Pro/SourceCodePro-Regular.otf') format('opentype');
}

/*************************************

		BASICS

*************************************/

/* fix HTML5 elements in IE */
article,
aside,
cite,
content,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

body {
	margin:0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
}

a {
	color: #000;
	background: #F9FBF9;
	text-decoration: none;
	border-bottom: 2px dashed #01FF01;
	padding:0 0.25em;
}

a img {
	border: none;
}

article {
	min-height: 100vh;
	margin-bottom: 5em;
}

/* style for asides excluding the frontpage loop or bigfoot footnote popups */
article aside:not(.bigfoot-footnote) {
	margin-right: -10vw;
	padding: 1em 10vw 1em 55%;
	background-color: #01FF01;
	-webkit-clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 30% 100%);
	clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 30% 100%);
}

cite {
	font-size: 85%;
	padding-left: 20%;
}

cite a {
	border: none;
}

code, pre {
	font-family: 'Source Code Pro', monospace;
	border: 1px solid #01FF01;
	padding: 0 0.2em;
}

/*don't apply border to code inside prism blocks*/
pre > code,
code[class*="language-"],
pre[class*="language-"] {
	border: none;
}

blockquote {
	border-left: 8px solid #555959;
	padding-left: 1em;
	font-style: italic;
}

figcaption {
	text-align: center;
	font-style: italic;
	font-size: 0.8em;
}

.pagination {
	text-align: center;
	margin: 1em;
}

.pagination a {
	color: #01FF01;
	border:none;
}

/*icons*/

.icon {
	height: 1.5em;
	width: 1.5em;
	fill: #01FF01;
}

.icon-link {
	position: relative;
	left: 1em;
	top: -0.5em;
}

.ghost-icon {
	height: 1em;
	width: 1em;
}

.ghost-icon:hover,
.ghost-icon:active {
	fill: #fff;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Source Code Pro', monospace;
}

/* no underlines, colours etc in links in headers or headings */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, header a {
	color: #000;
	text-decoration: none;
	border: none;
}

/*************************************

		HEADERS

*************************************/

.hg-site-header {
	display: grid;
	grid-template-columns: 1fr 9fr;
	margin-bottom: 2em;
}

.blog-logo {
	margin: 0 5vw;
	height: 10vw;
	width: 10vw;
	min-height: 100px;
	min-width: 100px;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.site-meta {
	margin-left: 2em;
}

.hc-post-description {
	color: #555959;
}

header a {
	background: #fff;
}

.tag-name {
	font-style: italic;
	font-weight: bold;
}

/*************************************

		INDEX / LOOP

*************************************/

.loop {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
	grid-auto-flow: dense;
}

.post-listing {
	margin: 1em 2em;
	border: 1px solid #000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: right;
}

.post-listing a {
	border: none;
	background: none;
}

.post-listing-img {
	width:100%;
	height:100%;
	object-fit: cover;
	display: block;
}

.post-listing .post-details {
	padding: 0 1em;
}

.post-listing.featured {
	background: #000;
	color: #fff;
	grid-column: span 2;
	border:none;
	min-height: 33vh;
}

.post-listing.featured a {
	color:#fff;
}

.post-meta {
	color: #555959;
	font-style: italic;
}

.featured .post-meta {
	color: #555959;
}

.featured .tag-name {
	color: #01FF01;
	font-weight: normal;
}

/*************************************

		POSTS

*************************************/

.post-header {
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height:50vh;
	align-items: center;
	display: flex;
	align-items: center;
}

.post-title {
	background-color: rgba(249,251,249, 0.75);
	width:40%;
	padding: 0.5em 15% 2em 20%;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);

}

main.post {
	margin: 0 10vw;
	line-height: 1.75;
	font-size: 120%;
	text-align: justify;
}

.post img {
	max-width: 100%;
}

/*special*/

/*full-width pics using #full at the end of source URL (e.g. after the .jpg)*/
.post img[src$="#full"] {
    max-width: 100vw;
    margin: 0 -10vw;
}

main.post a {
	font-size: 90%;
	font-weight: bold;
}

/*read more */

.primary-tag {
	text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1px;
}

.primary-tag a {
	border: none;
	background: none;
}

.tag-more {
	background: #CBD8CB;
	padding: 1em 2em;
	margin-top:1px;
}

.tag-more a {
	color: #000;
}

/*************************************

		TOPICS PAGE

*************************************/

.tags-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10vw;
	min-height: 80vh;
}

.topic {
	font-family: 'Source Code Pro', monospace;
	flex-grow: 1;
	max-width: 100vw;
	min-width: 10vw;
	overflow: hidden;
	display: flex;
	align-items: center;
	background-color: rgba(1, 255, 1, 1);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin: 1px;
}

.topic a {
	margin: auto;
	border-bottom: none;
	background: none;
	color: #fff;
	text-shadow: 2px 2px #000;
}

/*************************************

		FOOTER

*************************************/

footer {
	min-height: 20vh;
	color:#CBD8CB;
	background: #555959;
	font-family: 'Source Code Pro', monospace;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 1em;
}

footer li {
	list-style: none;
	margin-bottom: 0.5em;
}

footer a {
	color: #01FF01;
	text-decoration: none;
	background: #555959;
	border: none;
}

footer a:hover,
footer a:active {
	color:#fff;
}

footer > * {
	margin: 1em;
}

/*************************************

		RESPONSIVE

*************************************/

/* width */

@media only screen and (max-width: 1000px) {

	.loop {
		grid-template-columns: 1fr 1fr;
	}

	.post-title {
		width:65%;
		-webkit-clip-path: none;
		clip-path: none;
	}

	.post-listing {
		margin: 1em;
		border: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 2fr 1fr;
	}

	.post-listing .post-details {
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		border-left: 1px solid #000;
	}

	footer {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (max-width: 900px) {

	.hg-site-header {
		display: grid;
		grid-template-columns: 1fr;
		text-align: center;
	}

	.blog-logo {
		margin: auto;
	}

	.site-meta {
		margin-left: 0;
	}

	.loop {
		grid-template-columns: 1fr;
	}

	.post-listing {
		margin: 0;
		border: 0;
	}

	.post-listing .post-details {
		border:0;
	}
	.post-listing.featured {
		grid-column: unset;
	}

	.post-listing-img {
		width:100%;
		min-height:100%;
		object-fit: cover;
	}

	.primary-tag {
		display: block;
	}
}

@media only screen and (max-width: 600px) {

	article aside:not(.bigfoot-footnote) {
		margin: 0 -10vw;
		padding: 5vw;
		background-color: #01FF01;
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}

	.post-listing {
		grid-template-columns: 1fr;
		grid-template-rows: 2fr 1fr;
	}

	footer {
		grid-template-columns: unset;
		font-size: 120%;
	}
}