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 @@ +
+ + Nixpkgs Reference Manual +
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; + } +}