Add image gallery

client/gallery.css

@@ -0,0 +1,70 @@
+/* Reset CSS */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+html,
+body {
+	background: linear-gradient(45deg, #190f2c, #200b30);
+	padding: 15px;
+}
+img {
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	display: inline-block;
+}
+
+/* Main CSS */
+.gallery > div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.gallery > div > img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: 5px;
+}
+.gallery {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	grid-auto-rows: 250px;
+	grid-auto-flow: dense;
+}
+.gallery .wide {
+	grid-column: span 2;
+}
+.gallery .very-wide {
+  grid-column: span 3;
+}
+.gallery .tall {
+	grid-row: span 2;
+}
+.gallery .big {
+	grid-column: span 2;
+	grid-row: span 2;
+}
+
+#fullpage {
+  display: block;
+  position: absolute;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-repeat: no-repeat no-repeat;
+  background-position: center center;
+}
+
+.scale {
+  background-size: contain;
+}
+
+.hidden {
+	display: none !important;
+}

client/gallery.js

@@ -0,0 +1,69 @@
+
+    // drawing inspiration from:
+    //    Saief Al Emon - masonry layout - https://codepen.io/iamsaief/details/jObaoKo
+    //    A Haworth - full screen view - https://stackoverflow.com/a/67816263
+
+
+window.addEventListener('load', () => {
+  const gallery = document.querySelector('#gallery')
+  const fullPage = document.querySelector('#fullpage')
+  let scrollBackTo = null
+  document.querySelectorAll('img').forEach((img) => {
+    const ratio = img.naturalWidth / img.naturalHeight
+    let divClass = null
+    if (img.naturalWidth <= 200 || img.naturalHeight <= 200) {
+      divClass = 'small'
+    } else if (ratio >= 2 && ratio < 3 ) {
+      divClass = 'wide'
+    } else if (ratio >= 3) {
+      divClass = 'very-wide'
+    } else if (ratio <= 0.75) {
+      divClass = 'tall'
+    } else if (img.naturalWidth >= 1024 && img.naturalHeight >= 1024) {
+      divClass = 'big'
+    }
+    if (divClass) {
+      img.closest('div').classList.add(divClass)
+    }
+
+    img.addEventListener('click', () => {
+
+      const controller = new AbortController()
+      var delay = 250
+      var throttled = false
+      scrollBackTo = img
+
+      fullPage.classList.remove('hidden')
+      gallery.classList.add('hidden')
+
+      fullPage.style.backgroundImage = 'url(' + img.src + ')'
+      if (img.naturalHeight >= window.innerHeight || img.naturalWidth >= window.innerWidth) {
+        fullPage.classList.add('scale')
+      } else {
+        fullPage.classList.remove('scale')
+      }
+
+      window.addEventListener('resize', () => {
+        if (!throttled) {
+          if (img.naturalHeight >= window.innerHeight || img.naturalWidth >= window.innerWidth) {
+            fullPage.classList.add('scale')
+          } else {
+            fullPage.classList.remove('scale')
+          }
+          throttled = true
+          setTimeout(() => {
+            throttled = false
+          }, delay)
+        }
+      }, { signal: controller.signal })
+      fullPage.addEventListener('click', () => {
+        gallery.classList.remove('hidden')
+        fullPage.classList.add('hidden')
+        if (scrollBackTo) {
+          scrollBackTo.scrollIntoView({ behavior: 'instant', block: 'center' })
+        }
+        controller.abort()
+      }, { signal: controller.signal })
+    })
+  })
+})