From 833af31e7b83784e1bdfb49a43974810a9ee3dd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20=C5=A0pa=C4=8Dek?= Date: Fri, 6 May 2022 18:44:15 +0200 Subject: [PATCH] ARM style change: render literals in black color After enormous amount of bikesheding about colors we decided to override ReadTheDocs default style for literals (``literal`` in the RST markup). Justification: - The default RTD "light red literal on white background" is hard to read. https://webaim.org/resources/contrastchecker/ reports that text colored as rgb(231, 76, 60) on white background has insufficient contrast. - The ARM has enormous amount of literals all over the place and thus one sentence can contain several black/red/black color changes. This is distracting. As a consequence, the ARM looks like a Geronimo Stilton book. What we experimented with as replacements for red: - Green - way too distracting - Blue - too similar to "usual clickable link" - Violet - too Geronimo Stilton style - Brown - better but still distracting After all the bikesheding we settled on black, i.e. the same as all "normal" text. I.e. the color is now the same and literals are denoted by monospaced font and a box around the literal. This has best contrast and is way less distracting than it used to be. This lead to a new problem: Internal references to "term definitions" defined using directives like .. option:: were rendered almost the same as literals: - References: monospaced + box + bold + clickable - Literals: monospaced + box To distinguish these two we added black dotted underline to clickable references. I hereby declare the bikeshed painted. --- doc/arm/_static/custom.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/doc/arm/_static/custom.css b/doc/arm/_static/custom.css index e81d66d321..86f030fd3c 100644 --- a/doc/arm/_static/custom.css +++ b/doc/arm/_static/custom.css @@ -15,3 +15,11 @@ information regarding copyright ownership. .wy-table-responsive table td { white-space:normal; } + +/* readability improvements */ +.rst-content code.literal { + color: black; +} +.rst-content code.xref { + text-decoration: underline dotted gray; +}