From 3db2b7734f7f4324928d06a32fd1deab26dad2a3 Mon Sep 17 00:00:00 2001
From: Anton Lydike <me@antonlydike.de>
Date: Wed, 29 Apr 2020 16:00:40 +0200
Subject: [PATCH] improved slideshow

---
 index.html    |  5 +++--
 src/main.js   |  1 +
 src/style.css | 18 +++++++++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 8ddd0dc..a24b5a6 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
         <p>This is where the <i>power</i> comes in (mentioned in the image descriptions). We can look at Mandelbulbs with powers that are not 2.</p>
 
         <h1>Can you animate the Mandelbulb?</h1>
-        <p>Yes, of couse. It only takes a huge amount of time. This one rendered in about an hour:</p>
+        <p>Yes, of course! It only takes a huge amount of time. This one rendered in about an hour:</p>
 
         <video src="https://datenvorr.at/renders/mbulb.mp4" controls="show"></video>
 
@@ -59,6 +59,7 @@
    <footer>
        <div class="footer-inner">
         <div class="footer-links">
+            <b>Source code:</b>
             <ul>
                 <li><a href="https://git.datenvorr.at/anton/fractals2d.h" target="_blank">2D Mandelbrot rendering</a></li>
                 <li><a href="https://git.datenvorr.at/anton/raymarcher.c" target="_blank">3D Fractal rendering</a></li>
@@ -67,7 +68,7 @@
         </div>
         <div class="footer-other">
             &copy; Copyright by Anton Lydike <br>
-            All images are public domain
+            All fractal images and videos are public domain
         </div>
         </div>
    </footer>
diff --git a/src/main.js b/src/main.js
index d14c56f..00d05b3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,6 +22,7 @@ function init_slideshow(images) {
 function slide_template(slide_data) {
     return `<div class="slide-item" style="background-image: url('${slide_data.url}')">
         <p class="slide-info">${slide_data.text}</p>
+        <a href="${slide_data.source || slide_data.url}" target="_blank" rel="noopener">View image</a>
     </div>`;
 }
 
diff --git a/src/style.css b/src/style.css
index 31bb02c..d14577e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -56,11 +56,27 @@ footer {
     background-repeat: no-repeat;
     background-color: #000;
     height: 500px;
+    color: #fff;
+    position: relative;
 }
 .slide-info {
+    padding: 8px 0;
+    margin: 0;
     background: rgba(0,0,0,0.3);
-    color: #fff;
     text-align: center;
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+}
+
+.slide-item a {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    margin: 0;
+    padding: 0;
+    line-height: 1;
 }
 
 :fullscreen .siema-slider {