From b8e612f9723ef1b890a1af8745e3f165220ce9d1 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 7 Nov 2023 20:31:57 -0400 Subject: content, client, css: accents in content headings --- src/content/dependencies/generateContentHeading.js | 26 +++++++++++++++++++--- src/static/client2.js | 4 ++++ src/static/site5.css | 6 +++++ 3 files changed, 33 insertions(+), 3 deletions(-) (limited to 'src') 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; } -- cgit 1.3.0-6-gf8a5