improved slideshow

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>

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>`;
 }
 

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 {