Gallery improvements

assets/css/style.scss

@@ -871,11 +871,28 @@ textarea {
 
 /* Gallery */
 .gallery {
+	position: relative;
+	left: -5px;
+	top: -5px;
+	width: calc(100% + 10px);
     .box {
+		margin: 5px;
         float: left;
         position: relative;
-        width: 50%;
-        padding-bottom: 50%;
+        width: calc(100% - 10px);
+        padding-bottom: 100%;
+		@media screen and (min-width: 500px) {
+			width: calc(50% - 10px);
+			padding-bottom: 50%;
+		}
+		@media screen and (min-width: 750px) {
+			width: calc(33.3% - 10px);
+			padding-bottom: 33.3%;
+		}
+		@media screen and (min-width: 1000px) {
+			width: calc(25% - 10px);
+			padding-bottom: 25%;
+		}
     }
     .img {
         position: absolute;
@@ -898,10 +915,12 @@ textarea {
         background: rgba(0, 0, 0, 0.5);
         color: #FFF;
         text-align: center;
-        opacity: 1;
+		opacity: 1;
+		padding: 5px;
         cursor: pointer;
         p {
-            margin: auto;
+			margin: auto;
+			font-size: .75rem;
         }
     }
     figure {

assets/js/load-photoswipe.js

@@ -24,7 +24,8 @@ document.addEventListener('DOMContentLoaded', function () {
             var options = {
                 index: index,
                 bgOpacity: 0.8,
-                showHideOpacity: true
+                showHideOpacity: true,
+                shareEl: false
             };
             new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
         }, false);

layouts/shortcodes/pswp-figure.html

@@ -1,5 +1,5 @@
 {{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
-{{ $thumb := $src.Fill "600x600" }}
+{{ $thumb := $src.Fill "500x500" }}
 <div class="box">
   <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb.RelPermalink }}');"{{ end }}>