fixed dependencies and css, update gallery code

layouts/partials/vendor.html

@@ -45,4 +45,11 @@
 {{ if .Page.HasShortcode "typeit" }}
 {{ $typeitLib := resources.Get "lib/typeit/typeit.umd.js" }}
 <script defer src="{{ $typeitLib.RelPermalink }}" integrity="{{ $typeitLib.Data.Integrity }}"></script>
+{{ end }}
+
+
+{{/* Packery */}}
+{{ if .Page.HasShortcode "gallery" }}
+{{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
+<script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
 {{ end }}

layouts/shortcodes/gallery.html

@@ -1,36 +1,18 @@
-<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
+{{ $time := now.UnixNano }}
+{{ $id := delimit (slice "gallery" $time) "-" }}
 
-<div class="grid">
+<div id="{{ $id }}">
   {{ .Inner }}
 </div>
 
-<style>
-.grid-w10 { width: 10%;}
-.grid-w15 { width: 15%;}
-.grid-w20 { width: 20%;}
-.grid-w25 { width: 25%;}
-.grid-w30 { width: 30%;}
-.grid-w35 { width: 35%;}
-.grid-w40 { width: 40%;}
-.grid-w45 { width: 45%;}
-.grid-w50 { width: 50%;}
-.grid-w55 { width: 55%;}
-.grid-w60 { width: 60%;}
-.grid-w65 { width: 65%;}
-.grid-w70 { width: 70%;}
-.grid-w75 { width: 75%;}
-.grid-w80 { width: 80%;}
-.grid-w85 { width: 85%;}
-.grid-w90 { width: 90%;}
-.grid-w95 { width: 95%;}
-.grid-w100 { width: 100%;}
-</style>
-
 <script>
-var elem = document.querySelector('.grid');
-var pckry = new Packery( elem, {
-  // options
-  itemSelector: '.grid-item',
-  gutter: 10
-});
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var elem = document.querySelector('#{{ $id }}');
+    var pckry = new Packery(elem, {
+      percentPosition: true,
+      gutter: 5,
+      resize: true
+    });
+  });
 </script>