diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2024-01-11 20:23:58 -0400 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2024-01-11 20:24:47 -0400 |
commit | 4ad0c3946a132f20742cc4de7f7dd31c79bb4653 (patch) | |
tree | 022692277e6c644cbb19174816964e0dbfb39aa9 /src/static | |
parent | 2016bd4c6f966f2ac80e958656829371419d3bba (diff) |
content, css: narrow image link/reveal interactivity wrapper
Diffstat (limited to 'src/static')
-rw-r--r-- | src/static/client3.js | 9 | ||||
-rw-r--r-- | src/static/site6.css | 48 |
2 files changed, 36 insertions, 21 deletions
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; |