@import 'https://unpkg.com/normalize.css@8.0.1/normalize.css';
@import 'https://fonts.googleapis.com/css?family=Average|Average+Sans';
@import 'https://fonts.googleapis.com/css?family=Source+Code+Pro';
/*@import 'https://fonts.googleapis.com/css?family=EB+Garamond';*/

@import 'pygments-solarized-light.css';
@import 'pygments-solarized-dark.css' (prefers-color-scheme: dark);


/* * * * * * * *
 * TODO
 * * * * * * * *
 * - text selection
 * - body headings/sections
 * - main centered <1000px
 * - paragraph style: first letter
 * - standout: fix symbol, use fontawesome, full width on mobile
 * - @counter for figure labels
 * - nav display: -inlinae-bock and flex not working with many items
 * - consolidate all "content-items":
 * 		details, figure, codehilite, standout
 * 		border-radius, padding, margin, background, background:hover
 * - TOC padding
 * - ul/ol lists bullets, padding
 * - try Bitsteram Charter (supports real smallcaps etc.) sans pairing?
 */

/* * * * * * * *
 * VARIABLES
 * * * * * * * */

:root {
	--page-width: 1000px;
	--content-proportion: 70%;
	--content-width: calc(var(--page-width) * var(--content-proportion));
	--content-width: 700px;
	--margin: 10px;

	--border-radius: 5px;
	--border-radius-small: 3px;

	/* https://www.colourlovers.com/palette/1929521/suspended_desire */
	--color-accent: #025b65;
	--color-highlight: #038796;
	--color-background-bg: #222; #ccc;
	--color-content-bg: #eee;
	--color-background-fg: var(--color-content-bg);
	--color-content-fg: var(--color-background-bg);

	--font-sans: 'Average Sans', sans-serif;
	--font-serif: 'Average', serif;
	--font-mono: 'Source Code Pro', monospace;

	--box-shadow: 0 0px 10px rgba(0,0,0,0.5);

	--content-item-bg: rgba(0,0,0,0.04);
	--content-item-bg-hover: rgba(0,0,0,0.06);
	--content-top-border: #fff;

	--color-link: var(--color-accent);
	--color-link-hover: var(--color-highlight);
	
	--opacity-aside: 0.5;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background-fg: #ddd;
		--color-content-bg: #444;
		--color-content-fg: #ccc;
		--color-accent: #038796;
		--color-highlight: #04A1B3; #04b3c7;
		--content-top-border: rgba(255,255,255,0.2);
		--color-link: var(--color-highlight);
		--color-link-hover: var(--color-highlight);
	}
}


/* * * * * * * *
 * BASIC LAYOUT
 * * * * * * * */

html {
	/* TODO maybe petrol? */
	background: var(--color-background-bg);
	font-family: var(--font-sans);
	font-size: 12pt;
}

/* https://css-tricks.com/snippets/css/complete-guide-grid/ */
/* mobile first: everything has 100% width and is in one column */
body {
	margin: 0 auto;
	display: grid;
	width: 100%;
	grid-template-columns: [content] 100%;
	/* why not working with aside {grid-row: [content] ? */
	grid-template-rows: [header] . [nav] . [content] .
}
main, header, nav, footer, aside {
	grid-column: content;
}


/* * * * * * * *
 * GLOBAL ELEMENTS
 * * * * * * * */

*:not(a):not(i)[title] {
	cursor: help;
}


/* * * * * * * *
 * HEADER
 * * * * * * * */

body > header {
	text-align: center;
	margin: var(--margin);
	font-weight: 1000;
	font-family: var(--font-serif);
	font-size: 2em;
	/*
	text-shadow: 0px 2px 1px rgba(255,255,155,0.5), 0px -1px 0px rgba(0,0,0,0.5);
	*/
}

body > header h1,
body > header h1 a:link,
body > header h1 a:visited {
	color: var(--color-background-fg);
	text-decoration: none;
	margin: 0;
	text-shadow: var(--box-shadow);
}

body > header h1 a:hover {
	color: var(--color-highlight);
}


/* * * * * * * *
 * NAVIGATION
 * * * * * * * */

/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
nav {
	margin: var(--margin);
}

nav ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	/*
	align-items: flex-end;
	align-content: flex-start;
	*/
	padding: 0;
}

nav li {
	display: inline; -block;
	width: calc((var(--content-width)/6));
	color: var(--color-background-fg);
	border-radius: var(--border-radius-small);
	border: 1px solid rgba(238,238,238,0.25); /* #eee, --color-background-fg @ 25% */
	opacity: var(--opacity-aside);
	transition: all 0.2s ease-in-out;
	padding: 7px;
	text-align: center;
}

nav li:hover {
	background: rgba(238,238,238,0.15); /* #eee, --color-background-fg @ 15% */
	color: var(--color-highlight);
	opacity: 1;calc(var(--opacity-aside)*1.5);
}

nav a:link, nav a:visited {
	color: var(--color-background-fg);
	text-decoration: none;
}

nav li.active {
	opacity: 1;
	color: var(--color-content-fg);
	background: var(--color-content-bg);
	border-color: var(--color-content-bg);
}


/* * * * * * * *
 * SIDEBAR
 * * * * * * * */

aside {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-evenly;
	align-items: flex-end;
	align-content: flex-start;
	width: calc(100% - 2*var(--margin));
	text-align: center;
	margin: var(--margin);
	color: var(--color-background-fg);
}

aside a:link, aside a:visited {
	color: var(--color-background-fg);
	text-decoration: none;
}

aside .avatar {
	width: 150px;
	border-radius: 100%;
	border: 3px solid #fff;
	box-shadow: var(--box-shadow);

}

aside ul.social {
	padding: 0;
	list-style: none;
	font-family: FontAwesome;
}

aside ul.social li {
	display: inline;
	font-size: 24pt;
	margin-right: 5px;
	color: var(--color-background-fg);
	opacity: var(--opacity-aside);
}

aside ul.social li:hover {
	opacity: 1;
	color: var(--color-accent) !important;
}

aside header {
	width: 150px;
	/* opacity: var(--opacity-aside); */
}

aside header .symbol {
	font-size: 4em;
}


/* * * * * * * *
 * CONTENT
 * * * * * * * */

main {
	background: var(--color-content-bg);
	padding: 20px;
	font-family: var(--font-serif);
	text-align: left;
	border-radius: var(--border-radius);
	margin: var(--margin);
	border-top: 1px solid var(--content-top-border);
	box-shadow: var(--box-shadow);
	color: var(--color-content-fg);
	line-height: 1.3;
}

/* TODO comment? */
main > h1:first-of-type {
	display: none;
}

main h1 a:link, main h1 a:visited,
main h2 a:link, main h2 a:visited,
main h3 a:link, main h3 a:visited,
main h4 a:link, main h4 a:visited,
main h5 a:link, main h5 a:visited,
main h6 a:link, main h6 a:visited {
	color: var(--color-content-fg);
	text-decoration: none;
}
main h1 a:hover,
main h2 a:hover,
main h3 a:hover,
main h4 a:hover,
main h5 a:hover,
main h6 a:hover {
	text-decoration: underline;
}


figure {
	background: var(--content-item-bg);
	padding: 7px;
	border-radius: var(--border-radius-small);
	max-width: 40%;
	margin: 15px;
	float: right;
	margin: calc(1.5*var(--margin));
	margin-right: 0;
}
figure:hover {
	background: var(--content-item-bg-hover);
}

figure img {
	max-width: 100%;
}

caption, figcaption {
	font-size: 0.8em;
	text-align: center;
	margin-top: 0.5em;
	caption-side: bottom;
}
caption .label, figcaption .label {
	font-weight: bold;
	font-variant: small-caps;
	margin-right: 1em;
}

p {
	text-indent: 0;
	margin-top: 0;
	margin-bottom: 0;
}

p + p, ul + p, ol + p, img + p,
figure + p, blockquote + p,
pre + p, code + p { 
	xtext-indent: 1em;
	margin-top: 1.2ex;
}

.sc {
	font-variant: small-caps;
}

/*
p:first-of-type::first-letter {
	font-size: 1.3em;
	font-weight: bold;
}
*/

p a:link, p a:visited,
main ul a:link, main ul a:visited {
	color: var(--color-link);
	text-decoration: none;
}
p a:link:hover, p a:visited:hover,
main ul a:link:hover, main ul a:visited:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}

