Enhance image description styling in generateSite.js and styles.css. Added a new outline style for descriptions to improve visibility and aesthetics. Updated CSS to include a transparent text outline with a blend mode for better visual integration. These changes contribute to a more engaging user experience by enhancing the presentation of image descriptions.

generateSite.js

@@ -67,7 +67,10 @@ async function generateSite() {
                     alt="${image.metadata.description || ''}"
                     onload="this.classList.add('loaded')"
                 >
-                ${image.description ? `<p class="description">${image.description}</p>` : ''}
+                ${image.description ? `
+                    <p class="description-outline">${image.description}</p>
+                    <p class="description">${image.description}</p>
+                ` : ''}
             </div>
         ` : '<p>Image not available</p>'}
         <div class="navigation">

public/styles.css

@@ -44,17 +44,33 @@ img {
     left: 1em;
     max-width: 80%;
     text-align: left;
-    mix-blend-mode: hard-light;
-    color: white;
     margin: 0;
     font-size: 16px;
     letter-spacing: 0.5px;
     line-height: 1.4;
-    opacity: 0.7;
     z-index: 2;
+}
+
+.description-outline {
+    position: absolute;
+    bottom: 1em;
+    left: 1em;
+    max-width: 80%;
+    text-align: left;
+    margin: 0;
+    font-size: 16px;
+    letter-spacing: 0.5px;
+    line-height: 1.4;
+    z-index: 1;
+    color: transparent;
+    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
+    mix-blend-mode: color-burn;
+}
+
+.description {
     color: #cccccc;
     mix-blend-mode: color-dodge;
-    text-shadow: 1px 0px #ff77009e;
+    opacity: 0.9;
 }
 
 .navigation {