Skip to content

Commit 0946be2

Browse files
annavikscottclowe
annavik
authored and
scottclowe
committed
DOC: Update custom.css to improve look.
Further in line with bioscan-browser styles.
1 parent c3241f7 commit 0946be2

File tree

1 file changed

+142
-21
lines changed

1 file changed

+142
-21
lines changed

‎docs/source/_static/css/custom.css‎

Lines changed: 142 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,167 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
22

3+
/* Color scheme */
34
body {
4-
font-family: "Source Sans 3",Lato,proxima-nova,Helvetica Neue,Arial,sans-serif;
5+
--color-white: #fff;
6+
--color-gray-50: #f9fafb;
7+
--color-gray-200: #e5e7eb;
8+
--color-gray-500: #6b7280;
9+
--color-gray-800: #1f2937;
10+
--color-gray-700: #374151;
11+
--color-emerald-50: #ecfdf5;
12+
--color-emerald-500: #10b981;
13+
--color-emerald-700: #047857;
14+
--color-sky-500: #0ea5e9;
15+
--color-sky-800: #075985;
16+
}
17+
18+
/* Typography */
19+
body {
20+
color: var(--color-gray-800);
21+
font-family: "Source Sans 3", Lato, sans-serif;
22+
font-weight: 400;
523
}
624

7-
.rst-content .toctree-wrapper>p.caption,
825
h1,
926
h2,
1027
h3,
1128
h4,
1229
h5,
1330
h6,
1431
legend {
15-
font-family:Montserrat,Roboto Slab,ff-tisa-web-pro,Georgia,Arial,sans-serif
32+
color: var(--color-sky-800);
33+
font-family: "Montserrat", Roboto Slab, serif;
34+
font-weight: 700;
1635
}
1736

1837
.highlight pre {
19-
font-family: "Source Code Pro",SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,Courier,monospace;
38+
font-family: "Source Code Pro", SFMono-Regular, monospace;
39+
font-weight: 400;
40+
}
41+
42+
a {
43+
color: var(--color-sky-800) !important;
44+
font-weight: 500;
45+
text-underline-offset: 4px;
46+
47+
&:hover {
48+
text-decoration: underline;
49+
}
50+
}
51+
52+
footer {
53+
color: var(--color-gray-500);
54+
}
55+
56+
.wy-menu-vertical p.caption {
57+
color: var(--color-gray-500);
58+
}
59+
60+
.wy-nav-top,
61+
.wy-nav-top a,
62+
.wy-side-nav-search a {
63+
color: var(--color-white) !important;
64+
text-decoration: none;
2065
}
2166

22-
.caption-text {
23-
color: #10b981;
67+
/* Layout blocks */
68+
.wy-nav-side {
69+
background-color: var(--color-gray-800);
70+
border-right: 1px solid var(--color-gray-200);
2471
}
72+
2573
.wy-side-nav-search {
26-
background-color: #047857;
74+
background-color: var(--color-emerald-500);
2775
}
28-
vertical p.caption {
29-
color: #0ea5e9;
76+
77+
.wy-nav-top {
78+
background-color: var(--color-emerald-500);
3079
}
31-
a {
32-
color: #075985;
33-
text-underline-offset: 4px;
80+
81+
.wy-nav-content {
82+
background: var(--color-white);
83+
border-right: 1px solid var(--color-gray-200);
84+
overflow: auto;
85+
}
86+
87+
.wy-nav-content-wrap {
88+
background-color: var(--color-gray-50);
3489
}
35-
a:hover {
36-
text-decoration-line: underline;
90+
91+
/* Text input */
92+
.wy-side-nav-search input[type="text"] {
93+
background-color: var(--color-white);
94+
border-radius: 4px;
95+
border: 1px solid var(--color-gray-200);
96+
box-shadow: none;
97+
color: var(--color-gray-500);
98+
padding: 0.5rem 0.75rem;
99+
100+
&::placeholder {
101+
color: var(--color-gray-500);
102+
}
103+
}
104+
105+
/* Button */
106+
.btn-neutral {
107+
background-color: var(--color-white) !important;
108+
border-radius: 4px;
109+
border: 1px solid var(--color-gray-200);
110+
box-shadow: none;
111+
color: var(--color-gray-800) !important;
112+
padding: 0.5rem 0.75rem;
113+
114+
&:hover {
115+
background-color: var(--color-gray-200) !important;
116+
text-decoration: none;
117+
}
118+
119+
&:visited {
120+
color: var(--color-gray-800) !important;
121+
}
37122
}
38123

39-
html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt {
40-
background-color: #e6f9f3;
41-
color: #108866;
42-
border-top-color: #6fccb2;
124+
/* Separators */
125+
hr,
126+
#search-results li {
127+
border-color: var(--color-gray-200) !important;
43128
}
44-
.rst-content .viewcode-link {
45-
color: #0ea5e9;
129+
130+
/* Tree navigation */
131+
.wy-menu-vertical {
132+
a {
133+
background-color: transparent !important;
134+
border: none !important;
135+
color: var(--color-white) !important;
136+
137+
&:hover {
138+
background-color: var(--color-gray-700);
139+
}
140+
}
141+
142+
button {
143+
color: var(--color-white) !important;
144+
}
145+
146+
li.current {
147+
background-color: var(--color-gray-700);
148+
}
149+
}
150+
151+
/* Code blocks */
152+
.rst-content div[class^="highlight"] {
153+
background-color: var(--color-gray-50);
154+
border-radius: 4px;
155+
border: 1px solid var(--color-gray-200);
156+
}
157+
158+
html.writer-html5
159+
.rst-content
160+
dl[class]:not(.option-list):not(.field-list):not(.footnote):not(
161+
.citation
162+
):not(.glossary):not(.simple)
163+
> dt {
164+
background-color: var(--color-emerald-50);
165+
border-top-color: var(--color-emerald-500);
166+
color: var(--color-emerald-700);
46167
}

0 commit comments

Comments
 (0)