content, css: generateCoverArtwork: attachAbove artwork joiner

2 files changed, 37 insertions, 4 deletions

diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 3a10ab20..2bff4643 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -27,6 +27,9 @@ export default {
   }),
 
   data: (artwork) => ({
+    attachAbove:
+      artwork.attachAbove,
+
     color:
       artwork.thing.color ?? null,
 
@@ -76,7 +79,10 @@ export default {
       image.setSlot('dimensions', data.dimensions);
     }
 
-    return (
+    return html.tags([
+      data.attachAbove &&
+        html.tag('div', {class: 'cover-artwork-joiner'}),
+
       html.tag('div', {class: 'cover-artwork'},
         slots.mode === 'commentary' &&
           {class: 'commentary-art'},
@@ -116,6 +122,7 @@ export default {
               link: true,
               lazy: true,
             })
-          : html.blank())));
+          : html.blank())),
+    ]);
   },
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 2ad069e2..682ead19 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1540,12 +1540,16 @@ hr.cute,
     0 0 12px 12px #00000080;
 }
 
-#artwork-column .cover-artwork:not(:first-child) {
-  margin-top: 20px;
+#artwork-column .cover-artwork:not(:first-child),
+#artwork-column .cover-artwork-joiner {
   margin-left: 30px;
   margin-right: 5px;
 }
 
+.cover-artwork:where(#artwork-column .cover-artwork:not(:first-child)) {
+  margin-top: 20px;
+}
+
 #artwork-column .cover-artwork:last-child:not(:first-child) {
   margin-bottom: 25px;
 }
@@ -1628,6 +1632,28 @@ p.image-details.origin-details {
   margin-bottom: 2px;
 }
 
+.cover-artwork-joiner {
+  /* This z-index must be greater than however an artwork
+   * is raised (within .isolate-tooltip-z-indexing) because
+   * a contained (tooltip) hoverable is hovered.
+   */
+  z-index: 3;
+}
+
+.cover-artwork-joiner::after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 15px;
+  margin-left: auto;
+  margin-right: auto;
+  border-right: 1px dashed var(--primary-color);
+}
+
+.cover-artwork-joiner + .cover-artwork {
+  margin-top: 0 !important;
+}
+
 .album-art-info {
   font-size: 0.8em;
   border: 2px solid var(--deep-color);