content, css: refactor nav css, use full width if link wraps inside

2 files changed, 27 insertions, 17 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 76d07c40..9e9b4615 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -368,24 +368,34 @@ export default {
                       break;
                   }
 
-                  content =
-                    html.tag('a', {href}, title);
+                  content = html.tag('a',
+                    {href},
+                    title);
                 }
 
+                const showAsCurrent =
+                  cur.current ||
+                  cur.auto === 'current' ||
+                  (slots.navLinkStyle === 'hierarchical' &&
+                    i === slots.navLinks.length - 1);
+
                 return (
-                  html.tag('span',
-                    cur.current &&
+                  html.tag('span', {class: 'nav-link'},
+                    showAsCurrent &&
                       {class: 'current'},
 
-                    cur.auto === 'current' &&
-                      {class: 'current'},
-
-                    slots.navLinkStyle === 'hierarchical' &&
-                    i === slots.navLinks.length - 1 &&
-                      {class: 'current'},
+                    i > 0 &&
+                      {class: 'has-divider'},
 
                     [
                       html.tag('span', {class: 'nav-link-content'},
+                        // Use inline-block styling on the content span,
+                        // rather than wrapping the whole nav-link in a proper
+                        // blockwrap, so that if the content spans multiple
+                        // lines, it'll kick the accent down beneath it.
+                        i > 0 &&
+                          {class: 'blockwrap'},
+
                         content),
 
                       html.tag('span', {class: 'nav-link-accent'},
diff --git a/src/static/site6.css b/src/static/site6.css
index 6be1ddc5..b16b0a6f 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -468,21 +468,21 @@ a:not([href]):hover {
   text-decoration: none;
 }
 
-.nav-main-links > span > span {
-  white-space: nowrap;
+.nav-main-links .nav-link.current > span.nav-link-content > a {
+  font-weight: 800;
 }
 
-.nav-main-links > span.current > span.nav-link-content > a {
-  font-weight: 800;
+.nav-main-links .nav-link-accent {
+  display: inline-block;
 }
 
-.nav-links-index > span:not(:first-child):not(.no-divider)::before,
-.nav-links-groups > span:not(:first-child):not(.no-divider)::before {
+.nav-links-index .nav-link.has-divider::before,
+.nav-links-groups .nav-link.has-divider::before {
   content: "\0020\00b7\0020";
   font-weight: 800;
 }
 
-.nav-links-hierarchical > span:not(:first-child):not(.no-divider)::before {
+.nav-links-hierarchical .nav-link.has-divider::before {
   content: "\0020/\0020";
 }