diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2023-12-29 19:46:47 -0400 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2024-03-16 13:30:32 -0300 |
commit | 342fdf2efd3584480ae3d26c53063030aa32f391 (patch) | |
tree | 565d407c63b3a8ba5b7f0a25678532fd9901467b /src | |
parent | d016c4c40a5da5f452acb0a5e1c23636ab8a2e88 (diff) |
content, css: refactor nav css, use full width if link wraps inside
Diffstat (limited to 'src')
-rw-r--r-- | src/content/dependencies/generatePageLayout.js | 30 | ||||
-rw-r--r-- | src/static/site6.css | 14 |
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"; } |