Configurable margin in HTML5UP Multiverse photoalbum

multiverse-configurable-margin.patch

diff --git a/assets/js/main.js b/assets/js/main.js
index 6044dc5..c27e37f 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -215,6 +215,9 @@
 		// Main.
 			var $main = $('#main');
 
+			var popupMargin = $main.attr("data-popup-margin");
+			if (popupMargin == 0) popupMargin = 50;
+
 			// Thumbs.
 				$main.children('.thumb').each(function() {
 
@@ -282,13 +285,13 @@
 					usePopupForceClose: true,
 					usePopupLoader: true,
 					usePopupNav: true,
-					windowMargin: 50
+					windowMargin: popupMargin
 				});
 
 				// Hack: Set margins to 0 when 'xsmall' activates.
 					skel
 						.on('-xsmall', function() {
-							$main[0]._poptrox.windowMargin = 50;
+							$main[0]._poptrox.windowMargin = popupMargin;
 						})
 						.on('+xsmall', function() {
 							$main[0]._poptrox.windowMargin = 0;
@@ -296,4 +299,4 @@
 
 	});
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/index.html b/index.html
index 2e530d6..37639e4 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@
 					</header>
 
 				<!-- Main -->
-					<div id="main">
+					<div id="main" data-popup-margin=50 >
 						<article class="thumb">
 							<a href="images/fulls/01.jpg" class="image"><img src="images/thumbs/01.jpg" alt="" /></a>
 							<h2>Magna feugiat lorem</h2>
@@ -150,4 +150,4 @@
 			<script src="assets/js/main.js"></script>
 
 	</body>
-</html>
\ No newline at end of file
+</html>