From cf17b06d9c6b6d78e6961d9be76b3c7231635785 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Sat, 22 Jun 2024 12:40:10 -0300
Subject: content, css: use flex layout to bottom-align commentary dates

If the shadow effect is useful as part of the cue, it needs to
be there every time.

This prevents the main text from entering the same horizontal
column as the date. That's generally OK but can result in a small
main column in "sometime 6/12/2012 - 8/5/2012" shaped dates.
We can try grid or non-binary flex-grow/shrink later, if wanted.
---
 .../dependencies/generateCommentaryEntry.js        | 81 +++++++++++-----------
 1 file changed, 41 insertions(+), 40 deletions(-)

(limited to 'src/content')

diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js
index 01150844..f7f04f16 100644
--- a/src/content/dependencies/generateCommentaryEntry.js
+++ b/src/content/dependencies/generateCommentaryEntry.js
@@ -62,6 +62,47 @@ export default {
               .slot('color', slots.color),
 
           language.encapsulate(entryCapsule, 'title', titleCapsule => [
+            html.tag('span', {class: 'commentary-entry-heading-text'},
+              language.encapsulate(titleCapsule, workingCapsule => {
+                const workingOptions = {};
+
+                workingOptions.artists =
+                  html.tag('span', {class: 'commentary-entry-artists'},
+                    (relations.artistsContent
+                      ? relations.artistsContent.slot('mode', 'inline')
+                   : relations.artistLinks
+                      ? language.formatConjunctionList(relations.artistLinks)
+                      : language.$(titleCapsule, 'noArtists')));
+
+                const accent =
+                  html.tag('span', {class: 'commentary-entry-accent'},
+                    {[html.onlyIfContent]: true},
+
+                    language.encapsulate(titleCapsule, 'accent', accentCapsule =>
+                      language.encapsulate(accentCapsule, workingCapsule => {
+                        const workingOptions = {};
+
+                        if (relations.annotationContent) {
+                          workingCapsule += '.withAnnotation';
+                          workingOptions.annotation =
+                            relations.annotationContent.slot('mode', 'inline');
+                        }
+
+                        if (workingCapsule === accentCapsule) {
+                          return html.blank();
+                        } else {
+                          return language.$(workingCapsule, workingOptions);
+                        }
+                      })));
+
+                if (!html.isBlank(accent)) {
+                  workingCapsule += '.withAccent';
+                  workingOptions.accent = accent;
+                }
+
+                return language.$(workingCapsule, workingOptions);
+              })),
+
             relations.textWithTooltip.slots({
               attributes: {class: 'commentary-date'},
 
@@ -91,46 +132,6 @@ export default {
                       }),
                   }),
             }),
-
-            language.encapsulate(titleCapsule, workingCapsule => {
-              const workingOptions = {};
-
-              workingOptions.artists =
-                html.tag('span', {class: 'commentary-entry-artists'},
-                  (relations.artistsContent
-                    ? relations.artistsContent.slot('mode', 'inline')
-                 : relations.artistLinks
-                    ? language.formatConjunctionList(relations.artistLinks)
-                    : language.$(titleCapsule, 'noArtists')));
-
-              const accent =
-                html.tag('span', {class: 'commentary-entry-accent'},
-                  {[html.onlyIfContent]: true},
-
-                  language.encapsulate(titleCapsule, 'accent', accentCapsule =>
-                    language.encapsulate(accentCapsule, workingCapsule => {
-                      const workingOptions = {};
-
-                      if (relations.annotationContent) {
-                        workingCapsule += '.withAnnotation';
-                        workingOptions.annotation =
-                          relations.annotationContent.slot('mode', 'inline');
-                      }
-
-                      if (workingCapsule === accentCapsule) {
-                        return html.blank();
-                      } else {
-                        return language.$(workingCapsule, workingOptions);
-                      }
-                    })));
-
-              if (!html.isBlank(accent)) {
-                workingCapsule += '.withAccent';
-                workingOptions.accent = accent;
-              }
-
-              return language.$(workingCapsule, workingOptions);
-            }),
           ])),
 
         html.tag('blockquote', {class: 'commentary-entry-body'},
-- 
cgit 1.3.0-6-gf8a5