content, css: narrow image link/reveal interactivity wrapper

3 files changed, 49 insertions, 34 deletions

diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 9de58dce..5ea89a57 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -338,14 +338,25 @@ export default {
       }
 
       wrapped =
+        html.tag('div', {class: 'image-inner-area'},
+          wrapped);
+
+      if (willLink) {
+        wrapped =
+          html.tag('a', {class: 'image-link'},
+            linkAttributes,
+
+            wrapped);
+      }
+
+      wrapped =
         html.tag('div', {class: 'image-container'},
           containerAttributes,
 
           !originalSrc &&
             {class: 'placeholder-image'},
 
-          html.tag('div', {class: 'image-inner-area'},
-            wrapped));
+          wrapped);
 
       if (willReveal) {
         wrapped =
@@ -367,17 +378,6 @@ export default {
               wrapped));
       }
 
-      if (willLink) {
-        wrapped =
-          html.tag('a', {class: ['box', 'image-link']},
-            linkAttributes,
-
-            visibility === 'hidden' &&
-              {class: 'js-hide'},
-
-            wrapped);
-      }
-
       return wrapped;
     }
   },
diff --git a/src/static/client3.js b/src/static/client3.js
index 1c813472..595bf612 100644
--- a/src/static/client3.js
+++ b/src/static/client3.js
@@ -205,7 +205,9 @@ function getScriptedLinkReferences() {
     document.querySelectorAll('[data-random]');
 
   scriptedLinkInfo.revealLinks =
-    document.querySelectorAll('.reveal .image-inner-area');
+    document.querySelectorAll(
+      '.reveal .image-container > .image-link, ' +
+      '.reveal .image-container > .image-inner-area');
 
   scriptedLinkInfo.revealContainers =
     Array.from(scriptedLinkInfo.revealLinks)
@@ -394,9 +396,8 @@ function handleRevealLinkClicked(domEvent, _revealLink, revealContainer) {
     return;
   }
 
-  revealContainer.classList.add('revealed');
   domEvent.preventDefault();
-  domEvent.stopPropagation();
+  revealContainer.classList.add('revealed');
   revealContainer.dispatchEvent(new CustomEvent('hsmusic-reveal'));
 }
 
@@ -1718,7 +1719,7 @@ function handleImageLinkClicked(evt) {
   evt.preventDefault();
 
   // Don't show the overlay if the image still needs to be revealed.
-  if (evt.target.closest('a').querySelector('.reveal:not(.revealed)')) {
+  if (evt.target.closest('.reveal:not(.revealed)')) {
     return;
   }
 
diff --git a/src/static/site6.css b/src/static/site6.css
index 9996da68..2ffb209d 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -718,15 +718,20 @@ ul.image-details li {
   margin-bottom: 1em;
 }
 
-a.box:focus {
-  outline: 3px double var(--primary-color);
+.image-link {
+  display: block;
+  overflow: hidden;
+}
+
+.image-link:focus {
+  outline: 3px double white;
 }
 
-a.box:focus:not(:focus-visible) {
+.image-link:focus:not(:focus-visible) {
   outline: none;
 }
 
-a.box .image {
+.image-link .image {
   display: block;
   max-width: 100%;
   height: auto;
@@ -1088,18 +1093,19 @@ h1 a[href="#additional-names-box"]:hover {
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
 }
 
-.image-inner-area {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
+.image-link {
   border-bottom: 1px solid #ffffff03;
   border-radius: 2.5px;
   box-shadow:
     0 1px 8px -3px var(--bg-black-color);
 }
 
+.image-inner-area {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
 img {
   object-fit: cover;
 }
@@ -1108,6 +1114,7 @@ img {
   content: "";
   display: block;
   position: absolute;
+  pointer-events: none;
   top: 0;
   left: 0;
   right: 0;
@@ -1193,27 +1200,34 @@ img.pixelate {
   display: none;
 }
 
-.reveal:not(.revealed) .image-inner-area {
-  background: var(--deep-color);
-
+.reveal:not(.revealed) .image-container > .image-link,
+.reveal:not(.revealed) .image-container > .image-inner-area {
   box-sizing: border-box;
   border: 1px dotted var(--primary-color);
   border-radius: 6px;
+  overflow: hidden;
 }
 
-.reveal .image-inner-area:hover .reveal-interaction {
-  text-decoration-style: solid;
+.reveal:not(.revealed) .image-inner-area {
+  background: var(--deep-color);
 }
 
-.reveal:not(.revealed) .image-inner-area:hover {
+.reveal:not(.revealed) .image-container > .image-link:hover,
+.reveal:not(.revealed) .image-container > .image-inner-area:hover {
   border-style: solid;
 }
 
-.reveal:not(.revealed) .image-inner-area:hover .image {
+.reveal:not(.revealed) .image-container > .image-link:hover .image,
+.reveal:not(.revealed) .image-container > .image-inner-area:hover .image {
   filter: blur(20px) brightness(0.6);
   opacity: 0.6;
 }
 
+.reveal:not(.revealed) .image-container > .image-link:hover .reveal-interaction,
+.reveal:not(.revealed) .image-container > .image-inner-area:hover .reveal-interaction {
+  text-decoration-style: solid;
+}
+
 .image-link:not(.no-image-preview) .image-container {
   background: var(--deep-color);
   box-shadow: none;