diff --git a/doc/doc-support/header.html b/doc/doc-support/header.html
new file mode 100644
index 000000000000..1e1d504aa4a3
--- /dev/null
+++ b/doc/doc-support/header.html
@@ -0,0 +1,7 @@
+
diff --git a/doc/doc-support/package.nix b/doc/doc-support/package.nix
index f2c37df39132..728bbe334501 100644
--- a/doc/doc-support/package.nix
+++ b/doc/doc-support/package.nix
@@ -119,6 +119,8 @@ stdenvNoCC.mkDerivation (
--script ./anchor-use.js \
--sidebar-depth 3 \
--nav ./nav.json \
+ --header ${./header.html}\
+ --no-navheader \
manual.md \
out/index.html
diff --git a/doc/style.css b/doc/style.css
index 8b426e72de24..ba0327093d75 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -398,6 +398,7 @@ div.appendix .variablelist .term {
:root {
--sidebar-width: 20rem;
+ --header-height: 3rem;
--background: #fff;
--main-text-color: #000;
--link-color: #405d99;
@@ -528,7 +529,7 @@ nav.toc-sidebar summary {
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
- grid-template-rows: auto minmax(0, 1fr);
+ grid-template-rows: var(--header-height) auto minmax(0, 1fr);
}
body:has(> nav.toc-sidebar) {
@@ -537,7 +538,7 @@ nav.toc-sidebar summary {
.navheader {
grid-column: 1 / -1;
- grid-row: 1;
+ grid-row: 2;
}
nav.toc-sidebar {
@@ -548,7 +549,7 @@ nav.toc-sidebar summary {
/* */
margin: 0;
grid-column: 1;
- grid-row: 2;
+ grid-row: 3;
max-height: none;
overflow-y: auto;
border: none;
@@ -562,7 +563,7 @@ nav.toc-sidebar summary {
main.content {
grid-column: 1 / -1;
- grid-row: 2;
+ grid-row: 3;
overflow-y: auto;
padding: 0 1rem;
}
@@ -571,3 +572,73 @@ nav.toc-sidebar summary {
grid-column: 2;
}
}
+
+.manual-header {
+ background-color: var(--background);
+ border-bottom: 0.0625rem solid #d8d8d8;
+ display: flex;
+ flex-direction: column;
+}
+
+.manual-header--title {
+ order: -1;
+ padding: 0.5rem 1rem 0;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--small-heading-color);
+ text-align: center;
+}
+
+.manual-header--tabs {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-around;
+ margin: 0;
+ padding: 0;
+}
+
+.manual-header--tab {
+ display: flex;
+ align-items: center;
+ padding: 0 1rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--main-text-color);
+ text-decoration: none;
+ border-bottom: 0.1875rem solid transparent;
+ border-top: 0.1875rem solid transparent;
+ transition: border-bottom-color 0.15s ease;
+}
+
+.manual-header--tab:hover {
+ border-bottom-color: var(--heading-color);
+ color: var(--main-text-color);
+}
+
+.manual-header--tab-active {
+ border-bottom-color: var(--heading-color);
+ color: var(--heading-color);
+ font-weight: 700;
+}
+
+@media screen and (min-width: 768px) {
+ .manual-header {
+ height: var(--header-height);
+ flex-direction: row;
+ align-items: stretch;
+ grid-column: 1 / -1;
+ grid-row: 1;
+ }
+
+ .manual-header--title {
+ order: 0;
+ margin-left: auto;
+ padding: 0 1rem;
+ align-self: center;
+ }
+
+ .manual-header--tabs {
+ justify-content: flex-start;
+ padding: 0 1rem;
+ }
+}