content, css: use :has() to conditionally clear commentary heading

3 files changed, 6 insertions, 16 deletions

diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js
index 9243a89c..c93020f3 100644
--- a/src/content/dependencies/generateCommentaryEntry.js
+++ b/src/content/dependencies/generateCommentaryEntry.js
@@ -51,6 +51,9 @@ export default {
             relations.colorStyle.clone()
               .slot('color', slots.color),
 
+          !html.isBlank(relations.date) &&
+            {class: 'dated'},
+
           language.encapsulate(entryCapsule, 'title', titleCapsule => [
             html.tag('span', {class: 'commentary-entry-heading-text'},
               language.encapsulate(titleCapsule, workingCapsule => {
diff --git a/src/content/dependencies/generateCommentarySection.js b/src/content/dependencies/generateCommentarySection.js
index b5b88372..0be81c3b 100644
--- a/src/content/dependencies/generateCommentarySection.js
+++ b/src/content/dependencies/generateCommentarySection.js
@@ -1,5 +1,3 @@
-import {empty} from '#sugar';
-
 export default {
   contentDependencies: [
     'transformContent',
@@ -18,19 +16,12 @@ export default {
         relation('generateCommentaryEntry', entry)),
   }),
 
-  data: (entries) => ({
-    firstEntryIsDated:
-      (empty(entries)
-        ? null
-        : !!entries[0].date),
-  }),
-
   slots: {
     title: {type: 'html', mutable: false},
     id: {type: 'string', default: 'artist-commentary'},
   },
 
-  generate: (data, relations, slots, {html, language}) =>
+  generate: (relations, slots, {html, language}) =>
     html.tags([
       relations.heading
         .slots({
@@ -39,11 +30,7 @@ export default {
               ? language.$('misc.artistCommentary')
               : slots.title),
 
-          attributes: [
-            {id: slots.id},
-            data.firstEntryIsDated &&
-              {class: 'first-entry-is-dated'},
-          ],
+          attributes: {id: slots.id},
         }),
 
       relations.entries,
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 42d4216f..d20e5695 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1419,7 +1419,7 @@ p.image-details.illustrator-details {
   font-style: oblique;
 }
 
-#artist-commentary.first-entry-is-dated {
+p.content-heading:has(+ .commentary-entry-heading.dated) {
   clear: right;
 }