Skip to content

Commit f36fb31

Browse files
jonels-msftjonels-msft
authored
Improve docs color contrast for accessibility (#674)
* Fix contrast with Citus docs color theme * Make keyboard focus visible on next,prev buttons * Force the latest ver of sphinx and theme * Remove Citus-specific extra styles * app.add_stylesheet has been deprecated * Tell RTD where to find our package/config preferences * Reformat config.py with "black"
1 parent ccb0e6b commit f36fb31

5 files changed

Lines changed: 222 additions & 0 deletions

File tree

‎.readthedocs.yaml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
version: 2
2+
3+
# Build from the docs/ directory with Sphinx
4+
sphinx:
5+
configuration: docs/conf.py
6+
7+
# Explicitly set the version of Python and its requirements
8+
python:
9+
version: 3.7
10+
install:
11+
- requirements: docs/requirements.txt

‎docs/_static/css/citus.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
/* General */
2+
3+
h1,h2,.rst-content .toctree-wrapper p.caption,h3,h4,h5,h6,legend {
4+
font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif !important;
5+
}
6+
7+
.rst-content span.highlighted {
8+
background: #FFC;
9+
}
10+
11+
.btn-fat {
12+
padding: 1em !important;
13+
}
14+
15+
.btn {
16+
border: 1px solid #404040;
17+
}
18+
19+
.btn:focus {
20+
outline: 1px solid;
21+
}
22+
23+
#search-results .context {
24+
color: #404040 !important;
25+
}
26+
27+
a {
28+
color: #2678AF;
29+
}
30+
31+
a.skiplink {
32+
color: #757575;
33+
margin-bottom: 0;
34+
}
35+
36+
.wy-menu-vertical li.current {
37+
border-left: 2px solid;
38+
}
39+
40+
.wy-menu-vertical li.current a {
41+
color: #656565;
42+
}
43+
44+
.wy-menu-vertical li.toctree-l2.current > a,
45+
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a {
46+
color: #555;
47+
z-index: 1;
48+
}
49+
50+
.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a {
51+
color: #4b4b4b;
52+
}
53+
54+
.wy-menu-vertical li span.toctree-expand {
55+
color: #b3b3b3;
56+
}
57+
58+
.wy-table-odd a, .wy-table-striped tr:nth-child(2n-1) a, .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) a {
59+
color: #2575AB;
60+
}
61+
62+
.rst-content tt.literal, .rst-content tt.literal, .rst-content code.literal {
63+
color: #606060;
64+
}
65+
66+
.wy-alert.wy-alert-info .wy-alert-title, .rst-content .note .wy-alert-title, .rst-content .wy-alert-info.attention .wy-alert-title, .rst-content .wy-alert-info.caution .wy-alert-title, .rst-content .wy-alert-info.danger .wy-alert-title, .rst-content .wy-alert-info.error .wy-alert-title, .rst-content .wy-alert-info.hint .wy-alert-title, .rst-content .wy-alert-info.important .wy-alert-title, .rst-content .wy-alert-info.tip .wy-alert-title, .rst-content .wy-alert-info.warning .wy-alert-title, .rst-content .seealso .wy-alert-title, .rst-content .wy-alert-info.admonition-todo .wy-alert-title, .wy-alert.wy-alert-info .rst-content .admonition-title, .rst-content .wy-alert.wy-alert-info .admonition-title, .rst-content .note .admonition-title, .rst-content .wy-alert-info.attention .admonition-title, .rst-content .wy-alert-info.caution .admonition-title, .rst-content .wy-alert-info.danger .admonition-title, .rst-content .wy-alert-info.error .admonition-title, .rst-content .wy-alert-info.hint .admonition-title, .rst-content .wy-alert-info.important .admonition-title, .rst-content .wy-alert-info.tip .admonition-title, .rst-content .wy-alert-info.warning .admonition-title, .rst-content .seealso .admonition-title, .rst-content .wy-alert-info.admonition-todo .admonition-title {
67+
background: #277BB3;
68+
}
69+
70+
.wy-alert.wy-alert-warning .wy-alert-title, .rst-content .wy-alert-warning.note .wy-alert-title, .rst-content .attention .wy-alert-title, .rst-content .caution .wy-alert-title, .rst-content .wy-alert-warning.danger .wy-alert-title, .rst-content .wy-alert-warning.error .wy-alert-title, .rst-content .wy-alert-warning.hint .wy-alert-title, .rst-content .wy-alert-warning.important .wy-alert-title, .rst-content .wy-alert-warning.tip .wy-alert-title, .rst-content .warning .wy-alert-title, .rst-content .wy-alert-warning.seealso .wy-alert-title, .rst-content .admonition-todo .wy-alert-title, .wy-alert.wy-alert-warning .rst-content .admonition-title, .rst-content .wy-alert.wy-alert-warning .admonition-title, .rst-content .wy-alert-warning.note .admonition-title, .rst-content .attention .admonition-title, .rst-content .caution .admonition-title, .rst-content .wy-alert-warning.danger .admonition-title, .rst-content .wy-alert-warning.error .admonition-title, .rst-content .wy-alert-warning.hint .admonition-title, .rst-content .wy-alert-warning.important .admonition-title, .rst-content .wy-alert-warning.tip .admonition-title, .rst-content .warning .admonition-title, .rst-content .wy-alert-warning.seealso .admonition-title, .rst-content .admonition-todo .admonition-title {
71+
background: #B25E14;
72+
}
73+
74+
div.admonition.note a {
75+
color: #2473A7;
76+
}
77+
78+
/* version picker */
79+
80+
.rst-versions .rst-other-versions {
81+
color: #d9d9d9 !important;
82+
}
83+
84+
.rst-other-versions a {
85+
color: #fcfcfc !important;
86+
}
87+
88+
/* code blocks */
89+
90+
.highlight .c1, .highlight .cm {
91+
color: #3F7D8C !important;
92+
}
93+
94+
.highlight .gp {
95+
color: #BD5A08 !important;
96+
}
97+
98+
.highlight .nc, .highlight .nn {
99+
color: #0D7EAF !important;
100+
}
101+
102+
.highlight .no {
103+
color: #2C7DA9 !important;
104+
}
105+
106+
.highlight .nv {
107+
color: #B045CD !important;
108+
}
109+
110+
.highlight .si {
111+
color: #3B7AB8 !important;
112+
}
113+
114+
/* Side menu customization */
115+
116+
.wy-menu-vertical header, .wy-menu-vertical p.caption {
117+
color: #eee;
118+
}
119+
120+
.wy-side-nav-search {
121+
background-color: #2473A7;
122+
}
123+
124+
.wy-side-nav-search > div.version,
125+
.wy-side-nav-search > a.icon-home {
126+
color: white !important;
127+
}
128+
129+
/* Footer */
130+
131+
footer {
132+
color: #404040 !important;
133+
}
134+
135+
footer span.commit code {
136+
color: #404040 !important;
137+
}

