diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2024-06-22 12:40:10 -0300 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2024-06-23 21:10:18 -0300 |
commit | cf17b06d9c6b6d78e6961d9be76b3c7231635785 (patch) | |
tree | ca544c6163c0d5cd900afba2b29963df47c5330a /src/content | |
parent | bb22ec56ac787383496d0d2b5f047f186e987b61 (diff) |
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.
Diffstat (limited to 'src/content')
-rw-r--r-- | src/content/dependencies/generateCommentaryEntry.js | 81 |
1 files changed, 41 insertions, 40 deletions
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'}, |