mirrors/mdBook
1
0
Fork 0
mirror of https://github.com/rust-lang/mdBook.git synced 2025-12-27 10:16:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Rework the look of the header navigation

Browse Source 
This updates the header navigation so that:

- Added a colored bar to break it apart from the chapter navigation.
- Removed the colored circle and just use link color to make it
  look cleaner.
This commit is contained in:
Eric Huss
2025-10-21 14:50:43 -07:00
parent 51a80febb3
commit 58af25384d
4 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
crates/mdbook-html/front-end/css/chrome.css
View File

@@ -624,6 +624,20 @@ html:not(.sidebar-resizing) .sidebar {
transform: rotate(90deg);
}
.chapter a.current-header {
color: var(--sidebar-active);
}
.on-this-page {
margin-left: 22px;
border-inline-start: 4px solid var(--sidebar-header-border-color);
padding-left: 8px;
}
.on-this-page > ol {
padding-left: 0;
}
/* Horizontal line in chapter list. */
.spacer {
width: 100%;
@@ -735,20 +749,3 @@ html:not(.sidebar-resizing) .sidebar {
/* mdbook's margin for h2 is way too large. */
margin: 10px;
}
.current-header {
/* Allows the circle positioning. */
position: relative
}
/* Places a circle just before the current header in the sidebar. */
.current-header::before {
content: '';
position: absolute;
left: -16px;
margin-top: 10px;
width: 8px;
height: 8px;
background-color: var(--sidebar-active);
border-radius: 50%;
}

12
crates/mdbook-html/front-end/css/variables.css
View File

@@ -73,6 +73,8 @@
--blockquote-important-color: #d3abff;
--blockquote-warning-color: #f0b72f;
--blockquote-caution-color: #f21424;
--sidebar-header-border-color: #c18639;
}
.coal {
@@ -132,6 +134,8 @@
--blockquote-important-color: #ab7df8;
--blockquote-warning-color: #d29922;
--blockquote-caution-color: #d91b29;
--sidebar-header-border-color: #3473ad;
}
.light, html:not(.js) {
@@ -191,6 +195,8 @@
--blockquote-important-color: #8250df;
--blockquote-warning-color: #9a6700;
--blockquote-caution-color: #b52731;
--sidebar-header-border-color: #6e6edb;
}
.navy {
@@ -250,6 +256,8 @@
--blockquote-important-color: #ab7df8;
--blockquote-warning-color: #d29922;
--blockquote-caution-color: #f21424;
--sidebar-header-border-color: #2f6ab5;
}
.rust {
@@ -307,6 +315,8 @@
--blockquote-important-color: #8250df;
--blockquote-warning-color: #603700;
--blockquote-caution-color: #aa1721;
--sidebar-header-border-color: #8c391f;
}
@media (prefers-color-scheme: dark) {
@@ -367,5 +377,7 @@
--blockquote-important-color: #ab7df8;
--blockquote-warning-color: #d29922;
--blockquote-caution-color: #d91b29;
--sidebar-header-border-color: #3473ad;
}
}

5
crates/mdbook-html/front-end/templates/toc.js.hbs
View File

@@ -424,8 +424,11 @@ window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox)
currentParent.ol.appendChild(li);
}
const onThisPage = document.createElement('div');
onThisPage.classList.add('on-this-page');
onThisPage.append(stack[0].ol);
const activeItemSpan = activeSection.parentElement;
activeItemSpan.after(stack[0].ol);
activeItemSpan.after(onThisPage);
});
document.addEventListener('DOMContentLoaded', reloadCurrentHeader);

3
tests/gui/heading-nav-unusual-levels.goml
View File

@@ -3,5 +3,4 @@
set-window-size: (1400, 800)
go-to: |DOC_PATH| + "heading-nav/unusual-heading-levels.html"
assert-property: ("//a[@href='unusual-heading-levels.html']/../following-sibling::ol", {"innerHTML": '<ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-3" class="header-in-summary current-header">Heading 3</a></span></li></ol><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-2" class="header-in-summary">Heading 2</a></span><ol class="section"><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-5" class="header-in-summary">Heading 5</a></span></li><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-51" class="header-in-summary">Heading 5.1</a></span></li></ol></ol></li>'})
assert-property: ("//a[@href='unusual-heading-levels.html']/../following-sibling::div", {"innerHTML": '<ol class="section"><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-3" class="header-in-summary current-header">Heading 3</a></span></li></ol><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-2" class="header-in-summary">Heading 2</a></span><ol class="section"><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-5" class="header-in-summary">Heading 5</a></span></li><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-51" class="header-in-summary">Heading 5.1</a></span></li></ol></ol></li></ol>'})