update blog

blog

@@ -1 +1 @@
-Subproject commit 2fdd63de5637344e4b3f51f6d177e3b2ef1834a8
+Subproject commit 5f8a0cefe59a9fd1a5b2daf2470295312f3b3c07

makefile

@@ -17,6 +17,7 @@ BLOG_TMP_DIR	= .blogtmp
 PAGES 			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html")
 STYLES			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
 BLOG_PAGES		= $(shell find $(BLOG_SRC_DIR) -wholename "$(BLOG_SRC_DIR)*.md")
+BLOG_IMAGES		= $(shell find $(BLOG_SRC_DIR) -wholename "$(BLOG_SRC_DIR)*.png" -o -wholename "$(BLOG_SRC_DIR)*.jpg")
 
 IMAGES			= $(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.png")
 
@@ -27,6 +28,8 @@ BLOG_INDEX 			= $(OUT_DIR)/blog.html
 BLOG_RSS			= $(BLOG_OUT_DIR)/index.xml
 BLOG_INDEX_LINKS 	= $(BLOG_TMP_DIR)/blogindexlinks.html
 BLOG_TARGETS		= $(BLOG_PAGES:$(BLOG_SRC_DIR)/%.md=$(BLOG_OUT_DIR)/%.html)
+BLOG_PNG_TARGETS	= $(BLOG_IMAGES:$(BLOG_SRC_DIR)/%.png=$(BLOG_OUT_DIR)/%.png)
+BLOG_JPG_TARGETS	= $(BLOG_IMAGES:$(BLOG_SRC_DIR)/%.jpg=$(BLOG_OUT_DIR)/%.jpg)
 
 HTML_TARGETS 	= $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
 CSS_TARGETS 	= $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
@@ -52,7 +55,13 @@ $(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES) | $(OUT_DIR)
 $(OUT_DIR):
 	mkdir -p $@
 
-blog: $(BLOG_TARGETS) $(BLOG_RSS) | $(BLOG_TMP_DIR)
+$(BLOG_OUT_DIR)/%.png: $(BLOG_SRC_DIR)/%.png
+	cp $< $@
+
+$(BLOG_OUT_DIR)/%.jpg: $(BLOG_SRC_DIR)/%.jpg
+	cp $< $@
+
+blog: $(BLOG_TARGETS) $(BLOG_PNG_TARGETS) $(BLOG_JPG_TARGETS) $(BLOG_RSS) | $(BLOG_TMP_DIR)
 
 $(BLOG_RSS): $(BLOG_PAGES)
 	pipenv run python scripts/mkblogrss.py $(BLOG_PAGES) > $@

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

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;