From 8fcd25543d8db8bc0406b87865d3914eaf23e453 Mon Sep 17 00:00:00 2001
From: Dakedres <ramondolive@gmail.com>
Date: Thu, 11 Apr 2024 13:52:34 -0600
Subject: [PATCH] Change approach to centering images to avoid a weird element
 overflow issue

---
 assets/style.css | 9 ++++++---
 lib.js           | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 38cd229..247d29a 100755
--- a/assets/style.css
+++ b/assets/style.css
@@ -32,9 +32,12 @@ main li b {
   padding-right: 2ch
 }
 
+figure {
+  position: relative;
+  margin-block: 10px 0;
+}
+
 img {
-  margin: 10px 0 10px 50%;
-  transform: translateX(-50%);
   max-width: 100%;
 }
 
@@ -60,4 +63,4 @@ footer a {
   a { color: #ccf }
   mark { color: #fcc }
   hr { border-color: #555 }
-}
\ No newline at end of file
+}
diff --git a/lib.js b/lib.js
index e57980c..2e27f5e 100644
--- a/lib.js
+++ b/lib.js
@@ -620,7 +620,7 @@ export const renderPostDetail = (name, value) =>
 
 export const renderImage = href => {
 	return `\
-<a href="${href}"><img src="${href}" loading="lazy"></img></a>`
+<a href="${href}"> <figure> <img src="${href}" loading="lazy"></img> </figure> </a>`
 }
 
 export const renderDate = date =>