‎docs/_static/css/pygments.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.highlight .hll { background-color: #fff }
2+
.highlight { background: #fff; }
3+
.highlight .c { color: #408090; font-style: italic } /* Comment */
4+
.highlight .err { border: 1px solid #FF0000 } /* Error */
5+
.highlight .k { color: #007020; font-weight: bold } /* Keyword */
6+
.highlight .o { color: #666666 } /* Operator */
7+
.highlight .ch { color: #408090; font-style: italic } /* Comment.Hashbang */
8+
.highlight .cm { color: #408090; font-style: italic } /* Comment.Multiline */
9+
.highlight .cp { color: #007020 } /* Comment.Preproc */
10+
.highlight .cpf { color: #408090; font-style: italic } /* Comment.PreprocFile */
11+
.highlight .c1 { color: #408090; font-style: italic } /* Comment.Single */
12+
.highlight .cs { color: #408090; background-color: #fff0f0 } /* Comment.Special */
13+
.highlight .gd { color: #A00000 } /* Generic.Deleted */
14+
.highlight .ge { font-style: italic } /* Generic.Emph */
15+
.highlight .gr { color: #FF0000 } /* Generic.Error */
16+
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
17+
.highlight .gi { color: #00A000 } /* Generic.Inserted */
18+
.highlight .go { color: #333333 } /* Generic.Output */
19+
.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
20+
.highlight .gs { font-weight: bold } /* Generic.Strong */
21+
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
22+
.highlight .gt { color: #0044DD } /* Generic.Traceback */
23+
.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
24+
.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
25+
.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
26+
.highlight .kp { color: #007020 } /* Keyword.Pseudo */
27+
.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
28+
.highlight .kt { color: #902000 } /* Keyword.Type */
29+
.highlight .m { color: #208050 } /* Literal.Number */
30+
.highlight .s { color: #4070a0 } /* Literal.String */
31+
.highlight .na { color: #4070a0 } /* Name.Attribute */
32+
.highlight .nb { color: #007020 } /* Name.Builtin */
33+
.highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
34+
.highlight .no { color: #60add5 } /* Name.Constant */
35+
.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
36+
.highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */
37+
.highlight .ne { color: #007020 } /* Name.Exception */
38+
.highlight .nf { color: #06287e } /* Name.Function */
39+
.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
40+
.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
41+
.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
42+
.highlight .nv { color: #bb60d5 } /* Name.Variable */
43+
.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
44+
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
45+
.highlight .mb { color: #208050 } /* Literal.Number.Bin */
46+
.highlight .mf { color: #208050 } /* Literal.Number.Float */
47+
.highlight .mh { color: #208050 } /* Literal.Number.Hex */
48+
.highlight .mi { color: #208050 } /* Literal.Number.Integer */
49+
.highlight .mo { color: #208050 } /* Literal.Number.Oct */
50+
.highlight .sb { color: #4070a0 } /* Literal.String.Backtick */
51+
.highlight .sc { color: #4070a0 } /* Literal.String.Char */
52+
.highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
53+
.highlight .s2 { color: #4070a0 } /* Literal.String.Double */
54+
.highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
55+
.highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */
56+
.highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
57+
.highlight .sx { color: #c65d09 } /* Literal.String.Other */
58+
.highlight .sr { color: #235388 } /* Literal.String.Regex */
59+
.highlight .s1 { color: #4070a0 } /* Literal.String.Single */
60+
.highlight .ss { color: #517918 } /* Literal.String.Symbol */
61+
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
62+
.highlight .vc { color: #bb60d5 } /* Name.Variable.Class */
63+
.highlight .vg { color: #bb60d5 } /* Name.Variable.Global */
64+
.highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */
65+
.highlight .il { color: #208050 } /* Literal.Number.Integer.Long */

‎docs/conf.py‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,12 @@ def __init__(self, **options):
107107
#
108108
# html_theme_options = {}
109109

110+
# Add our custom CSS
111+
def setup(app):
112+
app.add_css_file("css/citus.css")
113+
app.add_css_file("css/pygments.css")
114+
115+
110116
# Add any paths that contain custom static files (such as style sheets) here,
111117
# relative to this directory. They are copied after the builtin static files,
112118
# so a file named "default.css" will overwrite the builtin "default.css".

‎docs/requirements.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
sphinx == 3.5.4
2+
sphinx_rtd_theme == 0.5.2
3+
readthedocs-sphinx-search==0.1.0

0 commit comments

Comments
 (0)