content: cover-artwork, cover-art-column

8 files changed, 80 insertions, 72 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index 2af461a4..03ac469d 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -112,7 +112,7 @@ export default {
 
         additionalNames: relations.additionalNamesBox,
 
-        cover:
+        coverColumnContent: [
           (relations.cover
             ? relations.cover.slots({
                 showOriginDetails: true,
diff --git a/src/content/dependencies/generateArtistInfoPage.js b/src/content/dependencies/generateArtistInfoPage.js
index 0c4e4189..12eaf462 100644
--- a/src/content/dependencies/generateArtistInfoPage.js
+++ b/src/content/dependencies/generateArtistInfoPage.js
@@ -156,7 +156,7 @@ export default {
         title: data.name,
         headingMode: 'sticky',
 
-        cover:
+        coverColumnContent:
           (relations.cover
             ? relations.cover.slots({
                 image:
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 06972d6b..58c29830 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -38,49 +38,43 @@ export default {
         ? {square: true}
         : {dimensions: slots.dimensions});
 
-    switch (slots.mode) {
-      case 'primary':
-        return html.tags([
-          slots.image.slots({
-            thumb: 'medium',
-            reveal: true,
-            link: true,
-
-            warnings: slots.warnings,
-            ...sizeSlots,
-          }),
-
-          slots.details,
-        ]);
-
-      case 'thumbnail':
-        return (
-          slots.image.slots({
-            thumb: 'small',
-            reveal: false,
-            link: false,
-
-            warnings: slots.warnings,
-            ...sizeSlots,
-          }));
-
-      case 'commentary':
-        return (
-          slots.image.slots({
-            thumb: 'medium',
-            reveal: true,
-            link: true,
-            lazy: true,
-
-            warnings: slots.warnings,
-            ...sizeSlots,
-
-            attributes:
-              {class: 'commentary-art'},
-          }));
-
-      default:
-        return html.blank();
-    }
+    return (
+      html.tag('div', {class: 'cover-artwork'},
+        slots.mode === 'commentary' &&
+          {class: 'commentary-art'},
+
+        (slots.mode === 'primary'
+          ? [
+              slots.image.slots({
+                thumb: 'medium',
+                reveal: true,
+                link: true,
+
+                warnings: slots.warnings,
+                ...sizeSlots,
+              }),
+
+              slots.details,
+            ]
+       : slots.mode === 'thumbnail'
+          ? slots.image.slots({
+              thumb: 'small',
+              reveal: false,
+              link: false,
+
+              warnings: slots.warnings,
+              ...sizeSlots,
+            })
+       : slots.mode === 'commentary'
+          ? slots.image.slots({
+              thumb: 'medium',
+              reveal: true,
+              link: true,
+              lazy: true,
+
+              warnings: slots.warnings,
+              ...sizeSlots,
+            })
+          : html.blank())));
   },
 };
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 7605c00d..f21aa00d 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -93,7 +93,7 @@ export default {
       mutable: false,
     },
 
-    cover: {
+    coverColumnContent: {
       type: 'html',
       mutable: false,
     },
@@ -262,6 +262,17 @@ export default {
         ? data.canonicalBase + pagePathStringFromRoot
         : null);
 
+    const firstItemInCoverColumn =
+      html.smooth(slots.coverColumnContent)
+        .content[0];
+
+    const primaryCover =
+      (firstItemInCoverColumn &&
+       html.resolve(firstItemInCoverColumn, {normalize: 'tag'})
+         .attributes.has('class', 'cover-artwork')
+        ? firstItemInCoverColumn
+        : null);
+
     const titleContentsHTML =
       (html.isBlank(slots.title)
         ? null
@@ -279,7 +290,7 @@ export default {
         ? [
             relations.stickyHeadingContainer.slots({
               title: titleContentsHTML,
-              cover: slots.cover,
+              cover: primaryCover,
             }),
 
             relations.stickyHeadingContainer.clone().slots({
@@ -316,9 +327,9 @@ export default {
         [
           titleHTML,
 
-          html.tag('div', {id: 'cover-art-container'},
+          html.tag('div', {id: 'cover-art-column'},
             {[html.onlyIfContent]: true},
-            slots.cover),
+            slots.coverColumnContent),
 
           subtitleHTML,
 
diff --git a/src/content/dependencies/generateReferencedArtworksPage.js b/src/content/dependencies/generateReferencedArtworksPage.js
index 3d21b15d..cdd0a3c7 100644
--- a/src/content/dependencies/generateReferencedArtworksPage.js
+++ b/src/content/dependencies/generateReferencedArtworksPage.js
@@ -76,7 +76,7 @@ export default {
         color: slots.color,
         styleRules: slots.styleRules,
 
-        cover:
+        coverColumnContent:
           slots.cover.slot('details', 'artists'),
 
         mainClasses: ['top-index'],
diff --git a/src/content/dependencies/generateReferencingArtworksPage.js b/src/content/dependencies/generateReferencingArtworksPage.js
index 2fe2e93d..b8722725 100644
--- a/src/content/dependencies/generateReferencingArtworksPage.js
+++ b/src/content/dependencies/generateReferencingArtworksPage.js
@@ -76,7 +76,7 @@ export default {
         color: slots.color,
         styleRules: slots.styleRules,
 
-        cover:
+        coverColumnContent:
           slots.cover.slot('details', 'artists'),
 
         mainClasses: ['top-index'],
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index a2a83d2d..a5e2a476 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -141,7 +141,7 @@ export default {
         color: data.color,
         styleRules: [relations.albumStyleRules],
 
-        cover:
+        coverColumnContent:
           (relations.cover
             ? relations.cover.slots({
                 showOriginDetails: true,
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 8836f03a..79f88b4d 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1393,12 +1393,9 @@ hr.cute,
   border-style: none none dotted none;
 }
 
-#cover-art-container {
+.cover-artwork {
   font-size: 0.8em;
   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;
   background: var(--bg-black-color);
@@ -1407,37 +1404,43 @@ hr.cute,
           backdrop-filter: blur(3px);
 }
 
-#cover-art-container:has(.image-details),
-#cover-art-container.has-image-details {
+.cover-artwork:has(.image-details),
+.cover-artwork.has-image-details {
   border-radius: 0 0 6px 6px;
 }
 
-#cover-art-container:not(:has(.image-details)),
-#cover-art-container:not(.has-image-details) {
+.cover-artwork:not(:has(.image-details)),
+.cover-artwork:not(.has-image-details) {
   /* Hacky: `overflow: hidden` hides tag tooltips, so it can't be applied
    * if we've got tags/details visible. But it's okay, because we only
    * need to apply it if it *doesn't* - that's when the rounded border
-   * of #cover-art-container needs to cut off its child image-container
+   * of the .cover-artwork needs to cut off its child .image-container
    * (which has a background that otherwise causes sharp corners).
    */
   overflow: hidden;
 }
 
-#cover-art-container .image-container {
-  /* Border is handled on the cover-art-container. */
+#cover-art-column .cover-artwork {
+  box-shadow:
+    0 2px 14px -6px var(--primary-color),
+    0 0 12px 12px #00000080;
+}
+
+.cover-artwork .image-container {
+  /* Border is handled on the .cover-artwork. */
   border: none;
-  border-radius: 0;
+  border-radius: 0 !important;
 }
 
-#cover-art-container .image-details {
+.cover-artwork .image-details {
   border-top-color: var(--deep-color);
 }
 
-#cover-art-container .image-details + .image-details {
+.cover-artwork .image-details + .image-details {
   border-top-color: var(--primary-color);
 }
 
-#cover-art-container .image {
+.cover-artwork .image {
   display: block;
   width: 100%;
   height: 100%;
@@ -3084,7 +3087,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   transition: transform 0.35s, opacity 0.30s;
 }
 
-.content-sticky-heading-cover .image-container {
+.content-sticky-heading-cover .cover-artwork {
   border-width: 1px;
   border-radius: 1.25px;
   box-shadow: none;
@@ -3415,7 +3418,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   /* Cover art floats to the right. It's positioned in HTML beneath the
    * heading, so pull it up a little to "float" on top.
    */
-  #cover-art-container {
+  #cover-art-column {
     float: right;
     width: 40%;
     max-width: 400px;
@@ -3428,7 +3431,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   /* ...Except on top-indexes, where cover art is displayed prominently
    * between the heading and subheading.
    */
-  #content.top-index #cover-art-container {
+  #content.top-index #cover-art-column {
     float: none;
     margin: 2em auto 2.5em auto;
     max-width: 375px;
@@ -3535,7 +3538,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
     --responsive-padding-ratio: 0.02;
   }
 
-  #cover-art-container {
+  #cover-art-column {
     margin: 25px 0 5px 0;
     width: 100%;
     max-width: unset;