authorgravatar for mrpaul@aestheticwisdom.comPaul <mrpaul@aestheticwisdom.com> 2021-08-20 17:02:14+07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2021-08-20 13:02:14+03:00
logddaca728647c85d77706aead2f7e5d83714cb7fc
treec6faecc32f6249f5c0bab8b175843612df928279
parentb3d3e93636800e830a47871cad8d7728c76c1c71
signaturebadge-question-mark Signed by PGP key 4AEE18F83AFDEB23

Make clearer inline code blocks in language reference paragraphs (#9317)

* Make clearer inline code blocks in language reference paragraphs This commit makes the inline code blocks within paragraphs standout against the descriptive text. The code blocks within tables are left un-styled. The line-height of the paragraphs has been set to 1.7 based on recommendations from MDN Web Docs and W3C. The value is unitless based on the recommendation. Closes #9316, #6313 * Make clearer inline code blocks in language reference paragraphs Goal: To improve legibility of inline code blocks in the language reference. This commit alters the styles of code HTML elements in paragraphs, unordered lists, ordered lists, tables, and preformatted text elements. Most of the changes here are taken from suggestions from @dbandstra on GitHub in response to a code review. * p, ul, ol, but not #toc are set to the same line-height * p, ul, ol, and table have the same inline code styles * The inline code background color set to match the preformatted code blocks in the light theme and dark theme. The border colors are adjusted as well. * The preformatted code block font size is set to default. The 12pt setting was removed. The line-height of paragraphs is set to 1.5. This value is chosen based on recommendations from W3C [1] via MDN Web Docs [2] and the contents of the language reference. The MDN Web Docs offers two recommendations: 1. Use a unitless number for line-height. 2. Use a minimum value of 1.5 for main paragraph content. [1] https://www.w3.org/TR/WCAG21/#visual-presentation [2] https://developer.mozilla.org/en-US/docs/Web/CSS/line-height Closes #6313, #9316 * Set language reference line-height and pre code border color This commit is an update to a group of commits with the goal of improving the legibility of the language reference. In this commit, the line-height is now set in the `#contents` ID and reset to normal for preformatted code blocks. This change better separates lines of all main content text for legibility. Closes: #9316, #6313 * Style the language reference code elements This commit sets the style of the HTML code element. Since preformatted code blocks have an overriding style, this is safe to set for all inline code elements.

1 files changed, 14 insertions(+), 3 deletions(-)

doc/langref.html.in+14-3
...@@ -38,15 +38,20 @@...@@ -38,15 +38,20 @@
38 .file {38 .file {
39 text-decoration: underline;39 text-decoration: underline;
40 }40 }
41 pre,code {
42 font-size: 12pt;
43 }
44 pre > code {41 pre > code {
45 display: block;42 display: block;
46 overflow: auto;43 overflow: auto;
47 padding: 0.5em;44 padding: 0.5em;
48 color: #333;45 color: #333;
49 background: #f8f8f8;46 background: #f8f8f8;
47 border: 1px dotted silver;
48 line-height: normal;
49 }
50 code {
51 background-color: #f8f8f8;
52 border: 1px dotted silver;
53 padding-left: 0.3em;
54 padding-right: 0.3em;
50 }55 }
51 .table-wrapper {56 .table-wrapper {
52 width: 100%;57 width: 100%;
...@@ -95,6 +100,7 @@...@@ -95,6 +100,7 @@
95 #contents {100 #contents {
96 max-width: 60em;101 max-width: 60em;
97 margin: auto;102 margin: auto;
103 line-height: 1.5;
98 }104 }
99105
100 #toc {106 #toc {
...@@ -153,6 +159,11 @@...@@ -153,6 +159,11 @@
153 pre > code {159 pre > code {
154 color: #ccc;160 color: #ccc;
155 background: #222;161 background: #222;
162 border-color: #444;
163 }
164 code {
165 background-color: #222;
166 border-color: #444;
156 }167 }
157 .tok-kw {168 .tok-kw {
158 color: #eee;169 color: #eee;