From ff9d7f31f8b23f867b9ec050add80874744e042a Mon Sep 17 00:00:00 2001
From: Knight <gitea@ghost.tel>
Date: Sat, 28 Dec 2024 12:06:34 -0500
Subject: [PATCH] Refactor CSS in generateSite.js to improve image container
 responsiveness. Updated styles to use 'fit-content' for width, adjusted image
 dimensions to auto for better aspect ratio handling, and implemented a
 single-column grid layout. These changes enhance visual presentation and user
 experience by ensuring images are displayed appropriately within their
 containers.

---
 generateSite.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/generateSite.js b/generateSite.js
index 1e6d03b..bda6ab6 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -53,21 +53,23 @@ async function generateSite() {
     <link rel="icon" type="image/png" href="/favicon.png">
     <style>
         .progressive-image-container {
-            width: 100%;
+            width: fit-content; /* Only as wide as the content */
             max-width: 100vw;
             max-height: 100vh;
             margin: 0 auto;
-            display: grid;  /* Use grid for overlay */
-            position: relative; /* Add this to contain the description */
+            display: grid;
+            position: relative;
+            grid-template-columns: 1fr; /* Single column grid */
+            grid-template-rows: 1fr;    /* Single row grid */
         }
         .progressive-image {
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
+            width: auto;        /* Let image determine width */
+            height: auto;       /* Let image determine height */
+            max-width: 100vw;
             max-height: 100vh;
-            grid-area: 1 / 1;  /* Stack images in same grid cell */
+            grid-area: 1 / 1;
             transition: opacity 0.5s ease-in-out;
-            object-fit: contain; /* Maintain aspect ratio within bounds */
+            object-fit: contain;
         }
         .thumbnail {
             filter: blur(10px);