sticky cover art (a little wip)

2 files changed, 132 insertions, 56 deletions

diff --git a/src/static/client.js b/src/static/client.js
index ebe8604f..dcb39226 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -449,14 +449,20 @@ if (localStorage.tryInfoCards) {
 const stickyHeadingInfo = Array.from(document.querySelectorAll('.content-sticky-heading-container'))
   .map(stickyContainer => {
     const {parentElement: contentContainer} = stickyContainer;
-    const stickySubheading = stickyContainer.querySelector('.content-sticky-subheading');
+    const stickySubheadingRow = stickyContainer.querySelector('.content-sticky-subheading-row');
+    const stickySubheading = stickySubheadingRow.querySelector('h2');
+    const stickyCoverContainer = stickyContainer.querySelector('.content-sticky-heading-cover-container');
     const contentHeadings = Array.from(contentContainer.querySelectorAll('.content-heading'));
+    const contentCover = contentContainer.querySelector('#cover-art-container');
 
     return {
       contentContainer,
+      contentCover,
       contentHeadings,
       stickyContainer,
+      stickyCoverContainer,
       stickySubheading,
+      stickySubheadingRow,
       state: {
         displayedHeading: null,
       },
@@ -471,13 +477,22 @@ const topOfViewInside = (el, scroll = window.scrollY) => (
 function updateStickyHeading() {
   for (const {
     contentContainer,
+    contentCover,
     contentHeadings,
     stickyContainer,
+    stickyCoverContainer,
     stickySubheading,
+    stickySubheadingRow,
     state,
   } of stickyHeadingInfo) {
     let closestHeading = null;
 
+    if (contentCover.getBoundingClientRect().bottom < 0) {
+      stickyCoverContainer.classList.add('visible');
+    } else {
+      stickyCoverContainer.classList.remove('visible');
+    }
+
     if (topOfViewInside(contentContainer)) {
       if (stickySubheading.childNodes.length === 0) {
         // &nbsp; to ensure correct basic line height
@@ -517,9 +532,9 @@ function updateStickyHeading() {
           }
         }
 
-        stickySubheading.classList.add('visible');
+        stickySubheadingRow.classList.add('visible');
       } else {
-        stickySubheading.classList.remove('visible');
+        stickySubheadingRow.classList.remove('visible');
       }
 
       state.displayedHeading = closestHeading;
diff --git a/src/static/site2.css b/src/static/site2.css
index 05d6cce8..3acd8499 100644
--- a/src/static/site2.css
+++ b/src/static/site2.css
@@ -165,6 +165,7 @@ body::before {
 }
 
 #content {
+  position: relative;
   --content-padding: 20px;
   box-sizing: border-box;
   padding: var(--content-padding);
@@ -188,16 +189,9 @@ body::before {
   margin: 5px 12%;
 }
 
-#cover-art-container {
-  float: right;
-  width: 40%;
-  max-width: 400px;
-  margin: -5px 0 10px 10px;
-}
-
 /* Layout - Wide (most computers) */
 
-@media not all and (max-width: 900px) {
+@media (min-width: 900px) {
   #secondary-nav:not(.no-hide) {
     display: none;
   }
@@ -210,15 +204,40 @@ body::before {
  * if so desired.
  */
 
-@media not all and (min-width: 900px), (max-width: 800px) {
-  body {
-    background: blue !important;
+@media (min-width: 600px) and (max-width: 899.98px) {
+}
+
+/* Layout - Wide or Medium */
+
+@media (min-width: 600px) {
+  .content-sticky-heading-container {
+    /* Safari doesn't always play nicely with position: sticky,
+     * this seems to fix images sometimes displaying above the
+     * position: absolute subheading (h2) child
+     *
+     * See also: https://stackoverflow.com/questions/50224855/
+     */
+    transform: translate3d(0, 0, 0);
+    z-index: 1;
+  }
+
+  /* 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 {
+    float: right;
+    width: 40%;
+    max-width: 400px;
+    margin: -60px 0 10px 10px;
+
+    position: relative;
+    z-index: 2;
   }
 }
 
 /* Layout - Medium or Thin */
 
-@media (max-width: 900px) {
+@media (max-width: 899.98px) {
   .sidebar-column:not(.no-hide) {
     display: none;
   }
@@ -255,8 +274,7 @@ body::before {
   }
 
   #cover-art-container {
-    float: none;
-    margin: 0 0 40px 0;
+    margin: 25px 0 5px 0;
     width: 100%;
     max-width: unset;
   }
@@ -571,6 +589,9 @@ a:hover {
 
 #cover-art-container {
   font-size: 0.8em;
+}
+
+#cover-art {
   box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.25);
 }
 
@@ -1099,12 +1120,16 @@ img {
   top: 0;
 }
 
-#content .content-sticky-heading-container h1,
+.content-sticky-heading-container {
+  margin: calc(-1 * var(--content-padding));
+  margin-bottom: calc(0.5 * var(--content-padding));
+}
+
+.content-sticky-heading-row,
 #content:not(.no-sticky-heading) > h1:first-of-type
 /* , .sidebar:not(.no-sticky-heading) h1:first-of-type */
 {
-  margin: calc(-1 * var(--content-padding));
-  margin-bottom: calc(0.5 * var(--content-padding));
+  box-sizing: border-box;
   padding:
     calc(1.25 * var(--content-padding))
     20px
@@ -1118,34 +1143,66 @@ img {
           backdrop-filter: blur(6px);
 }
 
-#content .content-sticky-heading-container {
-  position: sticky;
+.content-sticky-heading-row {
+  width: 100%;
+  margin: 0;
+}
+
+.content-sticky-heading-row,
+.content-sticky-subheading-row {
+  display: grid;
+  grid-template-areas:
+    "title cover";
+  grid-template-columns: 1fr min(40%, 400px);
+}
+
+.content-sticky-heading-row h1 {
+  margin: 0;
+}
+
+.content-sticky-heading-cover-container {
+  position: relative;
+  height: 0;
+  margin: -15px 0px -5px -5px;
+}
+
+.content-sticky-heading-cover {
+  position: absolute;
   top: 0;
+  width: 80px;
+  right: 10px;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25);
+  transition: transform 0.35s, opacity 0.25s;
+}
 
-  /* Safari doesn't always play nicely with position: sticky,
-   * this seems to fix images sometimes displaying above the
-   * position: absolute subheading (h2) child
-   *
-   * See also: https://stackoverflow.com/questions/50224855/
-   */
-  transform: translate3d(0, 0, 0);
-  z-index: 1;
+.content-sticky-heading-cover-container:not(.visible) .content-sticky-heading-cover {
+  opacity: 0;
+  transform: translateX(40px);
 }
 
-#content .content-sticky-heading-container h1 {
-  margin-bottom: 0;
+.content-sticky-heading-cover .image-container {
+  border-width: 1px;
+  padding: 2px;
 }
 
-#content .content-sticky-heading-container h2 {
+.content-sticky-heading-cover img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.content-sticky-heading-container {
+  position: sticky;
+  top: 0;
+}
+
+.content-sticky-subheading-row {
   position: absolute;
-  margin: 0 calc(-1 * var(--content-padding));
   width: 100%;
+  box-sizing: border-box;
   padding: 10px 40px 5px 20px;
-
-  font-size: 0.9em;
-  font-weight: normal;
-  font-style: oblique;
-  color: #eee;
+  margin-top: 0;
+  z-index: -1;
 
   background: var(--bg-black-color);
   border-bottom: 1px dotted rgba(220, 220, 220, 0.4);
@@ -1156,30 +1213,39 @@ img {
   transition: margin-top 0.35s, opacity 0.25s;
 }
 
-#content .content-sticky-heading-container h2:not(.visible) {
+.content-sticky-subheading-row h2 {
+  margin: 0;
+
+  font-size: 0.9em;
+  font-weight: normal;
+  font-style: oblique;
+  color: #eee;
+}
+
+.content-sticky-subheading-row:not(.visible) {
   margin-top: -20px;
   opacity: 0;
 }
 
-#content .content-sticky-heading-container h2.visible {
+.content-sticky-heading-container h2.visible {
   margin-top: 0;
   opacity: 1;
 }
 
-#content:not(.no-sticky-heading) > h1:first-of-type {
-  z-index: 1;
+.content-sticky-heading-row {
   box-shadow:
     inset 0 10px 10px -5px var(--shadow-color),
     0 4px 4px rgba(0, 0, 0, 0.8);
 }
 
-#content .content-sticky-heading-container h1 {
+.content-sticky-heading-container h2.visible {
   box-shadow:
     inset 0 10px 10px -5px var(--shadow-color),
     0 4px 4px rgba(0, 0, 0, 0.8);
 }
 
-#content .content-sticky-heading-container h2.visible {
+#content:not(.no-sticky-heading) > h1:first-of-type {
+  z-index: 1;
   box-shadow:
     inset 0 10px 10px -5px var(--shadow-color),
     0 4px 4px rgba(0, 0, 0, 0.8);
@@ -1191,17 +1257,6 @@ img {
   padding-left: 40%;
 }
 
-#cover-art-container {
-  z-index: 2;
-  position: relative;
-}
-
-.sidebar:not(.no-sticky-heading) h1:first-of-type {
-  box-shadow:
-    inset 0 8px 8px -6px var(--shadow-color),
-    0 4px 4px rgba(0, 0, 0, 0.8);
-}
-
 #content, .sidebar {
   contain: paint;
 }
@@ -1224,6 +1279,12 @@ img {
 .sidebar-multiple.sticky-column {
   align-self: flex-start;
 }
+
+.sidebar:not(.no-sticky-heading) h1:first-of-type {
+  box-shadow:
+    inset 0 8px 8px -6px var(--shadow-color),
+    0 4px 4px rgba(0, 0, 0, 0.8);
+}
 */
 
 /* important easter egg mode */