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:
Oleksiy Syvokon 2025-04-26 09:52:02 +03:00 committed by GitHub
parent d832b8e687
commit ee74edbbb1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 0 deletions

View file

@ -177,6 +177,36 @@ a > .hljs {
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 {
font-size: 2.5em;
text-align: center;

17
docs/theme/index.hbs vendored
View file

@ -200,6 +200,23 @@
</div>
{{{ content }}}
</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>