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>

1 files changed, 75 insertions, 7 deletions

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}
+}