From bc1ed41599c64e3767edaf8b8dcedfa3036d1350 Mon Sep 17 00:00:00 2001
From: Michele Calgaro <michele.calgaro@yahoo.it>
Date: Sat, 22 Apr 2023 15:14:56 +0900
Subject:  Revamp screenshot page and add horizontal file before the page
 footer.  Code inspired by
 https://www.w3schools.com/howto/howto_js_slideshow.asp

Signed-off-by: Michele Calgaro <michele.calgaro@yahoo.it>
---
 screenshots.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 75 insertions(+), 7 deletions(-)

(limited to 'screenshots.css')

diff --git a/screenshots.css b/screenshots.css
index 52c8ed5..a9e90be 100644
--- a/screenshots.css
+++ b/screenshots.css
@@ -1,7 +1,75 @@
-    .sc_img_holder  {float: left;
-                    margin: 5px 5px 5px 0px;
-                    padding: 5px 5px 5px 0px;}
-    .sc_img         {clear: both;
-                    margin-bottom: 5px;}
-    .sc_txt         {display: inline;
-                    text-align: center;}
\ No newline at end of file
+/* Rounded screenshot images */
+img
+{
+  border-radius: 8px;
+}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 90%;
+  position: relative;
+  margin: auto;
+}
+
+/* Hide the images by default */
+.mySlides {
+  border-radius: 8px;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 10px 10px 0;
+  user-select: none;
+  background-color: rgba(0,0,0,0.0);
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 10px 0 0 10px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  color: white;
+  background-color: rgba(0,0,0,0.25);
+  text-decoration: none;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+	background-color: #AAC4E3;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+
+.active, .dot:hover {
+	background-color: #01306F;
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+  border-radius: 20px;
+}
+
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}
-- 
cgit v1.2.3