Support captions; fix code blocks

scripts/template_md.py

@@ -6,7 +6,7 @@ from template import template
 from pymdownx.superfences import SuperFencesCodeExtension
 
 def main():
-	md = markdown.Markdown(extensions = ["meta", "extra", "toc", SuperFencesCodeExtension(preserve_tabs=True)])
+	md = markdown.Markdown(extensions = ["meta", "extra", "toc", "markdown_captions", SuperFencesCodeExtension(preserve_tabs=True)])
 	with open(sys.argv[1], "r", encoding="utf-8") as file_in:
 		html = md.convert(file_in.read())
 	output = template(html, sys.argv[2], ".html", md.Meta) if "template" in md.Meta else html

static/style.css

@@ -38,6 +38,11 @@
 	font-style: normal;
 }
 
+:root {
+	--color-fg-faded: #555;
+	--color-bg-faded: #EEE;
+}
+
 body {
 	font-family: 'Fira Sans', sans-serif;
 	font-size: 18px;
@@ -211,14 +216,13 @@ div.block:first-of-type, div.block-small {
 	border-top: none;
 }
 
-code {
-	background-color: #EEEEEE;
+pre, code {
+	background-color: var(--color-bg-faded);
 }
 
 pre {
 	line-height: 1.5;
 	font-size: 14px;
-	background-color: #EEEEEE;
 	padding: 6px;
 	overflow: auto;
 }
@@ -272,6 +276,15 @@ p.openring {
 	text-align: right;
 }
 
+figure {
+	text-align: center;
+}
+
+figure figcaption {
+	line-height: 1;
+	color: var(--color-faded);
+}
+
 @media only screen and (max-width: 950px) {
 	header {
 		height: 172px;
@@ -423,6 +436,10 @@ p.openring {
 }
 
 @media (prefers-color-scheme: dark) {
+	:root {
+		--color-fg-faded: #BBB;
+		--color-bg-faded: #222;
+	}
 	body {
 		background-color: #111111;
 		color: #DDDDDD;
@@ -441,7 +458,7 @@ p.openring {
 		border-left: solid 2px #444444;
 	}
 
-	div.post-head span.subtext, div.article p.extra, p.openring {
+	p.faded, span.faded, div.post-head span.subtext, div.article p.extra, p.openring {
 		color: #BBBBBB;
 	}