css: more depth adjustments

2 files changed, 42 insertions, 25 deletions

diff --git a/src/static/client3.js b/src/static/client3.js
index 969fe6f..6174e5c 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 05c5366..dcc0e0b 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;