css: add <p>-like margin around content own-line images

2 files changed, 7 insertions, 0 deletions

diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index ffc51922..eed00882 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -353,6 +353,7 @@ export default {
               data:
                 image.slots({
                   src,
+                  class: 'content-image',
                   link: link ?? true,
                   width: width ?? null,
                   height: height ?? null,
diff --git a/src/static/site4.css b/src/static/site4.css
index b92d088c..c9843bce 100644
--- a/src/static/site4.css
+++ b/src/static/site4.css
@@ -539,6 +539,12 @@ p .current {
   display: none;
 }
 
+a.box.content-image {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
 a.box:focus {
   outline: 3px double var(--primary-color);
 }