From 6647c3cf68cfa8c12cd0a47ac15e854f9a9aa177 Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Thu, 15 Dec 2022 20:59:10 +0000
Subject: [PATCH] include images in blog pages

---
 scripts/mkblog.py    | 3 +++
 src/inc_css/blog.css | 9 +++++++++
 2 files changed, 12 insertions(+)

diff --git a/scripts/mkblog.py b/scripts/mkblog.py
index 01ef8b8..0bcd5b6 100644
--- a/scripts/mkblog.py
+++ b/scripts/mkblog.py
@@ -56,6 +56,9 @@ with open(dummy_file, 'r') as read_file, open(dest_file, 'w') as write_file:
     # modify the basic html to make it nicer for styling later
     html = read_file.read()
 
+    # extract images from their enclosing <p> tags
+    html = re.sub('(<p>(<img(?:.+)/>)</p>)', r'\2', html)
+
     # insert text-panel start between non-<p> and <p> elements
     html = re.sub('((?<!</p>)\n)(<p>)', r'\1<div class="text-panel">\n\2', html)
     # insert para-block end between <p> and non-<p> elements
diff --git a/src/inc_css/blog.css b/src/inc_css/blog.css
index b41d42a..ca7c680 100644
--- a/src/inc_css/blog.css
+++ b/src/inc_css/blog.css
@@ -88,6 +88,15 @@ ul.blog-index li a {
     padding-right: 1em;
 }
 
+.page .blog img {
+    width: max(30vmax, 500px);
+
+    margin-top: 1.2em;
+    margin-bottom: 2em;
+
+    border-radius: 2em;
+}
+
 @media only screen and (max-width: 700px) {
     .page .blog .code-panel {
         padding: 1.0em 5.0em;