assets/scss/old.css

@@ -0,0 +1,282 @@
+/*
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
+  SPDX-License-Identifier: MIT
+*/
+
+/** GENERAL FIGURE LAYOUT **/
+
+figure {
+  max-width: 90%;
+  margin: 10px auto;
+  display: block;
+  text-align: center;
+}
+
+/* make box with box-shadow only as large as image */
+.snap-wrapper {
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  display: inline-block;
+}
+
+figure a:hover {
+  text-decoration: none;
+}
+
+figure img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+figure.sm {
+  max-width: 30%;
+}
+
+figure.md {
+  max-width: 50%;
+}
+
+figure.lg {
+  max-width: 70%;
+}
+
+figure.pull-right {
+  padding: 10px 0 10px 10px;
+}
+
+figure.pull-left {
+  padding: 10px 10px 10px 0;
+}
+
+figure figcaption {
+  background-color: rgba(0, 0, 0, 0.5);
+  display: block;
+  font-size: .8em;
+  padding: 1px;
+  position: static;
+  text-align: center;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: #FFF;
+}
+
+/* Extra classes for figures */
+figure.no-border .snap-wrapper {
+  box-shadow: none;
+}
+
+/** GALLERY MARKUP **/
+.snap-gallery {
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* avoid sick effects of inline-block on gallery elements */
+.snap-gallery .snap-wrapper {
+  display: block;
+}
+
+.snap-gallery figure {
+  position: relative;
+  width: 30%;
+  padding-bottom: 30%;
+  margin: 1%;
+  text-align: left;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),0 2px 4px 0 rgba(0,0,0,0.19);
+}
+
+.snap-gallery figcaption {
+  position: absolute;
+}
+
+.snap-gallery img.snap-thumb {
+  position: absolute;
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+
+.snap-gallery figure img.snap-thumb:hover {
+  transform: scale(1.02);
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+@media screen and (max-width: 767px) {
+  .snap-gallery figure {
+    width: 45%;
+    padding-bottom: 45%;
+    margin: 2%
+  }
+}
+@media screen and (max-width: 479px) {
+  .snap-gallery figure {
+    width: 90%;
+    padding-bottom: 90%;
+    margin: 3%;
+  }
+}
+
+/** LIGHTBOX MARKUP **/
+
+.snap-lightbox {
+  /** Default lightbox to hidden */
+  display: none;
+
+  /** Position and style */
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.8);
+}
+
+/* effects when "activating" the figure */
+.snap-lightbox:target {
+  /** Remove default browser outline */
+  outline: none;
+
+  /** Unhide lightbox **/
+  display: block;
+}
+
+/* Click on the complete background closes the lightbox */
+/* Exception: arrow in gallery, they have higher z-index */
+a.snap-lightbox-close {
+  position: fixed;
+  z-index: 800;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+}
+
+/* keep lightbox in middle. TODO: hacky, and not realibly in middle */
+.snap-lightbox::before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 0;
+  /* adjust for white space between pseudo element and next sibling */
+  margin-right: -.25em;
+  /* stretch line height */
+  height: 100%;
+}
+
+/* Container for image */
+.snap-lightbox-inner {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: normal;
+  max-width: 90%;
+  max-height: 80%;
+  height: 100%;
+}
+
+.snap-lightbox-inner p {
+  color: #fff;
+  z-index: 810;
+  position: relative;
+}
+
+/* prev/next arrows & close button */
+
+.snap-lightbox-close-button {
+  position: fixed;
+  z-index: 950;
+  width: 5%;
+  height: calc(5vw); /* ~5% width */
+  right: 0;
+  top: 0;
+}
+
+.snap-lightbox-x::after {
+  content: "\00d7"; /* This will render the 'X' */
+  font-size: 3em;
+  font-style: normal;
+  font-weight: 700;
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.snap-lightbox-close-button:hover .snap-lightbox-x::after {
+  color: #fff;
+  transition: all 0.25s ease;
+}
+
+.snap-lightbox-prev, .snap-lightbox-next  {
+  position: fixed;
+  z-index: 800;
+  width: 5%;
+  height: 100%;
+  text-align: center;
+  top: 0;
+}
+
+.snap-lightbox-prev {
+  left: 0;
+}
+
+.snap-lightbox-next {
+  right: 0;
+}
+
+.snap-lightbox-arrow {
+  display: inline-block;
+  position: fixed;
+  top: 50%;
+  z-index: 900;
+  border: solid #000;
+  border-width: 0 7px 7px 0;
+  display: inline-block;
+  padding: 1%;
+}
+
+span .snap-lightbox-arrow {
+  border-color: #5e5e5e;
+}
+
+.snap-lightbox-prev .snap-lightbox-arrow {
+  left: 2%;
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.snap-lightbox-next .snap-lightbox-arrow {
+  right: 2%;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+a.snap-lightbox-prev:hover > .snap-lightbox-arrow,
+a.snap-lightbox-next:hover > .snap-lightbox-arrow {
+  border-color: #fff;
+  transition: all 0.25s ease;
+}
+
+@media screen and (max-width: 767px) {
+  .snap-lightbox-inner {
+    max-width: 80%;
+  }
+  .snap-lightbox-prev, .snap-lightbox-next {
+    width: 10%;
+  }
+  .snap-lightbox-close-button {
+    width: 10%;
+    height: calc(10vw); /* ~10% width */
+  }
+}

assets/scss/snap-gallery.scss

@@ -1,17 +1,21 @@
-.row > .column {
+.snap-wrapper {
-  padding: 0 8px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 10px;
 }
 
-.row:after {
+/* Create equal columns in flexbox */
-  content: "";
+.snap-image {
-  display: table;
+  // TODO: Make this configurable with variables
-  clear: both;
+  width: calc(100% / 4 - 10px);
-}
+  min-width: 200px;
 
-/* Create four equal columns that floats next to eachother */
+  img {
-.column {
+    aspect-ratio: 16/10;
-  float: left;
+    width: 100%;
-  width: 25%;
+    object-fit: cover;
+  }
 }
 
 /* The Modal (background) */
@@ -19,11 +23,12 @@
   display: none;
   position: fixed;
   z-index: 1;
-  padding-top: 100px;
+  padding-top: 50px;
+  //padding-bottom: 10%;
   left: 0;
   top: 0;
   width: 100%;
-  height: 100%;
+  height: 100%;;
   overflow: auto;
   background-color: black;
 }
@@ -36,6 +41,7 @@
   padding: 0;
   width: 90%;
   max-width: 1200px;
+  height: calc(100% - 100px);
 }
 
 /* The Close Button */
@@ -56,8 +62,15 @@
 }
 
 /* Hide the slides by default */
-.mySlides {
+.snap-slide {
   display: none;
+
+  max-height: 100%;
+
+  img {
+    max-height: 100%;
+  }
+
 }
 
 /* Next & previous buttons */
@@ -76,6 +89,7 @@
   border-radius: 0 3px 3px 0;
   user-select: none;
   -webkit-user-select: none;
+  text-decoration: none !important;
 }
 
 /* Position the "next button" to the right */
@@ -93,6 +107,7 @@
 /* Number text (1/3 etc) */
 .numbertext {
   color: #f2f2f2;
+  background-color: #000;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
@@ -107,12 +122,12 @@
   color: white;
 }
 
-img.demo {
+img.img-thumb {
   opacity: 0.6;
 }
 
 .img-active,
-.demo:hover {
+.img-thumb:hover {
   opacity: 1 !important;
 }
 

layouts/shortcodes/snap-gallery.html

@@ -1,6 +1,6 @@
 {{/*  TODO: Ensure CSS/JS is only loaded once  */}}
-{{- with resources.Get "css/snap-gallery.scss" | toCSS | fingerprint }}
+{{- with resources.Get "scss/snap-gallery.scss" | toCSS }}
-<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
 {{- end }}
 <script src="/js/snap-gallery.js"></script>
 
@@ -22,21 +22,21 @@
 {{ end }}
 
 {{/*  Visible images  */}}
-<div class="row">
+<div class="snap-wrapper">
 {{ range $i, $img := $imgs }}
-  <div class="column">
+  <div class="snap-image">
     <img src="{{ $img }}" onclick="openModal();currentSlide({{ add $i 1 }});" class="hover-shadow">
   </div>
 {{ end }}
 </div>
 
 {{/*  The Modal/Lightbox  */}}
-<div id="myModal" class="modal">
+<div id="snap-modal" class="modal">
   <span class="close cursor" onclick="closeModal()">&times;</span>
   <div class="modal-content">
 
     {{ range $i, $img := $imgs }}
-    <div class="mySlides">
+    <div class="snap-slide">
       <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
       <img src="{{ $img }}" style="width:100%">
     </div>
@@ -52,10 +52,10 @@
     </div>
 
     <!-- Thumbnail image controls -->
-    {{ range $i, $img := $imgs }}
+    {{/*  {{ range $i, $img := $imgs }}
-    <div class="column">
+    <div class="snap-image">
-      <img class="demo" src="{{ $img }}" onclick="currentSlide({{ add $i 1 }})" alt="Nature">
+      <img class="img-thumb" src="{{ $img }}" onclick="currentSlide({{ add $i 1 }})" alt="Nature">
     </div>
-    {{ end }}
+    {{ end }}  */}}
   </div>
 </div>

static/js/snap-gallery.js

@@ -1,11 +1,11 @@
 // Open the Modal
 function openModal() {
-  document.getElementById("myModal").style.display = "block";
+  document.getElementById("snap-modal").style.display = "block";
 }
 
 // Close the Modal
 function closeModal() {
-  document.getElementById("myModal").style.display = "none";
+  document.getElementById("snap-modal").style.display = "none";
 }
 
 var slideIndex = 1;
@@ -23,8 +23,8 @@ function currentSlide(n) {
 
 function showSlides(n) {
   var i;
-  var slides = document.getElementsByClassName("mySlides");
+  var slides = document.getElementsByClassName("snap-slide");
-  var dots = document.getElementsByClassName("demo");
+  var dots = document.getElementsByClassName("img-thumb");
   var captionText = document.getElementById("caption");
   if (n > slides.length) { slideIndex = 1 }
   if (n < 1) { slideIndex = slides.length }
@@ -34,7 +34,7 @@ function showSlides(n) {
   for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" img-active", "");
   }
-  slides[slideIndex - 1].style.display = "block";
+  slides[slideIndex - 1].style.display = "inline-block";
   dots[slideIndex - 1].className += " img-active";
   captionText.innerHTML = dots[slideIndex - 1].alt;
 }