From e86034ae84c4c275851a27a2950cf2dcbfda589e Mon Sep 17 00:00:00 2001
From: DS
Date: Thu, 14 Mar 2024 03:35:27 -0700
Subject: [PATCH] doc: fix and simplify stylesheets for the manuals, fix nrd
bug
---
doc/default.nix | 3 +-
doc/overrides.css | 22 -
doc/style.css | 492 +++++++++++-------
nixos/doc/manual/default.nix | 2 -
.../src/nixos_render_docs/html.py | 2 +-
.../nixos-render-docs/src/tests/test_html.py | 2 +-
6 files changed, 299 insertions(+), 224 deletions(-)
delete mode 100644 doc/overrides.css
diff --git a/doc/default.nix b/doc/default.nix
index bcbc20b9f983b9b..40cddf3dd7e703e 100644
--- a/doc/default.nix
+++ b/doc/default.nix
@@ -122,13 +122,12 @@ in pkgs.stdenv.mkDerivation {
${pkgs.documentation-highlighter}/mono-blue.css \
${pkgs.documentation-highlighter}/loader.js
- cp -t out ./overrides.css ./style.css
+ cp -t out ./style.css
nixos-render-docs manual html \
--manpage-urls ./manpage-urls.json \
--revision ${pkgs.lib.trivial.revisionWithDefault (pkgs.rev or "master")} \
--stylesheet style.css \
- --stylesheet overrides.css \
--stylesheet highlightjs/mono-blue.css \
--script ./highlightjs/highlight.pack.js \
--script ./highlightjs/loader.js \
diff --git a/doc/overrides.css b/doc/overrides.css
deleted file mode 100644
index 73901a3f543bf92..000000000000000
--- a/doc/overrides.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.docbook .xref img[src^=images\/callouts\/],
-.screen img,
-.programlisting img,
-.literallayout img,
-.synopsis img {
- width: 1em;
-}
-
-.calloutlist img {
- width: 1.5em;
-}
-
-.prompt,
-.screen img,
-.programlisting img,
-.literallayout img,
-.synopsis img {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
diff --git a/doc/style.css b/doc/style.css
index 474dd32e3fb148c..3a8baeb04fac648 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -1,291 +1,391 @@
-/* Copied from http://bakefile.sourceforge.net/, which appears
- licensed under the GNU GPL. */
+html {
+ line-height: 1.15;
+ -webkit-text-size-adjust: 100%;
+}
+body {
+ margin: 0;
+}
-/***************************************************************************
- Basic headers and text:
- ***************************************************************************/
+.book {
+ margin: auto;
+ width: 100%;
+}
-body
-{
- font-family: "Nimbus Sans L", sans-serif;
- font-size: 1em;
- background: white;
- margin: 2em 1em 2em 1em;
+@media screen and (min-width: 768px) {
+ .book {
+ max-width: 46rem;
+ }
}
-h1, h2, h3, h4
-{
- color: #005aa0;
+@media screen and (min-width: 992px) {
+ .book {
+ max-width: 60rem;
+ }
}
-h1 /* title */
-{
- font-size: 200%;
+@media screen and (min-width: 1200px) {
+ .book {
+ max-width: 73rem;
+ }
}
-h2 /* chapters, appendices, subtitle */
-{
- font-size: 180%;
+.book .list-of-examples {
+ display: none;
}
-div.book
-{
- text-align: center;
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
}
-div.book > div
-{
- /*
- * based on https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a
- * we do 70 characters per line to fit code listings better
- * 70 * (font-size / 1.618)
- * expression for emacs:
- * (* 70 (/ 1 1.618))
- */
- max-width: 43.2em;
- text-align: left;
- margin: auto;
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible;
}
-/* Extra space between chapters, appendices. */
-div.chapter > div.titlepage h2, div.appendix > div.titlepage h2
-{
- margin-top: 1.5em;
+pre {
+ font-family: monospace, monospace;
+ font-size: 1em;
}
-div.section > div.titlepage h2 /* sections */
-{
- font-size: 150%;
- margin-top: 1.5em;
+a {
+ background-color: transparent;
}
-h3 /* subsections */
-{
- font-size: 125%;
+strong {
+ font-weight: bolder;
}
-div.simplesect h2
-{
- font-size: 110%;
+code {
+ font-family: monospace, monospace;
+ font-size: 1em;
}
-div.appendix h3
-{
- font-size: 150%;
- margin-top: 1.5em;
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
}
-div.refnamediv h2, div.refsynopsisdiv h2, div.refsection h2 /* refentry parts */
-{
- margin-top: 1.4em;
- font-size: 125%;
+sup {
+ top: -0.5em;
}
-div.refsection h3
-{
- font-size: 110%;
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
}
+pre {
+ overflow: auto;
+}
-/***************************************************************************
- Examples:
- ***************************************************************************/
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
-div.example
-{
- border: 1px solid #b0b0b0;
- padding: 6px 6px;
- margin-left: 1.5em;
- margin-right: 1.5em;
- background: #f4f4f8;
- border-radius: 0.4em;
- box-shadow: 0.4em 0.4em 0.5em #e0e0e0;
+html {
+ font-size: 100%;
+ line-height: 1.77777778;
}
-div.example p.title
-{
- margin-top: 0em;
+@media screen and (min-width: 4000px) {
+ html {
+ background: #000;
+ }
+
+ html body {
+ margin: auto;
+ max-width: 250rem;
+ }
}
-div.example pre
-{
- box-shadow: none;
+@media screen and (max-width: 320px) {
+ html {
+ font-size: calc(16 / 320 * 100vw);
+ }
}
+body {
+ font-size: 1rem;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 300;
+ color: #000000;
+ background-color: #ffffff;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
-/***************************************************************************
- Screen dumps:
- ***************************************************************************/
+@media screen and (max-width: 767.9px) {
+ body {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+}
-pre.screen, pre.programlisting
-{
- border: 1px solid #b0b0b0;
- padding: 3px 3px;
- margin-left: 0.5em;
- margin-right: 0.5em;
+a {
+ text-decoration: none;
+ border-bottom: 1px solid;
+ color: #405d99;
+}
- background: #f4f4f8;
- font-family: monospace;
- border-radius: 0.4em;
- box-shadow: 0.4em 0.4em 0.5em #e0e0e0;
+ul {
+ padding: 0;
+ margin-top: 0;
+ margin-right: 0;
+ margin-bottom: 1rem;
+ margin-left: 1rem;
}
-div.example pre.programlisting
-{
- border: 0px;
- padding: 0 0;
- margin: 0 0 0 0;
+table {
+ border-collapse: collapse;
+ width: 100%;
+ margin-bottom: 1rem;
}
-/***************************************************************************
- Notes, warnings etc:
- ***************************************************************************/
+thead th {
+ text-align: left;
+}
-.note, .warning
-{
- border: 1px solid #b0b0b0;
- padding: 3px 3px;
- margin-left: 1.5em;
- margin-right: 1.5em;
- margin-bottom: 1em;
- padding: 0.3em 0.3em 0.3em 0.3em;
- background: #fffff5;
- border-radius: 0.4em;
- box-shadow: 0.4em 0.4em 0.5em #e0e0e0;
+hr {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
-div.note, div.warning
-{
- font-style: italic;
+h1 {
+ font-weight: 800;
+ line-height: 110%;
+ font-size: 250%;
+ margin-bottom: 1rem;
+ color: #6586c8;
}
-div.note h3, div.warning h3
-{
- color: red;
- font-size: 100%;
- padding-right: 0.5em;
- display: inline;
+h2 {
+ font-weight: 800;
+ line-height: 110%;
+ font-size: 200%;
+ margin-bottom: 0.625rem;
+ color: #6586c8;
}
-div.note p, div.warning p
-{
- margin-bottom: 0em;
+h2:not(:first-child) {
+ margin-top: 1rem;
}
-div.note h3 + p, div.warning h3 + p
-{
- display: inline;
+h3 {
+ font-weight: 800;
+ line-height: 110%;
+ margin-bottom: 1rem;
+ font-size: 150%;
+ color: #6586c8;
}
-div.note h3
-{
- color: blue;
- font-size: 100%;
+h4 {
+ font-weight: 800;
+ line-height: 110%;
+ margin-bottom: 1rem;
+ font-size: 140%;
+ color: #6586c8;
}
-div.navfooter *
-{
- font-size: 90%;
+h5 {
+ font-weight: 800;
+ line-height: 110%;
+ margin-bottom: 1rem;
+ font-size: 130%;
+ color: #6a6a6a;
}
+h6 {
+ font-weight: 800;
+ line-height: 110%;
+ margin-bottom: 1rem;
+}
-/***************************************************************************
- Links colors and highlighting:
- ***************************************************************************/
+strong {
+ font-weight: bold;
+}
-a { text-decoration: none; }
-a:hover { text-decoration: underline; }
-a:link { color: #0048b3; }
-a:visited { color: #002a6a; }
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+dt>*:first-child,
+dd>*:first-child {
+ margin-top: 0;
+}
-/***************************************************************************
- Table of contents:
- ***************************************************************************/
+dt>*:last-child,
+dd>*:last-child {
+ margin-bottom: 0;
+}
-div.toc
-{
- font-size: 90%;
+pre,
+code {
+ font-family: monospace;
}
-div.toc dl
-{
- margin-top: 0em;
- margin-bottom: 0em;
+code {
+ color: #ff8657;
+ background: #f4f4f4;
+ display: inline-block;
+ padding: 0 0.5rem;
+ border: 1px solid #d8d8d8;
+ border-radius: 0.5rem;
+ line-height: 1.57777778;
}
+div.book .programlisting {
+ border-radius: 1.25rem;
+ padding: 1rem;
+ overflow: auto;
+}
-/***************************************************************************
- Special elements:
- ***************************************************************************/
+div.book .programlisting {
+ background: #f2f8fd;
+ color: #000000;
+ box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1) inset;
+}
-tt, code
-{
- color: #400000;
+div.book .note,
+div.book .tip,
+div.book .warning,
+div.book .caution,
+div.book .important {
+ margin-bottom: 1rem;
+ border-radius: 1.25rem;
+ padding: 1.5rem;
+ overflow: auto;
+ background: #f4f4f4;
}
-.term
-{
- font-weight: bold;
+div.book .note>.title,
+div.book .tip>.title,
+div.book .warning>.title,
+div.book .caution>.title,
+div.book .important>.title {
+ font-weight: 800;
+ /* font-family: 'Overpass', serif; */
+ line-height: 110%;
+ margin-bottom: 1rem;
+ color: inherit;
+ margin-bottom: 0;
+}
+div.book .note> :first-child,
+div.book .tip> :first-child,
+div.book .warning> :first-child,
+div.book .caution> :first-child,
+div.book .important> :first-child {
+ margin-top: 0;
}
-div.variablelist dd p, div.glosslist dd p
-{
- margin-top: 0em;
+div.book .note> :last-child,
+div.book .tip> :last-child,
+div.book .warning> :last-child,
+div.book .caution> :last-child,
+div.book .important> :last-child {
+ margin-bottom: 0;
}
-div.variablelist dd, div.glosslist dd
-{
- margin-left: 1.5em;
+div.book .note,
+div.book .tip {
+ color: #5277c3;
+ background: #f2f8fd;
}
-div.glosslist dt
-{
- font-style: italic;
+div.book .warning,
+div.book .caution {
+ color: #cc3900;
+ background-color: #fff5e1;
}
-.varname
-{
- color: #400000;
+div.book .section {
+ margin-top: 2em;
}
-span.command strong
-{
- font-weight: normal;
- color: #400000;
+div.book div.example {
+ margin-top: 1.5em;
}
-div.calloutlist table
-{
- box-shadow: none;
+div.book br.example-break {
+ display: none;
}
-table
-{
- border-collapse: collapse;
- box-shadow: 0.4em 0.4em 0.5em #e0e0e0;
+div.book div.footnotes>hr {
+ border-color: #d8d8d8;
}
-table.simplelist
-{
- text-align: left;
- color: #005aa0;
+div.book div.footnotes>br {
+ display: none;
+}
+
+div.book dt {
+ margin-top: 1em;
+}
+
+div.book .toc dt {
+ margin-top: 0;
+}
+
+div.book .list-of-examples dt {
+ margin-top: 0;
+}
+
+div.book code {
+ padding: 0;
border: 0;
- padding: 5px;
- background: #fffff5;
- font-weight: normal;
- font-style: italic;
- box-shadow: none;
- margin-bottom: 1em;
+ background-color: inherit;
+ color: inherit;
+ font-size: 100%;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ hyphens: none;
+}
+
+div.book div.toc {
+ margin-bottom: 3em;
+ border-bottom: 0.0625rem solid #d8d8d8;
+}
+
+div.book div.toc dd {
+ margin-left: 2em;
+}
+
+div.book span.command {
+ font-family: monospace;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ hyphens: none;
+}
+
+div.book .informaltable th,
+div.book .informaltable td {
+ padding: 0.5rem;
+}
+
+div.book h1 {
+ font-size: 200%;
+ margin-bottom: 0.625rem;
}
-div.navheader table, div.navfooter table {
- box-shadow: none;
+div.book h2 {
+ font-size: 150%;
+ margin-bottom: 1rem;
}
-div.affiliation
-{
- font-style: italic;
+div.book h3 {
+ font-size: 140%;
}
+
+div.book h4 {
+ font-size: 130%;
+ color: #6a6a6a;
+}
\ No newline at end of file
diff --git a/nixos/doc/manual/default.nix b/nixos/doc/manual/default.nix
index a368b16201f8f98..cf9dcb482760677 100644
--- a/nixos/doc/manual/default.nix
+++ b/nixos/doc/manual/default.nix
@@ -105,7 +105,6 @@ in rec {
mkdir -p $dst
cp ${../../../doc/style.css} $dst/style.css
- cp ${../../../doc/overrides.css} $dst/overrides.css
cp -r ${pkgs.documentation-highlighter} $dst/highlightjs
${prepareManualFromMD}
@@ -115,7 +114,6 @@ in rec {
--revision ${lib.escapeShellArg revision} \
--generator "nixos-render-docs ${lib.version}" \
--stylesheet style.css \
- --stylesheet overrides.css \
--stylesheet highlightjs/mono-blue.css \
--script ./highlightjs/highlight.pack.js \
--script ./highlightjs/loader.js \
diff --git a/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py b/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
index b9227814dea2087..2cc462f017b6c02 100644
--- a/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
+++ b/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
@@ -163,7 +163,7 @@ def attr_span_begin(self, token: Token, tokens: Sequence[Token], i: int) -> str:
# keycap-styled spans.
(id_part, class_part) = ("", "")
if s := token.attrs.get('id'):
- id_part = f''
+ id_part = f''
if s := token.attrs.get('class'):
if s == 'keycap':
class_part = ''
diff --git a/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py b/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py
index fba0ce2679a411e..e5aaac627296e4e 100644
--- a/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py
+++ b/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py
@@ -167,7 +167,7 @@ def test_full() -> None:
man(1)
reference
- some nested anchors
+ some nested anchors
emph␣
strong␣