Fix sizing of media elements to allow for superscaling

Author: ethmarks

assets/common.css

@@ -113,15 +113,15 @@
         var(--transition-timing);
 
     /* Media Sizes */
-    --max-media-width: clamp(300px, 60vw, 1000px);
+    --media-width: clamp(300px, 60vw, 1000px);
     --max-media-height: 1200px;
     --max-media-width-big: clamp(70vw, 80vw, 800px);
     --max-media-height-big: 70vh;
     --max-media-width-small: clamp(25vw, 30vw, 250px);
     --max-media-height-small: 30vh;
 
     @media (max-width: 768px) {
-        --max-media-width: 100%;
+        --media-width: 100%;
     }
 
     /* Misc */
@@ -372,10 +372,14 @@ img,
 video,
 iframe {
     height: auto;
-    max-width: var(--max-media-width);
-    max-height: var(--max-media-height);
+    width: var(--media-width);
     border-radius: var(--radius-xl);
     border: var(--border-standard);
+
+    &.media-tall {
+        width: auto;
+        height: var(--max-media-height);
+    }
 }
 
 .noborder {
@@ -496,7 +500,7 @@ ul {
 iframe {
     display: block;
     border: none;
-    width: var(--max-media-width);
+    width: var(--media-width);
     height: 500px;
 
     &.homepage {

assets/common.js

@@ -92,3 +92,34 @@ const forceLightMode = false;
         darkQuery.addEventListener("change", updateLightMode);
     });
 })();
+
+// Add 'tall' class to media elements exceeding --max-media-height
+(function handleTallMedia() {
+    function getMaxMediaHeight() {
+        // Get the value of --max-media-height from the root element (in px)
+        const root = document.documentElement;
+        const value = getComputedStyle(root).getPropertyValue('--max-media-height').trim();
+        // Parse value (assume px, fallback to 0 if not found)
+        if (value.endsWith('px')) {
+            return parseFloat(value);
+        }
+        return 0;
+    }
+
+    function updateTallMediaClasses() {
+        const maxHeight = getMaxMediaHeight();
+        if (!maxHeight) return;
+        document.querySelectorAll('img, video, iframe').forEach(function (el) {
+            // Use offsetHeight for rendered height
+            if (el.offsetHeight > maxHeight) {
+                el.classList.add('media-tall');
+            } else {
+                el.classList.remove('media-tall');
+            }
+        });
+    }
+
+    window.addEventListener("DOMContentLoaded", updateTallMediaClasses);
+    window.addEventListener("load", updateTallMediaClasses);
+    window.addEventListener("resize", updateTallMediaClasses);
+})();