content, css: wrap name detail in heading nicely

1 files changed, 7 insertions, 4 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 00e6422b..e49075a1 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -307,15 +307,18 @@ export default {
             [language.onlyIfOptions]: ['title'],
           };
 
-          workingOptions.title = headingNamePart;
+          workingOptions.title =
+            html.tag('span', {class: 'title-part'},
+              headingNamePart);
 
           if (!html.isBlank(slots.titleDetail)) {
             workingCapsule += '.withDetail';
             workingOptions.detailAccent =
               html.tag('span', {class: 'name-detail'},
-                language.$(capsule, 'withDetail.accent', {
-                  detail: slots.titleDetail,
-                }));
+                html.metatag('chunkwrap', {split: ':'},
+                  language.$(capsule, 'withDetail.accent', {
+                    detail: slots.titleDetail,
+                  })));
           }
 
           return language.$(workingCapsule, workingOptions);