hr {
	border: 0;
	height: 1px;
	background: rgba(0,0,0, 0.2);
	width: 80%;
	margin: 0 auto;
	margin-top: 2em;
	margin-bottom: 1.6em;
	text-align: center;
	clear: both;
}
hr:after {
	content: "\2767"; /* ❧ ROTATED FLORAL HEART BULLET */
	position: relative;
	top: -0.6em;
	display: inline-block;
	font-size: 1.5em;
	background: var(--color-content-bg);
	padding: 0 0.25em;
	color: rgba(0,0,0, 0.3);
	z-index: 5;
}

main ol, main ul {
	padding-left: 3em;
	padding-right: 2em;
}

.standout {
	margin: var(--margin) 2em var(--margin) 2em;
	background: var(--color-accent);
	border-radius: var(--border-radius-small);
	border-top: 2px solid var(--color-highlight);
	padding: 1em;
	color: var(--color-background-fg);
}
.standout a:link, .standout a:visited {
	color: var(--color-background-fg);
	text-decoration: underline;
}
.standout a:link:hover, .standout a:visited:hover {
	color: var(--color-background-fg);
}
.standout::before {
	color: var(--color-highlight);
	content: "!";
	font-size: 3em;
	font: sans-serif;
	font-weight: 1000;
	float:left;
	margin-right: 0.5ex;
	padding: 0;
	position: relative;
	top: -0.25em;
	left: 0;
}

details  {
	border-radius: var(--border-radius-small);
	background-color: var(--content-item-bg);
	list-style:roman;
	padding: 0.5em;
}

details > summary {
	outline: none;
	margin: -0.5em;
	padding: 0.5em;
	border-radius: var(--border-radius-small);
	background-color: var(--content-item-bg-hover);
}

details[open] > summary {
	border-radius: var(--border-radius) 0 var(--border-radius) 0;
}

code, pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.codehilite {
	background: var(--content-item-bg);
	margin: 1em;
	border-radius: var(--border-radius-small);
	overflow-y: auto;
}

.codehilite:hover {
	background: var(--content-item-bg-hover);
}

.codehilite pre {
	padding: 1ex;
	margin: 0;
}

.MathJax {
	font-size: 2em !important;
}


/* * * * * * * *
 * BLOG
 * * * * * * * */
.entry-title {
	font-size: 3em;
	margin: 0.25em;
}

footer.post-info time,
footer.post-info address,
footer.post-info div {
	color: var(--color-content-fg);
	display: inline-block;
	margin-left: 1em;
}


/* * * * * * * *
 * FOOTER
 * * * * * * * */

footer {
	margin: var(--margin) auto;
	text-align: center;
	color: var(--color-background-fg);
	opacity: var(--opacity-aside);
	width: 70%;
	font-size: 0.8em;
}

footer ul {
	margin: 0;
	padding: 0;
}

footer li {
	display: inline-block;
	margin: 5px;
}

footer a:link, footer a:visited {
	color: var(--color-background-fg);
	text-decoration: none;
	border-width: 0px;
	border-bottom: 1px dotted var(--color-background-fg);
}

footer a:link:hover, footer a:visited:hover {
	border-bottom-style: solid;
}


/* for blog */
footer.post-info a:link, footer a:visited {
	color: var(--color-content-fg);
	text-decoration: none;
	border-width: 0px;
	border-bottom: 1px dotted var(--color-background-fg);
}


/* * * * * * * *
 * RESPONSIVE
 * * * * * * * */

/* >700px: set a fixed width for the content column */
@media all and (min-width: 700px) {
	body {
		grid-template-columns: [content] var(--content-width);
	}
}
/* >1000px: move aside to a second column */
@media all and (min-width: 1000px) {
	body > header {
		text-align: left;
	}
	body {
		width: var(--page-width);
		grid-template-columns: [content] var(--content-proportion) [sidebar] calc(100% - var(--content-proportion)); 
	}
	aside {
		grid-column: sidebar;
		grid-row: 3; /* 1: header, 2: nav, 3: main/aside */
		flex-flow: column nowrap;
		align-items: center;
		justify-content: flex-start;
	}
}