2 files changed, 118 insertions, 10 deletions

diff --git a/src/static/client.js b/src/static/client.js
index efae8501..2f0b6aee 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -216,6 +216,7 @@ fetch(rebase('data.json', 'rebaseShared'))
 
 // Data & info card ---------------------------------------
 
+/*
 const NORMAL_HOVER_INFO_DELAY = 750;
 const FAST_HOVER_INFO_DELAY = 250;
 const END_FAST_HOVER_DELAY = 500;
@@ -444,6 +445,7 @@ function addInfoCardLinkHandlers(type) {
 if (localStorage.tryInfoCards) {
   addInfoCardLinkHandlers('track');
 }
+*/
 
 // Custom hash links --------------------------------------
 
@@ -559,6 +561,7 @@ function prepareStickyHeadings() {
   } of stickyHeadingInfo) {
     const coverRevealImage = contentCover?.querySelector('.reveal');
     if (coverRevealImage) {
+      stickyCover.classList.add('content-sticky-heading-cover-needs-reveal');
       coverRevealImage.addEventListener('hsmusic-reveal', () => {
         stickyCover.classList.remove('content-sticky-heading-cover-needs-reveal');
       });
@@ -643,11 +646,17 @@ updateStickyHeading();
 // Image overlay ------------------------------------------
 
 function addImageOverlayClickHandlers() {
+  const container = document.getElementById('image-overlay-container');
+
+  if (!container) {
+    console.warn(`#image-overlay-container missing, image overlay module disabled.`);
+    return;
+  }
+
   for (const img of document.querySelectorAll('.image-link')) {
     img.addEventListener('click', handleImageLinkClicked);
   }
 
-  const container = document.getElementById('image-overlay-container');
   const actionContainer = document.getElementById('image-overlay-action-container');
 
   container.addEventListener('click', handleContainerClicked);
@@ -861,3 +870,37 @@ function loadImage(imageUrl, onprogress) {
     xhr.send();
   });
 }
+
+// Group contributions table ------------------------------
+
+const groupContributionsTableInfo =
+  Array.from(document.querySelectorAll('#content dl'))
+    .filter(dl => dl.querySelector('a.group-contributions-sort-button'))
+    .map(dl => ({
+      sortingByCountLink: dl.querySelector('dt.group-contributions-sorted-by-count a.group-contributions-sort-button'),
+      sortingByDurationLink: dl.querySelector('dt.group-contributions-sorted-by-duration a.group-contributions-sort-button'),
+      sortingByCountElements: dl.querySelectorAll('.group-contributions-sorted-by-count'),
+      sortingByDurationElements: dl.querySelectorAll('.group-contributions-sorted-by-duration'),
+    }));
+
+function sortGroupContributionsTableBy(info, sort) {
+  const [showThese, hideThese] =
+    (sort === 'count'
+      ? [info.sortingByCountElements, info.sortingByDurationElements]
+      : [info.sortingByDurationElements, info.sortingByCountElements]);
+
+  for (const element of showThese) element.classList.add('visible');
+  for (const element of hideThese) element.classList.remove('visible');
+}
+
+for (const info of groupContributionsTableInfo) {
+  info.sortingByCountLink.addEventListener('click', evt => {
+    evt.preventDefault();
+    sortGroupContributionsTableBy(info, 'duration');
+  });
+
+  info.sortingByDurationLink.addEventListener('click', evt => {
+    evt.preventDefault();
+    sortGroupContributionsTableBy(info, 'count');
+  });
+}
diff --git a/src/static/site3.css b/src/static/site4.css
index 3ebe782d..6a23ff40 100644
--- a/src/static/site3.css
+++ b/src/static/site4.css
@@ -433,11 +433,15 @@ a:hover {
   text-decoration: underline;
 }
 
-.nav-main-links > span {
+a.current {
+  font-weight: 800;
+}
+
+.nav-main-links > span > span {
   white-space: nowrap;
 }
 
-.nav-main-links > span > a.current {
+.nav-main-links > span.current > span.nav-link-content > a {
   font-weight: 800;
 }
 
@@ -447,7 +451,7 @@ a:hover {
   font-weight: 800;
 }
 
-.nav-links-hierarchy > span:not(:first-child):not(.no-divider)::before {
+.nav-links-hierarchical > span:not(:first-child):not(.no-divider)::before {
   content: "\0020/\0020";
 }
 
@@ -643,12 +647,29 @@ p code {
   font-weight: 800;
 }
 
-blockquote {
+#content blockquote {
   margin-left: 40px;
   max-width: 600px;
   margin-right: 0;
 }
 
+#content blockquote blockquote {
+  margin-left: 10px;
+  padding-left: 10px;
+  margin-right: 20px;
+  border-left: dotted 1px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+#content blockquote blockquote > :first-child {
+  margin-top: 0;
+}
+
+#content blockquote blockquote > :last-child {
+  margin-bottom: 0;
+}
+
 main.long-content .main-content-container,
 main.long-content > h1 {
   padding-left: 12%;
@@ -718,6 +739,25 @@ li > ul {
   margin-top: 5px;
 }
 
+.group-contributions-table {
+  display: inline-block;
+}
+
+.group-contributions-table .group-contributions-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.group-contributions-table .group-contributions-metrics {
+  margin-left: 1.5ch;
+  white-space: nowrap;
+}
+
+.group-contributions-sorted-by-count:not(.visible),
+.group-contributions-sorted-by-duration:not(.visible) {
+  display: none;
+}
+
 /* Images */
 
 .image-container {
@@ -752,6 +792,11 @@ li > ul {
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
 }
 
+.image-inner-area {
+  width: 100%;
+  height: 100%;
+}
+
 img {
   object-fit: cover;
 }
@@ -832,11 +877,6 @@ img {
   margin-bottom: auto;
 }
 
-.grid-item span {
-  overflow-wrap: break-word;
-  hyphens: auto;
-}
-
 .grid-item:hover {
   text-decoration: none;
 }
@@ -847,6 +887,8 @@ img {
 
 .grid-item > span {
   display: block;
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 
 .grid-item > span:not(:first-child) {
@@ -857,6 +899,11 @@ img {
   margin-top: 6px;
 }
 
+.grid-item > span:not(:first-of-type) {
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+
 .grid-item:hover > span:first-of-type {
   text-decoration: underline;
 }
@@ -1358,6 +1405,24 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   contain: paint;
 }
 
+/* Sticky sidebar */
+
+.sidebar-column.sidebar.sticky-column,
+.sidebar-column.sidebar.sticky-last,
+.sidebar-multiple.sticky-last > .sidebar:last-child,
+.sidebar-multiple.sticky-column {
+  position: sticky;
+  top: 10px;
+}
+
+.sidebar-multiple.sticky-last {
+  align-self: stretch;
+}
+
+.sidebar-multiple.sticky-column {
+  align-self: flex-start;
+}
+
 /* Image overlay */
 
 #image-overlay-container {