Css fixes

components/Book/Sidenote.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import "./expanding-side-img.scss"
 import React, { ReactNode, createContext, useRef, useCallback, useMemo } from "react";
 import Image from "@/components/Image";
 
@@ -134,23 +135,23 @@ export const ExpandingSideImg = ({src, alt, retina, caption, children}: {
       className={retina ? " retina" : ""}
     />
     <div className="caption-cont">
-      {caption && <div className={"caption" + (children ? " with-children" : " no-children")}>{caption}</div>}
+      {caption && <div className="caption"><p>{caption}</p></div>}
       {children && <div className="children">{children}</div>}
     </div>
     </div>
     <div className="overlay">
       <div className="figure">
-      <Image
-        src={src}
-        alt={alt || caption || "image"}
-        className={retina ? " retina" : ""}
-      />
-      {(caption || children) &&
-        <div className="caption-cont">
-          {caption && <div className={"caption" + (children ? " with-children" : " no-children")}>{caption}</div>}
-          {children && <div className="children">{children}</div>}
-        </div>
-      }
+        <Image
+          src={src}
+          alt={alt || caption || "image"}
+          className={retina ? " retina" : ""}
+        />
+        {(caption || children) &&
+          <div className="caption-overlay">
+            {caption && <div className="caption">{caption}</div>}
+            {children && <div className="children">{children}</div>}
+          </div>
+        }
       </div>
     </div>
   </div>

components/Book/expanding-side-img.scss

@@ -0,0 +1,240 @@
+@use "../../styles/variables" as *;
+
+@keyframes show-icon {
+  0% { opacity: 0; }
+  25% { opacity: 1; }
+  50% { opacity: 0; }
+  75% { opacity: 1; }
+  100% { opacity: 0.7; }
+}
+
+div.expanding-side-img-container {
+  div.expanding-side-img {
+    margin: 0;
+    position: absolute;
+    width: $aside-width;
+    transform: translateX(calc(-100% - $gap));
+
+    .caption {
+      padding-top: 0px;
+    }
+
+    .caption p {
+      font-weight: 400;
+    }
+  }
+
+  img {
+    margin: 0;
+    border-radius: 8px;
+  }
+
+  div.overlay {
+    visibility: hidden;
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 10vw;
+    height: 10vh;
+    transition: width 0.2s, height 0.2s;
+    transform: translate(-50%, -50%);
+
+    text-align: center;
+    z-index: 100;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .figure {
+      display: inline-block;
+      width: auto;
+      position: relative;
+      margin: auto;
+      margin-top: 0;
+      margin-bottom: 0;
+      overflow: hidden;
+
+      &:has(.children) img {
+        max-height: 98vh;
+      }
+
+      img {
+        width: auto;
+        height: auto;
+        max-width: 98vw;
+        max-height: 85vh;
+      }
+
+      &:hover .caption-overlay:has(.children)::after {
+        animation: show-icon 2s ease both;
+      }
+
+      .caption-overlay {
+        .children {
+          padding: 0 16px;
+          width: 100%;
+          text-align: left;
+        }
+
+        .caption p {
+          padding: 0 16px 0 16px;
+          font-weight: 800;
+        }
+
+        &:has(.children) {
+          position: absolute;
+          bottom: 0;
+          max-height: 32px;
+          overflow: hidden;
+
+          background-color: #fff9;
+          text-overflow: unset;
+          transition: background-color 0.5s ease, max-height 0.5s ease;
+
+          &::after {
+            content: "";
+            position: absolute;
+            top: auto;
+            bottom: 0;
+            left: 0;
+            width: 32px;
+            height: 32px;
+            opacity: 0;
+
+            background-color: rgb(80 80 80 / 70%);
+            background-image: url("/icons/eye.svg");
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 18px;
+
+            border-radius: 4px;
+          }
+
+          &:hover {
+            background-color: #fffd;
+            padding: 16px 16px 0 16px;
+            max-height: 100vh;
+
+            &::after {
+              opacity: 0 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media ( min-width: 681px ) {
+  div.expanding-side-img-container {
+    &:has(:hover) .overlay {
+      width: 100vw;
+      height: 100vh;
+      background-color: #dddd;
+      visibility: visible;
+      pointer-events: none;
+
+      .caption-overlay:not(:has(.children)) {
+        visibility: visible;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        padding: 12px;
+        background-color: #333a;
+        color: white;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+      }
+    }
+
+    &:has(:hover) .figure {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  .expanding-side-img img, .overlay .figure img {
+    border: 1px solid #bbb;
+  }
+
+  div.expanding-side-img {
+    transform-origin: top left;
+    max-width: $aside-width;
+    padding: 0;
+    object-fit: contain;
+
+    img {
+      border-radius: 5px;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 32px;
+      height: 32px;
+
+      background-color: rgb(80 80 80 / 70%);
+      background-image: url("/icons/magnifying-glass.svg");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 18px;
+
+      border-radius: 4px;
+    }
+
+    .caption-cont {
+      .caption {
+        padding-top: 12px;
+
+      }
+
+      .children {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+
+@media print, ( max-width: 680px ) {
+  div.expanding-side-img-container {
+    max-width: 100vw;
+    height: auto;
+    overflow: clip;
+
+    .overlay {
+      display: none !important;
+    }
+
+    .expanding-side-img {
+        img {
+          width: 100%
+        }
+        &:has(.caption) {
+          text-align: center;
+
+          &::after {
+            display: none;
+          }
+
+          img {
+            margin-bottom: 0;
+          }
+
+        .caption, .children {
+          font-weight: 400 !important;
+          padding: 8px 0 16px 0;
+        }
+      }
+    }
+  }
+}

components/MdxContent.tsx

@@ -33,6 +33,23 @@ export const MdxContent = ({content, chapterId, bookId, t, env, allAnswers}: {
   env?: Record<string, any>;
   allAnswers?: AnswersInBook;
 }) => {
+  React.useEffect(() => {
+    const resize = (img: HTMLImageElement) => {
+      // Set only maxHeight to avoid overriding maxWidth set to images in side columns
+      img.style.maxHeight = `${img.naturalHeight / 2}px`;
+    };
+
+    const images = document.querySelectorAll<HTMLImageElement>("img.retina");
+    images.forEach(img => {
+      if (img.complete) {
+        resize(img);
+      }
+      else {
+        img.addEventListener("load", () => resize(img), {once: true});
+      }
+    });
+  }, []);
+
   if  (!content) {
     return;
   }