content, css, test: refactor image layout once again

5 files changed, 98 insertions, 89 deletions

diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index e333b19..7f72009 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -80,11 +80,13 @@ export default {
           alt: slots.alt,
           color: slots.color,
           thumb: 'medium',
-          class: 'commentary-art',
           reveal: true,
           link: true,
           square: true,
           lazy: true,
+
+          attributes:
+            {class: 'commentary-art'},
         });
 
       default:
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 3121aca..bc52321 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -59,11 +59,15 @@ export default {
     lazy: {type: 'boolean', default: false},
     square: {type: 'boolean', default: false},
 
-    class: {type: 'string'},
     alt: {type: 'string'},
     width: {type: 'number'},
     height: {type: 'number'},
 
+    attributes: {
+      type: 'attributes',
+      mutable: false,
+    },
+
     missingSourceContent: {
       type: 'html',
       mutable: false,
@@ -116,9 +120,6 @@ export default {
       !isMissingImageFile &&
       (typeof slots.link === 'string' || slots.link);
 
-    const customLink =
-      typeof slots.link === 'string';
-
     const willReveal =
       slots.reveal &&
       originalSrc &&
@@ -135,36 +136,6 @@ export default {
       slots.height && {height: slots.height},
     ]);
 
-    const linkAttributes = html.attributes([
-      (customLink
-        ? {href: slots.link}
-        : {href: originalSrc}),
-    ]);
-
-    const containerAttributes = html.attributes();
-
-    if (slots.class) {
-      if (willLink) {
-        linkAttributes.set('class', slots.class);
-      } else {
-        imgAttributes.set('class', slots.class);
-      }
-    }
-
-    if (slots.color) {
-      const colorStyle =
-        relations.colorStyle.slots({
-          color: slots.color,
-          context: 'image-box',
-        });
-
-      if (willLink) {
-        linkAttributes.add(colorStyle);
-      } else {
-        containerAttributes.add(colorStyle);
-      }
-    }
-
     if (!originalSrc || isMissingImageFile) {
       return prepare(
         html.tag('div', {class: 'image-text-area'},
@@ -332,24 +303,15 @@ export default {
       if (willLink) {
         wrapped =
           html.tag('a', {class: 'image-link'},
-            linkAttributes,
+            (typeof slots.link === 'string'
+              ? {href: slots.link}
+              : {href: originalSrc}),
 
             wrapped);
       }
 
       wrapped =
-        html.tag('div', {class: 'image-container'},
-          containerAttributes,
-
-          willLink &&
-            {class: 'has-link'},
-
-          customLink &&
-            {class: 'no-image-preview'},
-
-          !originalSrc &&
-            {class: 'placeholder-image'},
-
+        html.tag('div', {class: 'image-outer-area'},
           wrapped);
 
       if (willReveal) {
@@ -363,15 +325,37 @@ export default {
 
       if (willSquare) {
         wrapped =
-          html.tag('div', {class: 'square'},
-            visibility === 'hidden' &&
-            !willLink &&
-              {class: 'js-hide'},
-
-            html.tag('div', {class: 'square-content'},
-              wrapped));
+          html.tag('div', {class: 'square-content'},
+            wrapped);
       }
 
+      wrapped =
+        html.tag('div', {class: 'image-container'},
+          willLink &&
+            {class: 'has-link'},
+
+          willSquare &&
+            {class: 'square'},
+
+          typeof slots.link === 'string' &&
+            {class: 'no-image-preview'},
+
+          !originalSrc &&
+            {class: 'placeholder-image'},
+
+          visibility === 'hidden' &&
+            {class: 'js-hide'},
+
+          slots.color &&
+            relations.colorStyle.slots({
+              color: slots.color,
+              context: 'image-box',
+            }),
+
+          slots.attributes,
+
+          wrapped);
+
       return wrapped;
     }
   },
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index 52fe002..ff89389 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -388,11 +388,16 @@ export default {
                 html.tag('div', {class: 'content-image'},
                   image.slots({
                     src,
+
                     link: link ?? true,
                     width: width ?? null,
                     height: height ?? null,
                     thumb: slots.thumb,
-                    class: pixelate ? 'pixelate' : null,
+
+                    attributes:
+                      (pixelate
+                        ? {class: 'pixelate'}
+                        : null),
                   })),
             };
           }
diff --git a/src/static/client3.js b/src/static/client3.js
index 865aa78..51b1e7d 100644
--- a/src/static/client3.js
+++ b/src/static/client3.js
@@ -205,9 +205,7 @@ function getScriptedLinkReferences() {
     document.querySelectorAll('[data-random]');
 
   scriptedLinkInfo.revealLinks =
-    document.querySelectorAll(
-      '.reveal .image-container > .image-link, ' +
-      '.reveal .image-container > .image-inner-area');
+    document.querySelectorAll('.reveal .image-outer-area > *');
 
   scriptedLinkInfo.revealContainers =
     Array.from(scriptedLinkInfo.revealLinks)
diff --git a/src/static/site6.css b/src/static/site6.css
index 5ee062f..b00dd59 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -3,6 +3,32 @@
  * no need to re-run upd8.js when tweaking values here. Handy!
  */
 
+/* Squares */
+
+/* This styling is kind of awkwardly placed at the very top. Sorry!
+ * We need to rework what order sets of styles get applied in to be
+ * much more explicit (so that overriding isn't a headache), and
+ * hopefully that can be done through @imports, but it'll take some
+ * reworking and cleaning up.
+ */
+
+.square {
+  position: relative;
+  width: 100%;
+}
+
+.square::after {
+  content: "";
+  display: block;
+  padding-bottom: 100%;
+}
+
+.square-content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
 /* Layout - Common */
 
 body {
@@ -1061,7 +1087,6 @@ h1 a[href="#additional-names-box"]:hover {
   box-sizing: border-box;
   position: relative;
   height: 100%;
-  padding: 5px;
   overflow: hidden;
 
   background-color: var(--dim-color);
@@ -1094,6 +1119,13 @@ h1 a[href="#additional-names-box"]:hover {
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
 }
 
+.image-outer-area {
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+}
+
 .image-link {
   border-bottom: 1px solid #ffffff03;
   border-radius: 2.5px 2.5px 3px 3px;
@@ -1135,7 +1167,7 @@ img {
     6px -6px 2px -4px white inset;
 }
 
-img.pixelate {
+img.pixelate, .pixelate img {
   image-rendering: crisp-edges;
 }
 
@@ -1210,8 +1242,7 @@ img.pixelate {
   display: none;
 }
 
-.reveal:not(.revealed) .image-container > .image-link,
-.reveal:not(.revealed) .image-container > .image-inner-area {
+.reveal:not(.revealed) .image-outer-area > * {
   box-sizing: border-box;
   border: 1px dotted var(--primary-color);
   border-radius: 6px;
@@ -1222,19 +1253,16 @@ img.pixelate {
   background: var(--deep-color);
 }
 
-.reveal:not(.revealed) .image-container > .image-link:hover,
-.reveal:not(.revealed) .image-container > .image-inner-area:hover {
+.reveal:not(.revealed) .image-outer-area > *:hover {
   border-style: solid;
 }
 
-.reveal:not(.revealed) .image-container > .image-link:hover .image,
-.reveal:not(.revealed) .image-container > .image-inner-area:hover .image {
+.reveal:not(.revealed) .image-outer-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 {
+.reveal:not(.revealed) .image-outer-area > *:hover .reveal-interaction {
   text-decoration-style: solid;
 }
 
@@ -1272,6 +1300,10 @@ img.pixelate {
   margin: 10px;
 }
 
+.grid-item .image-container {
+  width: 100%;
+}
+
 .grid-item .image-inner-area {
   border-radius: 0;
   box-shadow: none;
@@ -1474,6 +1506,9 @@ html[data-url-key="localized.home"] .carousel-container {
 
 .carousel-item .image-container {
   border: none;
+}
+
+.carousel-item .image-outer-area {
   padding: 0;
 }
 
@@ -1490,25 +1525,6 @@ html[data-url-key="localized.home"] .carousel-container {
   background: var(--dim-color);
 }
 
-/* Squares */
-
-.square {
-  position: relative;
-  width: 100%;
-}
-
-.square::after {
-  content: "";
-  display: block;
-  padding-bottom: 100%;
-}
-
-.square-content {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
 /* Info card */
 
 #info-card-container {
@@ -1766,13 +1782,17 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 
 .content-sticky-heading-cover .image-container {
   border-width: 1px;
-  padding: 3px;
   border-radius: 1.25px;
   box-shadow: none;
 }
 
+.content-sticky-heading-container .image-outer-area {
+  padding: 3px;
+}
+
 .content-sticky-heading-container .image-inner-area {
   border-radius: 1.75px;
+  overflow: hidden;
 }
 
 .content-sticky-heading-cover .image {