From 2611988636660bb9079d721c1bd2dd2d70a1cd21 Mon Sep 17 00:00:00 2001
From: Knight <gitea@ghost.tel>
Date: Sat, 28 Dec 2024 11:52:12 -0500
Subject: [PATCH] Refactor CSS and image processing in generateSite.js to
 enhance responsiveness and loading behavior. Updated styles for progressive
 image containers and thumbnails, ensuring proper aspect ratio and centering.
 Added image rotation during processing to maintain orientation. This improves
 visual presentation and user experience across the site.

---
 generateSite.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/generateSite.js b/generateSite.js
index 18f3528..1c03de2 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -55,8 +55,9 @@ async function generateSite() {
         .progressive-image-container {
             position: relative;
             width: 100%;
-            height: 100%;
-            aspect-ratio: 1;
+            max-width: 100vw;
+            height: auto;
+            margin: 0 auto;
         }
         .progressive-image {
             position: absolute;
@@ -65,6 +66,7 @@ async function generateSite() {
             width: 100%;
             height: 100%;
             object-fit: contain;
+            max-width: 100%;
             transition: opacity 0.5s ease-in-out;
         }
         .thumbnail {
@@ -163,11 +165,13 @@ async function serveStaticSite(port = 3000) {
                             width: originalMetadata.width,
                             height: originalMetadata.height,
                             size: originalMetadata.size,
-                            format: originalMetadata.format
+                            format: originalMetadata.format,
+                            orientation: originalMetadata.orientation
                         });
 
                         // Process the image
                         const processedImage = await Sharp(filePath)
+                            .rotate()
                             .resize({
                                 width: parseInt(width),
                                 height: parseInt(width),