From 027628794ae5d0431a540e05d7d740b37d875dc5 Mon Sep 17 00:00:00 2001
From: Knight <gitea@ghost.tel>
Date: Sat, 28 Dec 2024 12:08:03 -0500
Subject: [PATCH] Refactor CSS in generateSite.js for improved responsiveness
 and layout. Updated styles to set the image container width to 100%, adjusted
 image dimensions for better scaling, and repositioned the description overlay
 for enhanced visual alignment. These changes enhance the overall user
 experience by ensuring images are displayed more effectively within their
 containers.

---
 generateSite.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/generateSite.js b/generateSite.js
index bda6ab6..2f5fb98 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -53,19 +53,17 @@ async function generateSite() {
     <link rel="icon" type="image/png" href="/favicon.png">
     <style>
         .progressive-image-container {
-            width: fit-content; /* Only as wide as the content */
+            width: 100%;
             max-width: 100vw;
             max-height: 100vh;
             margin: 0 auto;
             display: grid;
             position: relative;
-            grid-template-columns: 1fr; /* Single column grid */
-            grid-template-rows: 1fr;    /* Single row grid */
         }
         .progressive-image {
-            width: auto;        /* Let image determine width */
-            height: auto;       /* Let image determine height */
-            max-width: 100vw;
+            width: 100%;
+            height: 100%;
+            max-width: 100%;
             max-height: 100vh;
             grid-area: 1 / 1;
             transition: opacity 0.5s ease-in-out;
@@ -85,13 +83,16 @@ async function generateSite() {
         .description {
             position: absolute;
             bottom: 20px;
-            left: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            margin-left: -40%; /* This will offset it to the left */
             max-width: 80%;
             z-index: 2;
             color: #cccccc;
             opacity: 0.8;
             mix-blend-mode: hard-light;
-            margin: 0;
+            margin-top: 0;
+            margin-bottom: 0;
             font-size: 16px;
             letter-spacing: 0.5px;
             line-height: 1.4;