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.

1 files changed, 14 insertions, 4 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index ede644a4..592114cb 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1180,22 +1180,32 @@ ul.image-details li {
 }
 
 .commentary-entry-heading {
+  display: flex;
+  flex-direction: row;
+
   margin-left: 15px;
-  padding-left: calc(5px + 1.25ch);
-  text-indent: -1.25ch;
+  padding-left: 5px;
   max-width: 625px;
   padding-bottom: 0.2em;
+
   border-bottom: 1px solid var(--dim-color);
 }
 
+.commentary-entry-heading-text {
+  flex-grow: 1;
+  padding-left: 1.25ch;
+  text-indent: -1.25ch;
+}
+
 .commentary-entry-accent {
   font-style: oblique;
 }
 
 .commentary-entry-heading .commentary-date {
-  float: right;
-  text-indent: 0;
+  flex-shrink: 0;
+
   margin-left: 0.75ch;
+  align-self: flex-end;
 }
 
 .commentary-entry-heading .commentary-date time {