Skip to content

Commit 97635c6

Browse files
jorenhamjorenham
authored
💄 make the docs look more like pydata-sphinx-theme (#469)
1 parent b37e58b commit 97635c6

File tree

5 files changed

+304
-209
lines changed

5 files changed

+304
-209
lines changed

‎docs/style/color.css

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
/* Assign base colors for the PyData theme */
2+
:root {
3+
/* Primary */
4+
--pst-teal-50: #f4fbfc;
5+
--pst-teal-100: #e9f6f8;
6+
--pst-teal-200: #d0ecf1;
7+
--pst-teal-300: #abdde6;
8+
--pst-teal-400: #3fb1c5;
9+
--pst-teal-500: #0a7d91;
10+
--pst-teal-600: #085d6c;
11+
--pst-teal-700: #064752;
12+
--pst-teal-800: #042c33;
13+
--pst-teal-900: #021b1f;
14+
15+
/* Secondary */
16+
--pst-violet-50: #f4eefb;
17+
--pst-violet-100: #e0c7ff;
18+
--pst-violet-200: #d5b4fd;
19+
--pst-violet-300: #b780ff;
20+
--pst-violet-400: #9c5ffd;
21+
--pst-violet-500: #8045e5;
22+
--pst-violet-600: #6432bd;
23+
--pst-violet-700: #4b258f;
24+
--pst-violet-800: #341a61;
25+
--pst-violet-900: #1e0e39;
26+
27+
/* Accent */
28+
--pst-pink-50: #fcf8fd;
29+
--pst-pink-100: #fcf0fa;
30+
--pst-pink-200: #f8dff5;
31+
--pst-pink-300: #f3c7ee;
32+
--pst-pink-400: #e47fd7;
33+
--pst-pink-500: #c132af;
34+
--pst-pink-600: #912583;
35+
--pst-pink-700: #6e1c64;
36+
--pst-pink-800: #46123f;
37+
--pst-pink-900: #2b0b27;
38+
39+
/* Default shades */
40+
--pst-gray-50: #f9f9fa;
41+
--pst-gray-100: #f3f4f5;
42+
--pst-gray-200: #e5e7ea;
43+
--pst-gray-300: #d1d5da;
44+
--pst-gray-400: #9ca4af;
45+
--pst-gray-500: #677384;
46+
--pst-gray-600: #48566b;
47+
--pst-gray-700: #29313d;
48+
--pst-gray-800: #222832;
49+
--pst-gray-900: #14181e;
50+
51+
--pst-white: #ffffff;
52+
--pst-black: var(--pst-gray-900);
53+
54+
--pst-text-base-light: #ced6dd;
55+
}
56+
57+
/*******************************************************************************
58+
* write the color rules for each theme (default=light / slate=dark)
59+
*/
60+
61+
[data-md-color-scheme="default"] {
62+
--pst-color-primary: var(--pst-teal-500);
63+
--pst-color-primary-bg: var(--pst-teal-200);
64+
--pst-color-secondary: var(--pst-violet-500);
65+
--pst-color-secondary-bg: var(--pst-violet-100);
66+
--pst-color-accent: var(--pst-pink-500);
67+
--pst-color-accent-bg: var(--pst-pink-200);
68+
--pst-color-info: #276be9;
69+
--pst-color-info-bg: #dce7fc;
70+
--pst-color-warning: #f66a0a;
71+
--pst-color-warning-bg: #f8e3d0;
72+
--pst-color-success: #00843f;
73+
--pst-color-success-bg: #d6ece1;
74+
--pst-color-attention: var(--pst-color-warning);
75+
--pst-color-attention-bg: var(--pst-color-warning-bg);
76+
--pst-color-danger: #d72d47;
77+
--pst-color-danger-bg: #f9e1e4;
78+
--pst-color-text-base: var(--pst-gray-800);
79+
--pst-color-text-muted: var(--pst-gray-600);
80+
--pst-color-shadow: rgba(0, 0, 0, 0.1);
81+
--pst-color-border: var(--pst-gray-300);
82+
--pst-color-border-muted: rgba(23, 23, 26, 0.2);
83+
--pst-color-blockquote-notch: var(--pst-gray-500);
84+
--pst-color-inline-code: var(--pst-pink-600);
85+
--pst-color-inline-code-links: var(--pst-teal-600);
86+
--pst-color-target: #f3cf95;
87+
--pst-color-table: var(--pst-gray-900);
88+
--pst-color-table-row-hover-bg: var(--pst-violet-200);
89+
--pst-color-table-inner-border: var(--pst-gray-200);
90+
--pst-color-background: var(--pst-white);
91+
--pst-color-on-background: var(--pst-white);
92+
--pst-color-surface: var(--pst-gray-100);
93+
--pst-color-on-surface: var(--pst-gray-800);
94+
95+
--pst-color-heading: var(--pst-color-text-base);
96+
--pst-color-link: var(--pst-color-primary);
97+
--pst-color-link-hover: var(--pst-color-secondary);
98+
--pst-color-table-outer-border: var(--pst-color-surface);
99+
--pst-color-table-heading-bg: var(--pst-color-surface);
100+
--pst-color-table-row-zebra-high-bg: var(--pst-color-on-background);
101+
--pst-color-table-row-zebra-low-bg: var(--pst-color-surface);
102+
}
103+
[data-md-color-scheme="default"] img[src$="#only-dark"],
104+
[data-md-color-scheme="default"] img[src$="#gh-dark-mode-only"] {
105+
display: none;
106+
}
107+
108+
[data-md-color-scheme="slate"] {
109+
--pst-color-primary: var(--pst-teal-400);
110+
--pst-color-primary-bg: var(--pst-teal-800);
111+
--pst-color-secondary: var(--pst-violet-400);
112+
--pst-color-secondary-bg: var(--pst-violet-800);
113+
--pst-color-accent: var(--pst-pink-400);
114+
--pst-color-accent-bg: var(--pst-pink-800);
115+
--pst-color-info: #79a3f2;
116+
--pst-color-info-bg: #06245d;
117+
--pst-color-warning: #ff9245;
118+
--pst-color-warning-bg: #652a02;
119+
--pst-color-success: #5fb488;
120+
--pst-color-success-bg: #002f17;
121+
--pst-color-attention: var(--pst-color-warning);
122+
--pst-color-attention-bg: var(--pst-color-warning-bg);
123+
--pst-color-danger: #e78894;
124+
--pst-color-danger-bg: #4e111b;
125+
--pst-color-text-base: var(--pst-text-base-light);
126+
--pst-color-text-muted: var(--pst-gray-400);
127+
--pst-color-shadow: rgba(0, 0, 0, 0.2);
128+
--pst-color-border: var(--pst-gray-600);
129+
--pst-color-border-muted: var(--pst-gray-700);
130+
--pst-color-blockquote-notch: var(--pst-gray-400);
131+
--pst-color-inline-code: var(--pst-pink-300);
132+
--pst-color-inline-code-links: var(--pst-teal-400);
133+
--pst-color-target: #675c04;
134+
--pst-color-table: var(--pst-white);
135+
--pst-color-table-row-hover-bg: var(--pst-violet-700);
136+
--pst-color-table-inner-border: #364150;
137+
--pst-color-background: var(--pst-gray-900);
138+
--pst-color-on-background: var(--pst-gray-800);
139+
--pst-color-surface: var(--pst-gray-700);
140+
--pst-color-on-surface: var(--pst-gray-100);
141+
142+
--pst-color-heading: var(--pst-color-text-base);
143+
--pst-color-link: var(--pst-color-primary);
144+
--pst-color-link-hover: var(--pst-color-secondary);
145+
--pst-color-table-outer-border: var(--pst-color-surface);
146+
--pst-color-table-heading-bg: var(--pst-color-surface);
147+
--pst-color-table-row-zebra-high-bg: var(--pst-color-on-background);
148+
--pst-color-table-row-zebra-low-bg: var(--pst-color-surface);
149+
}
150+
[data-md-color-scheme="slate"] img[src$="#only-light"],
151+
[data-md-color-scheme="slate"] img[src$="#gh-light-mode-only"] {
152+
display: none;
153+
}

‎docs/style/font.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600");
2+
3+
:root {
4+
--pst-font-size-base: 1rem;
5+
--pst-font-size-milli: 0.9rem;
6+
7+
--pst-font-size-h1: 2.625rem;
8+
--pst-font-size-h2: 2.125rem;
9+
--pst-font-size-h3: 1.75rem;
10+
--pst-font-size-h4: 1.5rem;
11+
--pst-font-size-h5: 1.25rem;
12+
--pst-font-size-h6: 1rem;
13+
14+
--pst-sidebar-font-size: 0.9rem;
15+
--pst-sidebar-font-size-mobile: 1.1rem;
16+
--pst-sidebar-header-font-size: 1.2rem;
17+
--pst-sidebar-header-font-weight: 700;
18+
19+
--pst-admonition-font-weight-heading: 700;
20+
21+
--pst-font-weight-caption: 300;
22+
--pst-font-weight-heading: 700;
23+
24+
--pst-font-family-base-system: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", sans-serif,
25+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
26+
--pst-font-family-monospace-system: "SFMono-Regular", "Menlo", "Consolas", "Monaco", "Liberation Mono",
27+
"Lucida Console", monospace;
28+
--pst-font-family-base: var(--pst-font-family-base-system);
29+
--pst-font-family-heading: Lato;
30+
--pst-font-family-monospace: var(--pst-font-family-monospace-system);
31+
}
32+
33+
body {
34+
font-family: var(--pst-font-family-base);
35+
}
36+
37+
h1,
38+
h2 {
39+
color: var(--pst-heading-color);
40+
}
41+
42+
h1,
43+
h2,
44+
h3,
45+
h4,
46+
h5,
47+
h6 {
48+
font-family: var(--pst-font-family-heading);
49+
font-weight: var(--pst-font-weight-heading);
50+
line-height: 1.15;
51+
margin: 2.75rem 0 1.05rem;
52+
}
53+
54+
.md-typeset {
55+
line-height: 1.65;
56+
}

‎docs/style/overrides.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
[dir="ltr"] .md-header__title {
2+
margin-left: 0;
3+
}
4+
[dir="rtl"] .md-header__title {
5+
margin-right: 0;
6+
}
7+
8+
.md-header__button.md-logo img,
9+
.md-header__button.md-logo svg {
10+
height: 52px;
11+
}
12+
13+
.md-header__button.md-logo,
14+
.md-header__button.md-logo {
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
.md-header__title:not(.md-header__title--active) span {
20+
font-weight: 900;
21+
font-size: var(--pst-sidebar-header-font-size);
22+
}
23+
24+
a {
25+
text-underline-offset: 0.1578em;
26+
word-wrap: break-word;
27+
}
28+
29+
a:hover {
30+
color: var(--pst-color-link-hover);
31+
text-decoration: underline;
32+
text-decoration-skip-ink: none;
33+
}
34+
35+
p a {
36+
text-decoration: underline;
37+
}
38+
39+
code {
40+
border: 1px solid var(--pst-color-border);
41+
border-radius: 0.25rem;
42+
padding: 0.1rem 0.25rem;
43+
}

0 commit comments

Comments
 (0)