/* Base variables */
:root {
	--txt-color: #bababa;
	--txt-hover: #ebeaea;
	--croisillon-color: orange;
	--bg-color: #252526;
	--bg-main-color: #1e1e1e;
	--bg-article-color: #1a1a1a;
	--bg-quote-color: #252526;
	--body-font: 'Georgia', serif;
	--global-width: 100ch;
	/* --img-shadow: 0; */

}

/* For light mode */
@media (prefers-color-scheme: light) {
	:root {
		--bg-color: #eff2f8;
		--bg-main-color: #ffffff;
		--txt-color: #333333;
		--txt-hover: #747474;
		--bg-quote-color: #eff2f8;
		--img-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}

body {
    background-color: var(--bg-color);
    color: var(--txt-color);
	font-family: var(--body-font);
	font-size: medium;
}

/* Headings titles and stuff, h1, h2...  */
/* Before to put # before the titles, like in Markdown. I love Markdown */
.no-before:before {
	content: "";
}

h1 { font-size: 1.75em; text-align: left; }
h2 { font-size: 1.50em; text-align: left; }
h3 { font-size: 1.25em; text-align: left; }
h3 { font-size: 1em; text-align: left; }
h4 { font-size: 0.75em; text-align: left; }

h1:before {
	content: '# ';
	color: var(--croisillon-color);
	letter-spacing: 2px;
}

h2:before {
	content: '## ';
	color: var(--croisillon-color);
	letter-spacing: 2px;
}

h3:before {
	content: '### ';
	color: var(--croisillon-color);
	letter-spacing: 2px;
}

h4:before {
	content: '#### ';
	color: var(--croisillon-color);
	letter-spacing: 2px;
}

/* # Texts and links */
/* Links */
a {
	color: var(--txt-color);
	text-decoration: underline;
}

a:hover {
	color: var(--txt-hover);
}

/* Header */
/* Title */
header.title {
	margin: 0px auto;
	max-width: var(--global-width);
	overflow: auto;
}

.presentation {
	font-size: larger;
}

h1.main-title {
	margin-bottom: 0px;
}

/* Subtitle */
p.subtitle {
	font-style: italic;
}

/* To align the title left */
.header-left {
	float: left;
}

/* Menu inside header */
/* Right class is also used by the tags in the article page */
.right {
	float: right;
	max-width: 60%;
	text-align: right;
}

.menu {
	text-align: center;
	float: right;
	margin-top: 2em;

	li {
		display: inline-block;
		border-right: 1px solid var(--txt-color);
	}

	li:last-child {
		border-right: none;
	}

	li a {
		padding: 1em;
	}
}

/* main stuff */
main {
	background-color: var(--bg-main-color);
	max-width: var(--global-width);
	margin: 0px auto;
	padding: 1em;
	text-align: justify;
	line-height: 1.5;
	
}

/* ## Article display on index */
/* article.index {
	margin: 0 0 1em 0;

	footer {
		text-align: right;
		padding-right: 1em;
	}
} */

section.index {
	margin: 0 0 1em 0;

	footer {
		text-align: right;
		padding-right: 1em;
	}
}

/* For the article list on the second half of index.thml */
ol.index {
	list-style: none;
}

h1.art-title {
	margin-bottom: 0.5em;
}

.art-desc {
	margin-left: 1.75em;
}

/* Content of article on article page */
article header {
	margin-bottom: 2em;

	p {
		line-height: 1;
	}
}

article.article-page {
	margin: 0 0 1em 0;
	padding: 0 0 1em 0;

	footer {
		text-align: right;
		padding-right: 1em;
	}

	img {
		display: block;
		border: 15px solid white;
		margin: 2em auto 0 auto;
		max-width: 90%;
		max-height: 20%;
		box-shadow: var(--img-shadow);
	}
}

/* Don't think it's very usefull for the article sample on index.html */
/* article.index {
	margin: 0 0 1em 0;
	line-height: 1.5;

	footer {
		text-align: right;
		padding-right: 1em;
	}

	img {
		display: block;
		border: 15px solid white;
		margin: 2em auto 0 auto;
		max-width: 90%;
	}
} */


article.first-article {
	border-bottom: solid 1px var(--txt-color);
	border-width: 50%;
}

/* After article list on index.html */
.after-index {
	border-top: solid 1px var(--txt-color);
}

hr {
	border: solid 1px;
}

/* footer */
footer.bottom {
	margin: 1em auto;
	max-width: var(--global-width);
	text-align: center;
}

/* for the little Mastodon logo */
img.mastodon {
	width: 20px;
}

/*  pagination */
nav.pagination {
	text-align: center;
	a {
		text-decoration: none;
	}
	li {
		display: inline-block;
	}
}

/* Tag styles */
/* The little labels by the tags name */
.tag {
	a {
		text-decoration: underline;
		padding: 2px;
		margin: 1px;
	}
	a::before {
		content: "🏷️";
		vertical-align: middle;
		letter-spacing: 5px;
		display: inline-block;
		text-decoration: none;
	}

	li {
		list-style: none;
		display: inline-block;
	}
}

/* Categories and archives */
/* Archives */
/* tag class is also used in the archive page for displaying the little thingy by the tag name */

/* Jinja didn't capitalize the first letter of the month. It bothers me. A lot. */
.month {
	text-transform: capitalize;
}

ul.archives {
	li {
		margin-bottom: 1px;
	}
}

/* Categories */
ul.categories {
	list-style: none;

	li {
		margin-bottom: 1em;
	}
}

/* Fancy stuff */
/* code block */
pre {
	position: relative;
	background-color: var(--bg-quote-color);
	padding: 1em 4em 1em 4em;
	max-width: 80%;
	margin: 0px auto;
}

pre::before {
	position: absolute;
	top: 10px;
	left: 10px;
	content: "{";
	font-size: 30px;
}

pre::after {
	position: absolute;
	bottom: 10px;
	right: 10px;
	content: "}";
	font-size: 30px;
}


/* blockquote */
blockquote {
	position: relative;
	background-color: var(--bg-quote-color);
	padding: 1em 4em 1em 4em;
	max-width: 80%;
	margin: 0px auto;
}

blockquote::before {
	position: absolute;
	top: 10px;
	left: 10px;
	content: "«";
	font-size: 30px;
}

blockquote::after {
	position: absolute;
	bottom: 10px;
	right: 10px;
	content: "»";
	font-size: 30px;
}

/* Footnotes - Generated by simple-footnotes plugin */
.footnote {
	position: relative;
	padding: 1em 5em 1em 2em;
	margin: 0px auto;
	ol {
		line-height: 1em;
	}
}

.footnote::before {
	position: absolute;
	content: "📑";
	top: 50px;
	left: 1px;
	font-size: 30px;
}

/* figcaption generated by https://git.sr.ht/~ferruck/yafg */
figcaption {
	text-align: center;
	font-style: italic;
	margin: 1ch 0 2ch 0;
}