From 497d719d7aa285701ef715a6b74772a12f124a03 Mon Sep 17 00:00:00 2001
From: Knight <gitea@ghost.tel>
Date: Sat, 28 Dec 2024 23:56:34 -0500
Subject: [PATCH] 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   |  5 ++++-
 public/styles.css | 24 ++++++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/generateSite.js b/generateSite.js
index 6b419d4..f4580e3 100644
--- a/generateSite.js
+++ b/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">
diff --git a/public/styles.css b/public/styles.css
index 8cf3068..44604aa 100644
--- a/public/styles.css
+++ b/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 {