Zoom blog images and blog responsive design

antora-ui-camel/public/_/data/rev-manifest.json

@@ -1,5 +1,5 @@
 {
-  "css/site.css": "css/site-2c6491cbb6.css",
+  "css/site.css": "css/site-3e1e4a4d80.css",
   "img/algolia.svg": "img/algolia-f4ab98e0de.svg",
   "img/apache-kafka.svg": "img/apache-kafka-88809b7472.svg",
   "img/apache-karaf.svg": "img/apache-karaf-7bdb5ce2e3.svg",
@@ -39,7 +39,7 @@
   "img/support.svg": "img/support-7219bb2f58.svg",
   "img/team.svg": "img/team-899f1050c2.svg",
   "img/user-stories.svg": "img/user-stories-cccc5f7c8f.svg",
-  "js/site.js": "js/site-9b761b31dd.js",
+  "js/site.js": "js/site-0eeb09d476.js",
   "js/vendor/algoliasearch.js": "js/vendor/algoliasearch-c7d08807d6.js",
   "js/vendor/highlight.js": "js/vendor/highlight-621a10fe1b.js",
   "js/vendor/svg4everybody.js": "js/vendor/svg4everybody-a0c573f2b9.js",

antora-ui-camel/public/_/helpers/asset.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const manifest = {
-  "css/site.css": "css/site-2c6491cbb6.css",
+  "css/site.css": "css/site-3e1e4a4d80.css",
   "img/algolia.svg": "img/algolia-f4ab98e0de.svg",
   "img/apache-kafka.svg": "img/apache-kafka-88809b7472.svg",
   "img/apache-karaf.svg": "img/apache-karaf-7bdb5ce2e3.svg",
@@ -41,7 +41,7 @@ const manifest = {
   "img/support.svg": "img/support-7219bb2f58.svg",
   "img/team.svg": "img/team-899f1050c2.svg",
   "img/user-stories.svg": "img/user-stories-cccc5f7c8f.svg",
-  "js/site.js": "js/site-9b761b31dd.js",
+  "js/site.js": "js/site-0eeb09d476.js",
   "js/vendor/algoliasearch.js": "js/vendor/algoliasearch-c7d08807d6.js",
   "js/vendor/highlight.js": "js/vendor/highlight-621a10fe1b.js",
   "js/vendor/svg4everybody.js": "js/vendor/svg4everybody-a0c573f2b9.js",

antora-ui-camel/public/_/partials/footer-scripts.hbs

@@ -1,5 +1,5 @@
 <script src="{{uiRootPath}}/js/vendor/algoliasearch-c7d08807d6.js"></script>
-<script src="{{uiRootPath}}/js/site-9b761b31dd.js"></script>
+<script src="{{uiRootPath}}/js/site-0eeb09d476.js"></script>
 <script async src="{{uiRootPath}}/js/vendor/highlight-621a10fe1b.js"></script>
 <script async src="{{uiRootPath}}/js/vendor/svg4everybody-a0c573f2b9.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/tabs-5aea11bcf5.js" data-sync-storage-key="preferred-tab"></script>

antora-ui-camel/public/_/partials/head-styles.hbs

@@ -1 +1 @@
-    <link rel="stylesheet" href="{{uiRootPath}}/css/site-2c6491cbb6.css">
+    <link rel="stylesheet" href="{{uiRootPath}}/css/site-3e1e4a4d80.css">

antora-ui-camel/public/_/rev-manifest

@@ -1,5 +1,5 @@
 {
-  "css/site.css": "css/site-2c6491cbb6.css",
+  "css/site.css": "css/site-3e1e4a4d80.css",
   "img/algolia.svg": "img/algolia-f4ab98e0de.svg",
   "img/apache-kafka.svg": "img/apache-kafka-88809b7472.svg",
   "img/apache-karaf.svg": "img/apache-karaf-7bdb5ce2e3.svg",
@@ -39,7 +39,7 @@
   "img/support.svg": "img/support-7219bb2f58.svg",
   "img/team.svg": "img/team-899f1050c2.svg",
   "img/user-stories.svg": "img/user-stories-cccc5f7c8f.svg",
-  "js/site.js": "js/site-9b761b31dd.js",
+  "js/site.js": "js/site-0eeb09d476.js",
   "js/vendor/algoliasearch.js": "js/vendor/algoliasearch-c7d08807d6.js",
   "js/vendor/highlight.js": "js/vendor/highlight-621a10fe1b.js",
   "js/vendor/svg4everybody.js": "js/vendor/svg4everybody-a0c573f2b9.js",

antora-ui-camel/src/css/blog.css

@@ -124,6 +124,67 @@ article.blog p {
   display: block;
 }
 
+.blog .post-content img:not(.featured) {
+  cursor: zoom-in;
+}
+
+
+@media screen and (width <= 1024px) {
+  .blog .post-content img {
+    max-width: 100%;
+    max-height: none;
+  }
+}
+
+.image-zoom-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgb(0 0 0 / 70%);
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-zoom-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.image-zoom-overlay img {
+  cursor: zoom-out;
+}
+
+@media screen and (width >= 1025px) {
+  .image-zoom-overlay img {
+    max-width: 800px;
+    max-height: 600px;
+    transform: scale(1.5);
+  }
+}
+
+@media screen and (width <= 1024px) {
+  .image-zoom-overlay {
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 1rem;
+  }
+
+  .image-zoom-overlay img {
+    max-width: none;
+    max-height: none;
+    width: auto;
+    height: auto;
+  }
+}
+
 .blog .post-content figcaption {
   font-size: 0.8rem;
   text-align: center;

antora-ui-camel/src/js/07-image-zoom.js

@@ -0,0 +1,48 @@
+;(function () {
+  'use strict'
+
+  var defined = document.querySelectorAll('.blog .post-content img:not(.featured)')
+  if (!defined.length) return
+
+  // Create overlay element
+  var overlay = document.createElement('div')
+  overlay.className = 'image-zoom-overlay'
+  document.body.appendChild(overlay)
+
+  function closeZoom () {
+    overlay.classList.remove('active')
+    overlay.innerHTML = ''
+  }
+
+  ;[].slice.call(defined).forEach(function (img) {
+    img.addEventListener('click', function (e) {
+      e.stopPropagation()
+      // Clone the image into the overlay
+      var clone = this.cloneNode(true)
+      clone.classList.remove('zoomed')
+      overlay.innerHTML = ''
+      overlay.appendChild(clone)
+      overlay.classList.add('active')
+
+      // Close when clicking the cloned image
+      clone.addEventListener('click', function (e) {
+        e.stopPropagation()
+        closeZoom()
+      })
+    })
+  })
+
+  // Close zoomed image when clicking overlay background
+  overlay.addEventListener('click', function (e) {
+    if (e.target === overlay) {
+      closeZoom()
+    }
+  })
+
+  // Close zoomed image on Escape key
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+      closeZoom()
+    }
+  })
+})()