From 840dc872df0a88f85fee788a24f2866bd8962236 Mon Sep 17 00:00:00 2001
From: Knight <gitea@ghost.tel>
Date: Sat, 28 Dec 2024 11:14:35 -0500
Subject: [PATCH] Enhance progressive image container styles in
 generateSite.js. Updated CSS to ensure responsive design with aspect ratio,
 added object-fit for images, and improved thumbnail opacity handling. This
 improves the visual presentation and loading behavior of images on the site.

---
 generateSite.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/generateSite.js b/generateSite.js
index aa839bd..b279e81 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -54,7 +54,9 @@ async function generateSite() {
     <style>
         .progressive-image-container {
             position: relative;
-            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            aspect-ratio: 1; /* This will be adjusted based on the actual image */
         }
         .progressive-image {
             position: absolute;
@@ -62,11 +64,13 @@ async function generateSite() {
             left: 0;
             width: 100%;
             height: 100%;
+            object-fit: contain;
             transition: opacity 0.5s ease-in-out;
         }
         .thumbnail {
             filter: blur(10px);
             transform: scale(1.1);
+            opacity: 1;
         }
         .full-image {
             opacity: 0;
@@ -84,6 +88,7 @@ async function generateSite() {
                     class="progressive-image thumbnail" 
                     src="${image.localPath}?quality=10&width=50" 
                     alt="${image.metadata.description || ''}"
+                    onload="this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
                 >
                 <img 
                     class="progressive-image full-image"