docs: Add ‹› navigation buttons (#29461)
While visually unintrusive, these navigation links enable proper navigation in readers and extensions like Vimium that rely on rel=next/prev Release Notes: - N/A
This commit is contained in:
parent
d832b8e687
commit
ee74edbbb1
2 changed files with 47 additions and 0 deletions
30
docs/theme/css/chrome.css
vendored
30
docs/theme/css/chrome.css
vendored
|
@ -177,6 +177,36 @@ a > .hljs {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-wrapper {
|
||||||
|
margin-block-start: 50px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--fg) !important;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover {
|
||||||
|
background-color: var(--theme-hover);
|
||||||
|
color: var(--icons-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button i {
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-nav-chapters {
|
.mobile-nav-chapters {
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
17
docs/theme/index.hbs
vendored
17
docs/theme/index.hbs
vendored
|
@ -200,6 +200,23 @@
|
||||||
</div>
|
</div>
|
||||||
{{{ content }}}
|
{{{ content }}}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- Navigation arrows -->
|
||||||
|
<div class="nav-wrapper">
|
||||||
|
<div class="nav-buttons">
|
||||||
|
{{#previous}}
|
||||||
|
<a rel="prev" href="{{link}}" class="nav-button" title="{{title}}" aria-label="Previous chapter">
|
||||||
|
<i class="fa fa-angle-left"></i>
|
||||||
|
</a>
|
||||||
|
{{/previous}}
|
||||||
|
|
||||||
|
{{#next}}
|
||||||
|
<a rel="next" href="{{link}}" class="nav-button" title="{{title}}" aria-label="Next chapter">
|
||||||
|
<i class="fa fa-angle-right"></i>
|
||||||
|
</a>
|
||||||
|
{{/next}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue