From 87604711e530fbe5a2ad22e202e89ee6d55f9ba3 Mon Sep 17 00:00:00 2001
From: Knight <gitea@ghost.tel>
Date: Sat, 28 Dec 2024 11:57:39 -0500
Subject: [PATCH] Refactor CSS for progressive image handling in
 generateSite.js. Updated styles to utilize grid layout for image containers,
 ensuring better responsiveness and layering during loading. Removed fixed
 aspect ratio padding and adjusted image properties for improved visual
 presentation and loading transitions.

---
 generateSite.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/generateSite.js b/generateSite.js
index e4812bd..7a07907 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -53,20 +53,16 @@ async function generateSite() {
     <link rel="icon" type="image/png" href="/favicon.png">
     <style>
         .progressive-image-container {
-            position: relative;
             width: 100%;
             max-width: 100vw;
-            padding-bottom: 100%; /* Creates a 1:1 aspect ratio container */
             margin: 0 auto;
+            display: grid;  /* Use grid for overlay */
         }
         .progressive-image {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
-            height: 100%;
-            object-fit: contain;
+            height: auto;
             max-width: 100%;
+            grid-area: 1 / 1;  /* Stack images in same grid cell */
             transition: opacity 0.5s ease-in-out;
         }
         .thumbnail {
@@ -90,7 +86,6 @@ async function generateSite() {
                     class="progressive-image thumbnail" 
                     src="${image.localPath}?quality=10&width=100" 
                     alt="${image.metadata.description || ''}"
-                    onload="this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
                 >
                 <img 
                     class="progressive-image full-image"