hyperbook 0.53.6 → 0.54.0

package/dist/assets/client.js

@@ -230,8 +230,42 @@ var hyperbook = (function () {
    * @param {HTMLElement} el - The element to toggle.
    */
   function toggleLightbox(el) {
-    el.parentElement.classList.toggle("lightbox");
-    el.parentElement.classList.toggle("normal");
+    const overlay = document.createElement("div");
+    overlay.classList.add("lightbox-overlay");
+
+    const captionText =
+      el.parentElement.querySelector("figcaption")?.textContent || "";
+
+    // container for image + caption
+    const content = document.createElement("div");
+    content.classList.add("lightbox-content");
+
+    // image container fills remaining space
+    const imgContainer = document.createElement("div");
+    imgContainer.classList.add("lightbox-image-container");
+
+    const lightboxImg = document.createElement("img");
+    lightboxImg.src = el.src;
+    imgContainer.appendChild(lightboxImg);
+
+    content.appendChild(imgContainer);
+
+    // add caption if exists
+    if (captionText) {
+      const caption = document.createElement("div");
+      caption.classList.add("caption");
+      caption.textContent = captionText;
+      content.appendChild(caption);
+    }
+
+    overlay.appendChild(content);
+
+    overlay.addEventListener("click", () => {
+      document.body.removeChild(overlay);
+    });
+
+    document.body.appendChild(overlay);
+    overlay.style.display = "flex";
   }
 
   function init(root) {

package/dist/assets/content.css

@@ -27,27 +27,42 @@ figure {
   max-width: 100%;
 }
 
-.hyperbook-markdown figure.lightbox {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 1em;
-  z-index: 10000;
-  margin: 0px;
-  background: rgba(0, 0, 0, 0.5);
+.hyperbook-markdown figure.align-left {
+  display: table;
+  float: left;
+  margin-right: 1.75rem;
 }
 
-.hyperbook-markdown figure.lightbox img {
-  min-width: 100%;
-  min-height: 100%;
-  cursor: zoom-out;
-  object-fit: contain;
+.hyperbook-markdown figure.align-right {
+  display: table;
+  float: right;
+  margin-left: 1.75rem;
+}
+
+.hyperbook-markdown figure.align-rightplus {
+  display: table;
+  float: right;
+  margin-left: 1.75rem;
+  margin-right: -1.5rem;
+}
+
+.hyperbook-markdown figure.align-leftplus {
+  display: table;
+  float: left;
+  margin-right: 1.75rem;
+  margin-left: -1.5rem;
+}
+
+.hyperbook-markdown figure.align-centerplus {
+  display: grid;
+  justify-items: center;
+  clear: both;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+
+  img {
+    width: 100%;
+  }
 }
 
 .hyperbook-markdown table {
@@ -76,12 +91,16 @@ figure {
 }
 
 .hyperbook-markdown figure.normal {
-  text-align: center;
+  display: grid;
+  clear: both;
+  justify-items: center;
+  align-content: center;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
 .hyperbook-markdown figure.normal img {
+  display: inline-block;
   cursor: zoom-in;
 }
 
@@ -148,11 +167,11 @@ figure {
   margin-bottom: 0;
 }
 
-.hyperbook-markdown li + li {
+.hyperbook-markdown li+li {
   margin-top: 0.25em;
 }
 
-.hyperbook-markdown li > p {
+.hyperbook-markdown li>p {
   margin-top: 16px;
 }
 
@@ -226,6 +245,7 @@ figure {
 .hyperbook-markdown h4,
 .hyperbook-markdown h5,
 .hyperbook-markdown h6 {
+  clear: both;
   font-family: hyperbook-heading, sans-serif;
   margin-top: 24px;
   margin-bottom: 16px;
@@ -305,10 +325,10 @@ figure {
   list-style-type: none;
 }
 
-.hyperbook-markdown #toc-toggle > .bar1,
-.hyperbook-markdown #toc-toggle > .bar2,
-.hyperbook-markdown #toc-toggle > .bar3,
-.hyperbook-markdown #toc-toggle > .bar4 {
+.hyperbook-markdown #toc-toggle>.bar1,
+.hyperbook-markdown #toc-toggle>.bar2,
+.hyperbook-markdown #toc-toggle>.bar3,
+.hyperbook-markdown #toc-toggle>.bar4 {
   background-color: var(--color-text);
 }
 
@@ -431,16 +451,16 @@ figure {
   height: 100%;
 }
 
-.toc-drawer-content > nav {
+.toc-drawer-content>nav {
   padding: 20px;
   flex: 1;
 }
 
-.toc-drawer-content > nav li a {
+.toc-drawer-content>nav li a {
   display: block;
 }
 
-.toc-drawer-content > nav li a:hover {
+.toc-drawer-content>nav li a:hover {
   text-decoration: underline;
 }
 
@@ -547,16 +567,16 @@ figure {
   opacity: 1;
 }
 
-.hyperbook-markdown #toc-toggle > .bar1,
-.hyperbook-markdown #toc-toggle > .bar3 {
+.hyperbook-markdown #toc-toggle>.bar1,
+.hyperbook-markdown #toc-toggle>.bar3 {
   width: 20px;
   height: 2px;
   margin: 2px 3px;
   transition: 0.4s;
 }
 
-.hyperbook-markdown #toc-toggle > .bar2,
-.hyperbook-markdown #toc-toggle > .bar4 {
+.hyperbook-markdown #toc-toggle>.bar2,
+.hyperbook-markdown #toc-toggle>.bar4 {
   width: 25px;
   height: 2px;
   margin: 2px 3px;

package/dist/assets/shell.css

@@ -740,3 +740,69 @@ nav.toc li.level-3 {
   cursor: pointer;
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVwbG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiLz48cG9seWxpbmUgcG9pbnRzPSIxNyA4IDEyIDMgNyA4Ii8+PGxpbmUgeDE9IjEyIiB4Mj0iMTIiIHkxPSIzIiB5Mj0iMTUiLz48L3N2Zz4=");
 }
+
+.lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 10000;
+  padding: 1em;
+  /* small margin around edges */
+  box-sizing: border-box;
+}
+
+.lightbox-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  max-height: 100%;
+  height: 100vh;
+  /* Ensure full height usage */
+  box-sizing: border-box;
+}
+
+.lightbox-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  flex: 1;
+  /* Take up remaining space after caption */
+  min-height: 0;
+  /* Allow flexbox shrinking */
+}
+
+.lightbox-image-container img {
+  width: calc(100vw - 1em);
+  /* Forces image to grow to this width */
+  height: 100%;
+  /* Use all available height in the flex container */
+  max-width: calc(100vw - 1em);
+  /* Prevents overflow */
+  max-height: 100%;
+  /* Prevents overflow */
+  object-fit: contain;
+  /* Maintains aspect ratio while filling the space */
+  cursor: zoom-out;
+}
+
+.lightbox-content .caption {
+  color: white;
+  font-family: hyperbook-body, sans-serif;
+  text-align: center;
+  font-size: 1em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  /* Add bottom margin for spacing */
+  max-width: 90vw;
+  word-wrap: break-word;
+  flex-shrink: 0;
+  /* Prevent caption from shrinking */
+}