diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2024-01-01 21:51:15 -0400 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2024-01-01 21:51:15 -0400 |
commit | 64a4618d244d93fe8d2c62b0a11a941a2ae81bf7 (patch) | |
tree | 3a00501bda089f467af3ed7611563ae298df408b | |
parent | c83e95c885bb72ee6882b5db53a98341830a96fa (diff) |
css: more depth adjustments
-rw-r--r-- | src/content/dependencies/image.js | 6 | ||||
-rw-r--r-- | src/static/client3.js | 6 | ||||
-rw-r--r-- | src/static/site6.css | 61 |
3 files changed, 45 insertions, 28 deletions
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index 6b937043..f93ce97e 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -130,15 +130,15 @@ export default { slots.alt && {alt: slots.alt}, slots.width && {width: slots.width}, slots.height && {height: slots.height}, - - customLink && - {'data-no-image-preview': true}, ]); const linkAttributes = html.attributes([ (customLink ? {href: slots.link} : {href: originalSrc}), + + customLink && + {class: 'no-image-preview'}, ]); const containerAttributes = html.attributes(); diff --git a/src/static/client3.js b/src/static/client3.js index 969fe6fa..6174e5c4 100644 --- a/src/static/client3.js +++ b/src/static/client3.js @@ -1621,11 +1621,7 @@ function addImageOverlayClickHandlers() { return; } - for (const link of document.querySelectorAll('.image-link')) { - if (link.querySelector('img').hasAttribute('data-no-image-preview')) { - continue; - } - + for (const link of document.querySelectorAll('.image-link:not(.no-image-preview)')) { link.addEventListener('click', handleImageLinkClicked); } diff --git a/src/static/site6.css b/src/static/site6.css index 05c5366f..dcc0e0b9 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -650,10 +650,9 @@ p .current { } #cover-art-container .image-container { - background: var(--deep-color); - /* Border is handled on the cover-art-container. */ border: none; + border-radius: 0; } #cover-art-container .image-details { @@ -1047,15 +1046,20 @@ h1 a[href="#additional-names-box"]:hover { /* Images */ .image-container { - border: 2px solid var(--primary-color); + display: inline-block; box-sizing: border-box; position: relative; + height: 100%; padding: 5px; - text-align: left; + overflow: hidden; + background-color: var(--dim-color); + border: 2px solid var(--primary-color); + border-radius: 0; + box-shadow: 0 2px 4px -2px var(--bg-black-color) inset; + + text-align: left; color: white; - display: inline-block; - height: 100%; } .image-text-area { @@ -1069,8 +1073,10 @@ h1 a[href="#additional-names-box"]:hover { justify-content: center; text-align: center; padding: 5px 15px; + background: rgba(0, 0, 0, 0.65); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset; + line-height: 1.35em; color: var(--primary-color); font-style: oblique; @@ -1082,6 +1088,8 @@ h1 a[href="#additional-names-box"]:hover { width: 100%; height: 100%; overflow: hidden; + + border-bottom: 1px solid #ffffff03; border-radius: 2.5px; box-shadow: 0 1px 8px -3px var(--bg-black-color); @@ -1150,6 +1158,12 @@ img.pixelate { display: none; } +.image-link:not(.no-image-preview) .image-container { + background: var(--deep-color); + box-shadow: none; + border-radius: 0 0 4px 4px; +} + .sidebar .image-container { max-width: 350px; } @@ -1178,10 +1192,6 @@ img.pixelate { margin: 10px; } -.grid-item .image-container { - box-shadow: 0 2px 4px -2px var(--bg-black-color) inset; -} - .grid-item .image-inner-area { border-radius: 0; box-shadow: none; @@ -1676,7 +1686,9 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r .content-sticky-heading-cover .image-container { border-width: 1px; - padding: 2px; + padding: 3px; + border-radius: 1.25px; + box-shadow: none; } .content-sticky-heading-container .image-inner-area { @@ -1699,9 +1711,12 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r background: var(--bg-black-color); border-bottom: 1px dotted rgba(220, 220, 220, 0.4); + box-shadow: + 0 2px 2px -1px #00000060, + 0 4px 12px -4px #00000090; - -webkit-backdrop-filter: blur(3px); - backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); transition: margin-top 0.35s, opacity 0.25s; } @@ -1728,13 +1743,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r .content-sticky-heading-row { box-shadow: inset 0 10px 10px -5px var(--shadow-color), - 0 4px 4px rgba(0, 0, 0, 0.8); -} - -.content-sticky-heading-container h2.visible { - box-shadow: - inset 0 10px 10px -5px var(--shadow-color), - 0 4px 4px rgba(0, 0, 0, 0.8); + 0 4px 8px -4px #000000b0; } #content, .sidebar { @@ -1822,6 +1831,18 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r justify-content: center; } +#image-overlay-container::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + + background: var(--deep-color); + opacity: 0.20; +} + #image-overlay-container.visible { opacity: 1; pointer-events: auto; |