From 43500dd0051282b5f475fae625b83aeb5920437e Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Sat, 17 Dec 2022 20:36:07 +0000
Subject: [PATCH] improve image formatting in blog posts

---
 scripts/mkblog.py    |  4 ++--
 src/inc_css/blog.css | 23 ++++++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/scripts/mkblog.py b/scripts/mkblog.py
index 0bcd5b6..99f5026 100644
--- a/scripts/mkblog.py
+++ b/scripts/mkblog.py
@@ -56,8 +56,8 @@ 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)
+    # extract images from their enclosing <p> tags and put them in img panels
+    html = re.sub('(<p>(<img(?:.+)/>)</p>)', r'<div class="img-panel">\2</div>', 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)
diff --git a/src/inc_css/blog.css b/src/inc_css/blog.css
index ca7c680..8056d0a 100644
--- a/src/inc_css/blog.css
+++ b/src/inc_css/blog.css
@@ -6,6 +6,7 @@
 }
 
 .page .blog .para-block {
+
     color: var(--foreground-inactive);
     font-size: 1.1em;
 
@@ -88,11 +89,18 @@ ul.blog-index li a {
     padding-right: 1em;
 }
 
-.page .blog img {
-    width: max(30vmax, 500px);
-
-    margin-top: 1.2em;
+.page .blog .img-panel
+{
+    margin-top: 2em;
     margin-bottom: 2em;
+}
+
+.page .blog .img-panel img {
+    position: relative;
+
+    width: 120%;
+    max-width: 100vw;
+    left: -10%;
 
     border-radius: 2em;
 }
@@ -101,5 +109,10 @@ ul.blog-index li a {
     .page .blog .code-panel {
         padding: 1.0em 5.0em;
     }
-}
 
+    .page .blog .img-panel img {
+        width: 100%;
+        left: 0;
+        border-radius: 0;
+    }
+}