reduce media height; circumvent cssRules exception due to duckduckgo …

…extension
oulipoh · Nov 6, 2024 · aa58455 · aa58455
1 parent 7bc5271
commit aa58455
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/resen/pages.js b/resen/pages.js
@@ -516,7 +516,7 @@ function make_header(reorder_contents=default_reorder_contents, new_tab_for_soci
 
         function kw_handler() {
             const on = this.classList.toggle('on')
-            const css = [...document.head.querySelectorAll('link[rel=stylesheet]')].pop().sheet
+            const css = document.head.querySelector('link[rel=stylesheet]:not([href^=data])').sheet
             let found
             for (const i in css.cssRules)
                 if (found = css.cssRules[i].selectorText?.slice(1) == this.id.replace(/^kw_/, 'non_')) {

diff --git a/resen/style.css b/resen/style.css
@@ -82,6 +82,7 @@
     --h1_size: clamp(1.5em, 5rem, 10vw);
     --hor_scrollbar_offset: 16px;
     --larger_font: clamp(1.3em, 2rem, 2vw);
+    --media_height: 85vh;
     --media_width: 85%;
 
     /* Following variables must use units that are not relative to elements (i.e. avoid %, em, ex) */
@@ -655,13 +656,16 @@ iframe, object {
 }
 
 .images img {
-    max-height: var(--max_height);
+    --images_container_height: min(var(--media_height), var(--max_height, var(--media_height)));
+    max-height: var(--images_container_height);
     object-fit: contain;
     width: 100%;
 }
 
 .images > img:not(:first-child:last-child) {
-    height: 90%;  /* Assumes difference between images aspect ratios is less than 10% */
+    --multi_image_height_factor: .9;  /* Assumes difference between images aspect ratios is less than 10% */
+    height: calc(100% * var(--multi_image_height_factor));
+    max-height: calc(var(--images_container_height) / var(--multi_image_height_factor));
 }
 
 img {
@@ -1067,13 +1071,15 @@ video {
     display: block;
     margin-block: 4.5rem;
     margin-inline: auto;
+    max-height: var(--media_height);
     width: var(--media_width);
 }
 
 .video {
     aspect-ratio: 16 / 9;
     border: none;
     margin-block: 3rem;
+    max-height: var(--media_height);
 }
 
 @media (forced-colors: active) {