content, css: generateContentEntry: float-right date

But like, better this time. It bottom aligns.

2 files changed, 105 insertions, 65 deletions

diff --git a/src/content/dependencies/generateContentEntry.js b/src/content/dependencies/generateContentEntry.js
index 80a155fe..c77f744a 100644
--- a/src/content/dependencies/generateContentEntry.js
+++ b/src/content/dependencies/generateContentEntry.js
@@ -49,58 +49,66 @@ export default {
           !html.isBlank(relations.date) &&
             {class: 'dated'},
 
-          language.encapsulate(entryCapsule, 'title', titleCapsule => [
-            html.tag('span', {class: 'content-entry-heading-text'},
-              language.encapsulate(titleCapsule, workingCapsule => {
-                const workingOptions = {};
-
-                const artists =
-                  html.tag('span', {class: 'content-entry-artists'},
-                    {[html.onlyIfContent]: true},
-
-                    (relations.artistsContent
-                      ? relations.artistsContent.slot('mode', 'inline')
-                   : relations.artistLinks
-                      ? language.formatConjunctionList(relations.artistLinks)
-                      : html.blank()));
-
-                if (!html.isBlank(artists)) {
-                  workingCapsule += '.withArtists';
-                  workingOptions.artists = artists;
-                }
-
-                const annotation =
-                  html.tag('span', {class: 'content-entry-annotation'},
-                    {[html.onlyIfContent]: true},
-
-                    (relations.annotationContent
-                      ? relations.annotationContent.slots({
-                          mode: 'inline',
-                          absorbPunctuationFollowingExternalLinks: false,
-                        })
-                      : html.blank()));
-
-                if (!html.isBlank(annotation)) {
-                  if (html.isBlank(artists)) {
-                    workingCapsule += '.withAnnotation';
-                    workingOptions.annotation = annotation;
-                  } else {
-                    workingCapsule += '.withAccent';
-                    workingOptions.accent =
-                      html.tag('span', {class: 'content-entry-accent'},
-                        language.$(titleCapsule, 'accent.withAnnotation', {annotation}));
-
-                    if (data.isWikiEditorEntry) {
-                      workingCapsule += '.wikiEditor';
-                    }
+          html.tag('span', {class: 'content-entry-heading-inner-box'},
+            language.encapsulate(entryCapsule, 'title', titleCapsule => [
+              html.tags([
+                html.tag('span', {class: 'float-spacer'},
+                  {[html.onlyIfSiblings]: true}),
+
+                relations.date,
+              ]),
+
+              html.tag('span', {class: 'content-entry-heading-text'},
+                language.encapsulate(titleCapsule, workingCapsule => {
+                  const workingOptions = {};
+
+                  const artists =
+                    html.tag('span', {class: 'content-entry-artists'},
+                      {[html.onlyIfContent]: true},
+
+                      (relations.artistsContent
+                        ? relations.artistsContent.slot('mode', 'inline')
+                     : relations.artistLinks
+                        ? language.formatConjunctionList(relations.artistLinks)
+                        : html.blank()));
+
+                  if (!html.isBlank(artists)) {
+                    workingCapsule += '.withArtists';
+                    workingOptions.artists = artists;
+                  }
+
+                  let annotation = html.blank();
+                  if (relations.annotationContent) {
+                    relations.annotationContent.slots({
+                      mode: 'inline',
+                      absorbPunctuationFollowingExternalLinks: false,
+                    });
+
+                    annotation =
+                      html.tag('span', {class: 'content-entry-annotation'},
+                        html.metatag('chunkwrap', {split: ','},
+                          relations.annotationContent));
                   }
-                }
 
-                return language.$(workingCapsule, workingOptions);
-              })),
+                  if (!html.isBlank(annotation)) {
+                    if (html.isBlank(artists)) {
+                      workingCapsule += '.withAnnotation';
+                      workingOptions.annotation = annotation;
+                    } else {
+                      workingCapsule += '.withAccent';
+                      workingOptions.accent =
+                        html.tag('span', {class: 'content-entry-accent'},
+                          language.$(titleCapsule, 'accent.withAnnotation', {annotation}));
+
+                      if (data.isWikiEditorEntry) {
+                        workingCapsule += '.wikiEditor';
+                      }
+                    }
+                  }
 
-            relations.date,
-          ])),
+                  return language.$(workingCapsule, workingOptions);
+                })),
+            ]))),
 
         html.tag('blockquote', {class: 'content-entry-body'},
           slots.color &&
diff --git a/src/static/css/features.css b/src/static/css/features.css
index a1e43e76..4a64dbdf 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -357,6 +357,40 @@
     max-width: 250px;
     margin: 15px 0 10px 20px;
   }
+
+  .content-entry-heading {
+    display: flex;
+
+    margin-left: 15px;
+    margin-right: min(calc(8vw - 35px), 45px);
+    padding-left: calc(5px + 1.25ch);
+    padding-right: 1ch;
+    padding-bottom: 0.2em;
+  }
+
+  .content-entry-heading-inner-box {
+    flex-grow: 1;
+  }
+
+  .content-entry-accent {
+    margin-left: 0.25ch;
+  }
+
+  .content-entry-heading .float-spacer {
+    float: right;
+    display: block;
+    height: calc(100% - 1em);
+
+    /* Width here controls margin (inset) on wrapped lines above the date. */
+    width: 3ch;
+  }
+
+  .content-entry-heading .commentary-date {
+    display: inline-block;
+    float: right;
+    clear: right;
+    margin-left: 1.75ch;
+  }
 }
 
 @layer material {
@@ -369,38 +403,36 @@
   .cover-artwork.commentary-art {
     box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.25) !important;
   }
-}
 
-@layer print {
   .content-entry-heading {
-    margin-left: 15px;
-    padding-left: calc(5px + 1.25ch);
-    text-indent: -1.25ch;
-    margin-right: min(calc(8vw - 35px), 45px);
-    padding-bottom: 0.2em;
-
     border-bottom: 1px solid var(--dim-color);
   }
 
-  .content-entry-accent {
-    margin-left: 0.25ch;
+  .content-entry-heading .hoverable {
+    box-shadow: 1px 2px 6px 5px #04040460;
   }
+}
 
-  .content-entry-heading.dated .content-entry-accent {
-    margin-right: 0.75ch;
+@layer print {
+  .content-entry-heading {
+    text-indent: -1.25ch;
   }
 
   .content-entry-annotation {
     font-style: oblique;
   }
 
-  .content-entry-heading .commentary-date {
-    display: inline-block;
+  .content-entry-annotation .chunkwrap:first-child {
+    /* Cheat. */
+    display: inline;
+  }
+
+  .content-entry-annotation .chunkwrap:nth-child(n + 1) {
     text-indent: 0;
   }
 
-  .content-entry-heading .hoverable {
-    box-shadow: 1px 2px 6px 5px #04040460;
+  .content-entry-heading .commentary-date {
+    text-indent: 0;
   }
 
   .content-entry-body summary {