From 342fdf2efd3584480ae3d26c53063030aa32f391 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Fri, 29 Dec 2023 19:46:47 -0400
Subject: content, css: refactor nav css, use full width if link wraps inside

---
 src/content/dependencies/generatePageLayout.js | 30 +++++++++++++++++---------
 1 file changed, 20 insertions(+), 10 deletions(-)

(limited to 'src/content/dependencies')

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'},
-- 
cgit 1.3.0-6-gf8a5