content, css: center-align sec artworks attached to main preview

2 files changed, 16 insertions, 0 deletions

diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 2bff4643..c1a23bbd 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -30,6 +30,11 @@ export default {
     attachAbove:
       artwork.attachAbove,
 
+    attachedArtworkIsMainArtwork:
+      (artwork.attachAbove
+        ? artwork.attachedArtwork.isMainArtwork
+        : null),
+
     color:
       artwork.thing.color ?? null,
 
@@ -87,6 +92,10 @@ export default {
         slots.mode === 'commentary' &&
           {class: 'commentary-art'},
 
+        data.attachAbove &&
+        data.attachedArtworkIsMainArtwork &&
+          {class: 'attached-artwork-is-main-artwork'},
+
         (slots.mode === 'primary'
           ? [
               relations.image.slots({
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 47aea1df..aab05e41 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1586,6 +1586,13 @@ hr.cute,
   margin-right: 5px;
 }
 
+#artwork-column .cover-artwork:first-child + .cover-artwork-joiner,
+#artwork-column .cover-artwork.attached-artwork-is-main-artwork,
+#artwork-column .cover-artwork.attached-artwork-is-main-artwork + .cover-artwork-joiner {
+  margin-left: 17.5px;
+  margin-right: 17.5px;
+}
+
 .cover-artwork:where(#artwork-column .cover-artwork:not(:first-child)) {
   margin-top: 20px;
 }