content, client, css: accents in content headings

3 files changed, 33 insertions, 3 deletions

diff --git a/src/content/dependencies/generateContentHeading.js b/src/content/dependencies/generateContentHeading.js
index ccaf1076..56f68cb3 100644
--- a/src/content/dependencies/generateContentHeading.js
+++ b/src/content/dependencies/generateContentHeading.js
@@ -1,19 +1,39 @@
 export default {
   extraDependencies: ['html'],
+  contentDependencies: ['generateColorStyleVariables'],
+
+  relations: (relation) => ({
+    colorVariables: relation('generateColorStyleVariables'),
+  }),
 
   slots: {
     title: {type: 'html'},
+    accent: {type: 'html'},
+
+    color: {validate: v => v.isColor},
+
     id: {type: 'string'},
     tag: {type: 'string', default: 'p'},
   },
 
-  generate(slots, {html}) {
+  generate(relations, slots, {html}) {
     return html.tag(slots.tag,
       {
         class: 'content-heading',
         id: slots.id,
         tabindex: '0',
-      },
-      slots.title);
+
+        style:
+          slots.color &&
+            relations.colorVariables
+              .slot('color', slots.color)
+              .content,
+      }, [
+        slots.title,
+
+        html.tag('span',
+          {[html.onlyIfContent]: true, class: 'content-heading-accent'},
+          slots.accent),
+      ]);
   }
 }
diff --git a/src/static/client2.js b/src/static/client2.js
index 28882a88..0ec052bd 100644
--- a/src/static/client2.js
+++ b/src/static/client2.js
@@ -879,6 +879,10 @@ function updateStickySubheadingContent(index) {
     }
 
     for (const child of closestHeading.childNodes) {
+      if (child.classList?.contains('content-heading-accent')) {
+        continue;
+      }
+
       if (child.tagName === 'A') {
         for (const grandchild of child.childNodes) {
           stickySubheading.appendChild(grandchild.cloneNode(true));
diff --git a/src/static/site5.css b/src/static/site5.css
index 0eb7dcda..afce9b0f 100644
--- a/src/static/site5.css
+++ b/src/static/site5.css
@@ -1275,6 +1275,12 @@ html[data-url-key="localized.home"] .carousel-container {
   animation-delay: 125ms;
 }
 
+.content-heading .content-heading-accent {
+  font-weight: normal;
+  font-size: 1rem;
+  margin-left: 0.25em;
+}
+
 h3.content-heading {
   clear: both;
 }