diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/content/dependencies/generateContentEntry.js | 106 | ||||
| -rw-r--r-- | src/static/css/features.css | 64 |
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 { |