content, css: simplify overlay image positioning, adaptive layout

2 files changed, 19 insertions, 19 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 24b9bdca..3fdc0ea6 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -540,10 +540,11 @@ export default {
 
     const imageOverlayHTML = html.tag('div', {id: 'image-overlay-container'},
       html.tag('div', {id: 'image-overlay-content-container'}, [
-        html.tag('a', {id: 'image-overlay-image-container'}, [
-          html.tag('img', {id: 'image-overlay-image'}),
-          html.tag('img', {id: 'image-overlay-image-thumb'}),
-        ]),
+        html.tag('span', {id: 'image-overlay-image-area'},
+          html.tag('span', {id: 'image-overlay-image-layout'}, [
+            html.tag('img', {id: 'image-overlay-image'}),
+            html.tag('img', {id: 'image-overlay-image-thumb'}),
+          ])),
 
         html.tag('div', {id: 'image-overlay-action-container'},
           language.encapsulate('releaseInfo.viewOriginalFile', capsule => [
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 1b490ae8..542a2f7d 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -3157,31 +3157,30 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
           backdrop-filter: blur(3px);
 }
 
-#image-overlay-image-container {
+#image-overlay-image-area {
   display: block;
-  position: relative;
   overflow: hidden;
   width: 80vmin;
-  height: 80vmin;
   margin-left: auto;
   margin-right: auto;
 }
 
+#image-overlay-image-layout {
+  display: block;
+  position: relative;
+  margin: 4px 3px;
+  background: rgba(0, 0, 0, 0.65);
+}
+
 #image-overlay-image,
 #image-overlay-image-thumb {
-  display: inline-block;
-  object-fit: contain;
+  display: block;
   width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.65);
+  height: auto;
 }
 
 #image-overlay-image {
   position: absolute;
-  top: 3px;
-  left: 3px;
-  width: calc(100% - 6px);
-  height: calc(100% - 4px);
 }
 
 #image-overlay-image-thumb {
@@ -3195,7 +3194,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   transition: opacity 0.25s;
 }
 
-#image-overlay-image-container::after {
+#image-overlay-image-area::after {
   content: "";
   display: block;
   position: absolute;
@@ -3208,18 +3207,18 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   transition: 0.25s;
 }
 
-#image-overlay-container.loaded #image-overlay-image-container::after {
+#image-overlay-container.loaded #image-overlay-image-area::after {
   width: 100%;
   background: white;
   opacity: 0;
 }
 
-#image-overlay-container.errored #image-overlay-image-container::after {
+#image-overlay-container.errored #image-overlay-image-area::after {
   width: 100%;
   background: red;
 }
 
-#image-overlay-container:not(.visible) #image-overlay-image-container::after {
+#image-overlay-container:not(.visible) #image-overlay-image-area::after {
   width: 0 !important;
 }