From 0b893be9a4ab41305df84cbb8cabab836f562bff Mon Sep 17 00:00:00 2001
From: Robin Davies <rerdavies@gmail.com>
Date: Mon, 14 Mar 2022 16:00:46 -0400
Subject: [PATCH] Gallery edit.

---
 docs/_includes/gallery.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/_includes/gallery.html b/docs/_includes/gallery.html
index 475e3e3..691c320 100644
--- a/docs/_includes/gallery.html
+++ b/docs/_includes/gallery.html
@@ -10,7 +10,7 @@
             "hotspot.png"
         ];
         let captions = [
-            "\u00A0",
+            "PiPedal Guitar Effects Pedal running on a Raspberry Pi 4",
             "PiPedal web interface.",
             "Flexible effect routing.",
             "Bind controls to midi messages.",
@@ -22,6 +22,7 @@
         let aspectY = 648;
         let borderWidth = 0;
 
+        let galleryIndent = "";
         let width ;
         let height;
         let frameWidth ;
@@ -81,7 +82,7 @@
                     galleryAnimationStep = undefined;
 
                     let captionElement = document.getElementById("gallery_caption");
-                    captionElement.innerText = captions[galleryFrame];
+                    captionElement.innerText = galleryIndent +captions[galleryFrame];
                 }
             }
             galleryLastAnimationCallback = window.requestAnimationFrame(galleryAnimationStep);
@@ -198,7 +199,7 @@
             document.writeln("<div id='galleryArrows' style='position: absolute; width: "
                 + frameWidth + "px; height: " + frameHeight
                 + "px; left: 0px; top: 0px; opacity: 0.0;"
-                + " display: flex; flex-flow: row none; justify-content: space-between;align-items: end; padding:20'>");
+                + " display: flex; flex-flow: row none; justify-content: space-between;align-items: end; padding:20; opacity: 0.8;'>");
             {
                 document.writeln("<div><span style='font-size: 52px;color: #444;'>◄</span></div>");
                 document.writeln("<div><span style='font-size: 52px;color: #444;'>►</span></div>");
@@ -207,9 +208,9 @@
             document.writeln("</div>");
         }
         document.writeln("</div>");
-        document.writeln("<div id='gallery_caption_frame' style='margin-left: 20px; width: " + frameWidth + "px; display: flex; flex-flow: row nowrap; justify-content: center; background: #666;'>");
-        document.writeln("<div> <span id='gallery_caption' style='font-size: 0.9em; font-style: italic; color: #FFF;'> "                    
-            + captions[0] + "</span></div></div>");
+        document.writeln("<div id='gallery_caption_frame' style='margin-left: 20px; width: " + frameWidth + "px; display: flex; flex-flow: row nowrap; margin-top: 8px; padding-left: 60px'>");
+        document.writeln("<div> <span id='gallery_caption' style='font-size: 0.9em; font-style: italic; color: #888;'> "                    
+            + galleryIndent +captions[0] + "</span></div></div>");
 
 
         let galleryOnLoaded = () => {