Restructuring file layout

assets/scss/mgallery.scss

@@ -0,0 +1,73 @@
+// Gallery CSS
+
+// Define the masonry container
+.masonry-container {
+  display: flex;
+  flex-flow: wrap;  
+  flex-direction: row;
+  width: 100%;
+  padding-right: 8px;
+  padding-left: 8px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// Define the masonry classes for the columns 2..5
+$masonry-columns: (
+  "2": 2,
+  "3": 3,
+  "4": 4,
+  "5": 5
+) !default;
+
+@each $key, $cols in $masonry-columns {
+  .masonry-#{$key} {
+    -ms-column-count: #{$cols}; 
+    -webkit-column-count: #{$cols}; /* Chrome, Safari, Opera */
+    -moz-column-count: #{$cols}; /* Firefox */
+    column-count: #{$cols};
+  }
+}
+
+// Define the class for the different gap sizes
+$masonry-gaps: (
+  "0"  : 0,
+  "xs" : 0.1rem,
+  "s"  : 0.25rem,
+  "m"  : 0.5rem,
+  "l"  : 1rem,
+  "xl" : 1.5rem,
+  "xxl": 2rem
+) !default;
+
+// The masonry column gap
+@each $key, $gap in $masonry-gaps {
+  .masonry-gap-#{$key} {
+    -ms-column-gap: #{$gap};
+    -moz-column-gap: #{$gap};
+    -webkit-column-gap: #{$gap}; 
+    column-gap: #{$gap};  
+  }
+}
+
+// Override for grid column gap
+@each $key, $gutter in $masonry-gaps {
+  .grid-gap-#{$key} {
+    --bs-gutter-x: #{$gutter};
+  }
+}
+
+// The row padding for both grid and masonry
+@each $key, $gap in $masonry-gaps {
+  .gallery-pad-#{$key} {
+    padding-bottom: #{$gap};
+  }
+}
+
+// Define the image class in a masonry
+.masonry-1 img, .masonry-2 img, .masonry-3 img, .masonry-4 img, .masonry-5 img { 
+  flex-direction: column;
+  position: relative;
+  width: 100%; 
+}
+

config.toml

@@ -4,22 +4,14 @@
     min = "0.110.0"
     max = ""
   [[module.mounts]]
-    source = "dist/js/lightbox-plus-jquery.js"
-    target = "assets/js/modules/lightbox/lightbox-plus-jquery.js"
+    source = "dist/js"
+    target = "assets/js/modules/mgallery"
   [[module.mounts]]
     source = "dist/css"
-    target = "assets/scss"
-    includeFiles = "lightbox.scss"
+    target = "assets/scss/modules/mgallery"
   [[module.mounts]]
     source = "dist/images"
-    target = "assets/images"    
-  [[module.mounts]]
-    source = "dist/css"
-    target = "assets/scss"
-    includeFiles = "mgallery.scss"
-  [[module.mounts]]
-    source = "dist/shortcodes/mgallery.html"
-    target = "layouts/shortcodes/mgallery.html"    
+    target = "static/images"    
   [[module.mounts]]
     source = 'layouts'
     target = 'layouts'

exampleSite/hugo.toml

@@ -15,18 +15,15 @@ title = 'Test site for mod-mgallery'
     target = "static"
   [[module.imports]]
     path = "github.com/myrthos/mod-mgallery"
+    [[module.imports.mounts]]
+      source = "dist/css/lightbox.scss"
+      target = "static/css/lightbox.css"
+    [[module.imports.mounts]]
+      source = "dist/images"
+      target = "static/images"
+    [[module.imports.mounts]]
+      source = "dist/js/lightbox-plus-jquery.js"
+      target = "static/js/lightbox-plus-jquery.js"
   [[module.imports.mounts]]
-    source = "dist/css/lightbox.scss"
-    target = "static/css/lightbox.css"
-  [[module.imports.mounts]]
-    source = "dist/images"
-    target = "static/images"
-  [[module.imports.mounts]]
-    source = "dist/js/lightbox-plus-jquery.js"
-    target = "static/js/lightbox-plus-jquery.js"
-[[module.imports.mounts]]
-    source = "dist/css/mgallery.scss"
-    target = "static/css/mgallery.css"
-[[module.imports.mounts]]
-    source = "dist/shortcodes/mgallery.html"
-    target = "layouts/shortcodes/mgallery.html"
+      source = "layouts/shortcodes/mgallery.html"
+      target = "layouts/shortcodes/mgallery.html"

exampleSite/layouts/_default/baseof.html

@@ -4,12 +4,12 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
   <title>{{ with .Title }}{{ printf "%s | " . }}{{ end }}{{ site.Title }}</title>
-  <link rel=stylesheet href="style.css">
+  <link rel=stylesheet href="/style.css">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>  
   <link rel=stylesheet href="/css/lightbox.css">
-  <link rel=stylesheet href="mimage.css">
-  <link rel=stylesheet href="/css/mgallery.css">
+  <link rel=stylesheet href="/mimage.css">
+  <link rel=stylesheet href="/mgallery.css">
 </head>
 <body>
 {{ block "main" . }}