css, content: various color, depth & balance adjustments

3 files changed, 72 insertions, 13 deletions

diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js
index d1c121fe..069d85dd 100644
--- a/src/content/dependencies/generateColorStyleVariables.js
+++ b/src/content/dependencies/generateColorStyleVariables.js
@@ -11,6 +11,7 @@ export default {
         'any-content',
         'image-box',
         'page-root',
+        'image-box',
         'primary-only'),
 
       default: 'any-content',
@@ -29,7 +30,8 @@ export default {
       primary,
       dark,
       dim,
-      dimGhost,
+      deep,
+      deepGhost,
       bg,
       bgBlack,
       shadow,
@@ -39,7 +41,8 @@ export default {
       `--primary-color: ${primary}`,
       `--dark-color: ${dark}`,
       `--dim-color: ${dim}`,
-      `--dim-ghost-color: ${dimGhost}`,
+      `--deep-color: ${deep}`,
+      `--deep-ghost-color: ${deepGhost}`,
       `--bg-color: ${bg}`,
       `--bg-black-color: ${bgBlack}`,
       `--shadow-color: ${shadow}`,
@@ -56,6 +59,8 @@ export default {
         selectedProperties = [
           `--primary-color: ${primary}`,
           `--dim-color: ${dim}`,
+          `--deep-color: ${deep}`,
+          `--bg-black-color: ${bgBlack}`,
         ];
         break;
 
diff --git a/src/static/site6.css b/src/static/site6.css
index d2b9d9c6..05c5366f 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -635,13 +635,29 @@ p .current {
 
 #cover-art-container {
   font-size: 0.8em;
-  box-shadow: 0 3px 3px 6px rgba(0, 0, 0, 0.35);
+  border: 2px solid var(--primary-color);
+  box-shadow:
+    0 2px 14px -6px var(--primary-color),
+    0 0 12px 12px #00000080;
+
+  border-radius: 0 0 4px 4px;
+  overflow: hidden;
 }
 
 #cover-art-container:has(.image-details),
 #cover-art-container.has-image-details {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-radius: 0 0 6px 6px;
+}
+
+#cover-art-container .image-container {
+  background: var(--deep-color);
+
+  /* Border is handled on the cover-art-container. */
+  border: none;
+}
+
+#cover-art-container .image-details {
+  border-top-color: var(--deep-color);
 }
 
 #cover-art img {
@@ -657,9 +673,7 @@ p .current {
   margin-top: 0;
   margin-bottom: 0;
   background: var(--bg-black-color);
-  border: 2px solid var(--primary-color);
-  border-top: 0;
-  border-radius: 0 0 4px 4px;
+  border-top: 1px dashed var(--dim-color);
 
   -webkit-backdrop-filter: blur(3px);
           backdrop-filter: blur(3px);
@@ -1064,14 +1078,33 @@ h1 a[href="#additional-names-box"]:hover {
 }
 
 .image-inner-area {
+  position: relative;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  border-radius: 2.5px;
+  box-shadow:
+    0 1px 8px -3px var(--bg-black-color);
 }
 
 img {
   object-fit: cover;
 }
 
+.image-inner-area::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom-left-radius: 0.5px;
+  opacity: 0.035;
+  box-shadow:
+    6px -6px 2px -4px white inset;
+}
+
 img.pixelate {
   image-rendering: crisp-edges;
 }
@@ -1145,6 +1178,19 @@ 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;
+}
+
+.grid-item .image-inner-area::after {
+  box-shadow: none;
+}
+
 .grid-item img {
   width: 100%;
   height: 100% !important;
@@ -1633,6 +1679,10 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   padding: 2px;
 }
 
+.content-sticky-heading-container .image-inner-area {
+  border-radius: 1.75px;
+}
+
 .content-sticky-heading-cover img {
   display: block;
   width: 100%;
@@ -1780,7 +1830,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 #image-overlay-content-container {
   border-radius: 0 0 8px 8px;
   border: 2px solid var(--primary-color);
-  background: var(--dim-ghost-color);
+  background: var(--deep-ghost-color);
   padding: 3px;
   overflow: hidden;
 
@@ -1851,12 +1901,14 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 }
 
 #image-overlay-action-container {
-  padding: 4px 4px 6px 4px;
+  padding: 7px 4px 7px 4px;
   border-radius: 0 0 5px 5px;
   background: var(--bg-black-color);
   color: white;
   font-style: oblique;
   text-align: center;
+  box-shadow:
+    0 3px 8px -5px var(--primary-color) inset;
 }
 
 #image-overlay-container #image-overlay-action-content-without-size:not(.visible),
diff --git a/src/util/colors.js b/src/util/colors.js
index feb52567..50339cd3 100644
--- a/src/util/colors.js
+++ b/src/util/colors.js
@@ -11,8 +11,9 @@ export function getColors(themeColor, {
   const primary = chroma(themeColor);
 
   const dark = primary.luminance(0.02);
-  const dim = primary.saturate(1.2).luminance(0.035);
-  const dimGhost = dim.alpha(0.8);
+  const dim = primary.desaturate(2).darken(1.5);
+  const deep = primary.saturate(1.2).luminance(0.035);
+  const deepGhost = deep.alpha(0.8);
   const light = chroma.average(['#ffffff', primary], 'rgb', [4, 1]);
 
   const bg = primary.luminance(0.008).desaturate(3.5).alpha(0.8);
@@ -27,7 +28,8 @@ export function getColors(themeColor, {
 
     dark: dark.hex(),
     dim: dim.hex(),
-    dimGhost: dimGhost.hex(),
+    deep: deep.hex(),
+    deepGhost: deepGhost.hex(),
     light: light.hex(),
 
     bg: bg.hex(),