diff --git a/assets/css/style.scss b/assets/css/style.scss index dc45730..f933bf6 100644 --- a/assets/css/style.scss +++ b/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 { diff --git a/assets/js/load-photoswipe.js b/assets/js/load-photoswipe.js index fac0af9..5af0689 100644 --- a/assets/js/load-photoswipe.js +++ b/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); diff --git a/layouts/shortcodes/pswp-figure.html b/layouts/shortcodes/pswp-figure.html index ddd8416..d51cb88 100644 --- a/layouts/shortcodes/pswp-figure.html +++ b/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" }}