assets/scss/snap-gallery.scss

@@ -2,11 +2,15 @@ $gap: var(--gap);
 
 .snap-gallery,
 .snap-slideshow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
   margin-bottom: $gap;
 
   /* Create equal columns in flexbox */
   .snap-image {
-    cursor: pointer;
+    cursor: zoom-in;
 
     /* Column amount and width are configurable by style variables */
     width: calc(100% / var(--columns) - #{$gap});
@@ -21,9 +25,7 @@ $gap: var(--gap);
 }
 
 .snap-gallery {
-  display: flex;
   flex-wrap: wrap;
-  justify-content: center;
   gap: $gap;
 }
 
@@ -96,11 +98,17 @@ $gap: var(--gap);
     z-index: 810;
     position: relative;
   }
+
+  @media screen and (max-width: 767px) {
+    max-width: 80%;
+  }
 }
 
 /* Number text (1/3 etc) */
 .snap-lightbox,
 .snap-slideshow {
+  user-select: none;
+
   .numbertext {
     color: #f2f2f2;
     background-color: #000;
@@ -119,50 +127,68 @@ $gap: var(--gap);
 // }
 
 /* prev/next arrows & close button */
-.snap-lightbox-prev,
+.snap-prev,
-.snap-lightbox-next {
+.snap-next {
-  position: fixed;
+  color: #fff;
+  text-decoration: none !important;
+  font-size: 30px;
+
+  position: absolute;
+  height: 100%;
   z-index: 800;
   width: 5%;
-  height: 100%;
-  text-align: center;
-  top: 0;
   cursor: pointer;
 
-  .snap-lightbox-arrow {
+  // Slideshow specifics
-    display: inline-block;
+  .snap-slideshow & {
-    position: fixed;
+    display: flex;
-    top: 50%;
+    justify-content: center;
-    z-index: 900;
+    align-items: center;
-    border: solid #fff;
-    border-width: 0 7px 7px 0;
-    display: inline-block;
-    padding: 1%;
-  }
 
-  &:hover>.snap-lightbox-arrow {
+    background-color: rgba(0, 0, 0, 0.7);
-    border-color: #999;
+
+    height: 15%;
+    width: 10%;
+    min-height: 50px;
+    min-width: 50px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
       transition: all 0.25s ease;
     }
-}
+  }
 
-.snap-lightbox-prev {
+  // Lightbox-specifics
-  left: 0;
+  .snap-lightbox & {
+    @media screen and (max-width: 767px) {
+      width: 10%;
+    }
+  }
 
-  .snap-lightbox-arrow {
+  // Item containing arrow
-    left: 2%;
+  span {
-    transform: rotate(135deg);
+    padding: 1%;
-    -webkit-transform: rotate(135deg);
+
+    // Lightbox specifics
+    .snap-lightbox & {
+      position: fixed;
+      top: 50%;
+    }
   }
 }
 
-.snap-lightbox-next {
+// Position arrows for left/right
-  right: 0;
+.snap-prev {
+  left: 0;
+  .snap-lightbox & span {
+    left: 0.5%;
+  }
+}
 
-  .snap-lightbox-arrow {
+.snap-next {
-    right: 2%;
+  right: 0;
-    transform: rotate(-45deg);
+  .snap-lightbox & span {
-    -webkit-transform: rotate(-45deg);
+    right: 0.5%;
   }
 }
 
@@ -188,20 +214,3 @@ $gap: var(--gap);
     cursor: pointer;
   }
 }
-
-@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 */
-  }
-}

layouts/partials/lightbox.html

@@ -11,8 +11,8 @@
   <!-- Close and Next/previous controls -->
   <span class="snap-close" onclick="closeLightbox({{ $galno }})">&times;</span>
 
-  <a class="snap-lightbox-prev" onclick="moveLightboxItem({{ $galno }}, -1)"><i class="snap-lightbox-arrow"></i></a>
+  <a class="snap-prev" onclick="moveLightboxItem({{ $galno }}, -1)"><span>&#10094;</span></a>
-  <a class="snap-lightbox-next" onclick="moveLightboxItem({{ $galno }}, 1)"><i class="snap-lightbox-arrow"></i></a>
+  <a class="snap-next" onclick="moveLightboxItem({{ $galno }}, 1)"><span>&#10095;</span></a>
 
   {{/*  <!-- Caption text -->
   <div class="caption-container">

layouts/partials/slideshow.html

@@ -7,7 +7,7 @@
     <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
   </div>
   {{ end }}
-</div>
 
-<a onclick="moveSlideshowItem({{ $galno }}, -1)">prev</a>
+  <a class="snap-prev" onclick="moveSlideshowItem({{ $galno }}, -1)"><span>&#10094;</span></a>
-<a onclick="moveSlideshowItem({{ $galno }}, 1)">next</a>
+  <a class="snap-next" onclick="moveSlideshowItem({{ $galno }}, 1)"><span>&#10095;</span></a>
+</div>