hide CW'd art from sticky heading til main cover revealed

2 files changed, 31 insertions, 3 deletions

diff --git a/src/static/client.js b/src/static/client.js
index 5b8b0c8a..0c760500 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -185,6 +185,7 @@ for (const reveal of document.querySelectorAll('.reveal')) {
       reveal.classList.add('revealed');
       event.preventDefault();
       event.stopPropagation();
+      reveal.dispatchEvent(new CustomEvent('hsmusic-reveal'));
     }
   });
 }
@@ -527,6 +528,7 @@ const stickyHeadingInfo = Array.from(document.querySelectorAll('.content-sticky-
     const stickySubheadingRow = stickyContainer.querySelector('.content-sticky-subheading-row');
     const stickySubheading = stickySubheadingRow.querySelector('h2');
     const stickyCoverContainer = stickyContainer.querySelector('.content-sticky-heading-cover-container');
+    const stickyCover = stickyCoverContainer.querySelector('.content-sticky-heading-cover');
     const contentHeadings = Array.from(contentContainer.querySelectorAll('.content-heading'));
     const contentCover = contentContainer.querySelector('#cover-art-container');
 
@@ -535,6 +537,7 @@ const stickyHeadingInfo = Array.from(document.querySelectorAll('.content-sticky-
       contentCover,
       contentHeadings,
       stickyContainer,
+      stickyCover,
       stickyCoverContainer,
       stickySubheading,
       stickySubheadingRow,
@@ -549,6 +552,20 @@ const topOfViewInside = (el, scroll = window.scrollY) => (
   scroll < el.offsetTop + el.offsetHeight
 );
 
+function prepareStickyHeadings() {
+  for (const {
+    contentCover,
+    stickyCover,
+  } of stickyHeadingInfo) {
+    const coverRevealImage = contentCover.querySelector('.reveal');
+    if (coverRevealImage) {
+      coverRevealImage.addEventListener('hsmusic-reveal', () => {
+        stickyCover.classList.remove('content-sticky-heading-cover-needs-reveal');
+      });
+    }
+  }
+}
+
 function updateStickyHeading() {
   for (const {
     contentContainer,
@@ -620,7 +637,7 @@ function updateStickyHeading() {
 }
 
 document.addEventListener('scroll', updateStickyHeading);
-
+prepareStickyHeadings();
 updateStickyHeading();
 
 // Image overlay ------------------------------------------
diff --git a/src/static/site3.css b/src/static/site3.css
index c30398aa..cd946886 100644
--- a/src/static/site3.css
+++ b/src/static/site3.css
@@ -758,12 +758,19 @@ img {
   opacity: 0.4;
 }
 
-.reveal-text {
-  color: white;
+.reveal-text-container {
   position: absolute;
   top: 15px;
   left: 10px;
   right: 10px;
+  bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.reveal-text {
+  color: white;
   text-align: center;
   font-weight: bold;
 }
@@ -1261,6 +1268,10 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   margin: -15px 0px -5px -5px;
 }
 
+.content-sticky-heading-cover-needs-reveal {
+  display: none;
+}
+
 .content-sticky-heading-cover {
   position: absolute;
   top: 0;