Refactor CSS for progressive image handling in generateSite.js and styles.css. Moved progressive image styles from generateSite.js to styles.css for better organization, ensuring improved responsiveness and visual presentation. Updated mix-blend-mode for navigation and image elements to enhance aesthetics and user engagement. These changes streamline the layout and enhance the overall user experience.

public/styles.css

@@ -51,6 +51,9 @@ img {
     letter-spacing: 0.5px;
     line-height: 1.4;
     opacity: 0.7;
+    z-index: 2;
+    color: #cccccc;
+    mix-blend-mode: color-dodge;
 }
 
 .navigation {
@@ -61,13 +64,12 @@ img {
     justify-content: space-between;
     padding: 0 5px;
     pointer-events: none;
-    mix-blend-mode: color-burn;
 }
 
 .navigation a {
     text-decoration: none;
     color: white;
-    mix-blend-mode: difference;
+    mix-blend-mode: color-dodge;
     font-size: 24px;
     pointer-events: auto;
     opacity: 0.7;
@@ -77,4 +79,37 @@ img {
 
 .navigation a:hover {
     opacity: 1;
+}
+
+.progressive-image-container {
+    width: auto;
+    max-width: 100vw;
+    max-height: 100vh;
+    margin: 0 auto;
+    display: grid;
+    position: relative;
+}
+
+.progressive-image {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100vh;
+    grid-area: 1 / 1;
+    transition: opacity 0.5s ease-in-out;
+    object-fit: contain;
+}
+
+.thumbnail {
+    filter: blur(10px);
+    transform: scale(.95);
+    opacity: 1;
+}
+
+.full-image {
+    opacity: 0;
+}
+
+.full-image.loaded {
+    opacity: 1;
 }