Skip to content

Commit 8bac374

Browse files
zqianemmtoohey31
zqianem
authored and
mtoohey31
committed
docs: Update mdBook theme and improve maintainability (helix-editor#7524)
1 parent 70bc397 commit 8bac374

File tree

11 files changed

+301
-1958
lines changed

11 files changed

+301
-1958
lines changed

‎.ignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
11
# Things that we don't want ripgrep to search that we do want in git
22
# https://github.com/BurntSushi/ripgrep/blob/master/GUIDE.md#automatic-filtering
3-
4-
# Minified JS vendored from mdbook
5-
book/theme/highlight.js

‎book/book.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ default-theme = "colibri"
1010
preferred-dark-theme = "colibri"
1111
git-repository-url = "https://github.com/helix-editor/helix"
1212
edit-url-template = "https://github.com/helix-editor/helix/edit/master/book/{path}"
13+
additional-css = ["custom.css"]

‎book/custom.css‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
html {
2+
font-family: "Inter", sans-serif;
3+
}
4+
5+
.sidebar .sidebar-scrollbox {
6+
padding: 0;
7+
}
8+
9+
.chapter {
10+
margin: 0.25rem 0;
11+
}
12+
13+
.chapter li.chapter-item {
14+
line-height: initial;
15+
margin: 0;
16+
padding: 1rem 1.5rem;
17+
}
18+
19+
.chapter .section li.chapter-item {
20+
line-height: inherit;
21+
padding: .5rem .5rem 0 .5rem;
22+
}
23+
24+
.content {
25+
overflow-y: auto;
26+
padding: 0 15px;
27+
padding-bottom: 50px;
28+
}
29+
30+
/* 2 1.75 1.5 1.25 1 .875 */
31+
.content h1 { font-size: 2em }
32+
.content h2 { font-size: 1.75em }
33+
.content h3 { font-size: 1.5em }
34+
.content h4 { font-size: 1.25em }
35+
.content h5 { font-size: 1em }
36+
.content h6 { font-size: .875em }
37+
38+
.content h1,
39+
.content h2,
40+
.content h3,
41+
.content h4 {
42+
font-weight: 500;
43+
margin-top: 1.275em;
44+
margin-bottom: .875em;
45+
}
46+
47+
.content p,
48+
.content ol,
49+
.content ul,
50+
.content table {
51+
margin-top: 0;
52+
margin-bottom: .875em;
53+
}
54+
55+
.content ul li {
56+
margin-bottom: .25rem;
57+
}
58+
59+
.content ul {
60+
list-style-type: square;
61+
}
62+
63+
.content ul ul,
64+
.content ol ul {
65+
margin-bottom: .5rem;
66+
}
67+
68+
.content li p {
69+
margin-bottom: .5em;
70+
}
71+
72+
blockquote {
73+
margin: 1.5rem 0;
74+
padding: 1rem 1.5rem;
75+
color: var(--fg);
76+
opacity: .9;
77+
background-color: var(--quote-bg);
78+
border-left: 4px solid var(--quote-border);
79+
border-top: none;
80+
border-bottom: none;
81+
}
82+
83+
blockquote *:last-child {
84+
margin-bottom: 0;
85+
}
86+
87+
table {
88+
width: 100%;
89+
}
90+
91+
table thead th {
92+
padding: .75rem;
93+
text-align: left;
94+
font-weight: 500;
95+
line-height: 1.5;
96+
width: auto;
97+
}
98+
99+
table td {
100+
padding: .75rem;
101+
border: none;
102+
}
103+
104+
table thead tr {
105+
border: none;
106+
border-bottom: 2px var(--table-border-color) solid;
107+
}
108+
109+
table tbody tr {
110+
border-bottom: 1px var(--table-border-line) solid;
111+
}
112+
113+
table tbody tr:nth-child(2n) {
114+
background: unset;
115+
}
116+
117+
pre code.hljs {
118+
display: block;
119+
overflow-x: auto;
120+
padding: 1em;
121+
}
122+
123+
code.hljs {
124+
padding: 3px 5px;
125+
}
126+
127+
.colibri {
128+
--bg: #3b224c;
129+
--fg: #bcbdd0;
130+
--heading-fg: #fff;
131+
132+
--sidebar-bg: #281733;
133+
--sidebar-fg: #c8c9db;
134+
--sidebar-non-existent: #505274;
135+
--sidebar-active: #a4a0e8;
136+
--sidebar-spacer: #2d334f;
137+
138+
--scrollbar: var(--sidebar-fg);
139+
140+
--icons: #737480;
141+
--icons-hover: #b7b9cc;
142+
143+
/* --links: #a4a0e8; */
144+
--links: #ECCDBA;
145+
146+
--inline-code-color: hsl(48.7, 7.8%, 70%);
147+
148+
--theme-popup-bg: #161923;
149+
--theme-popup-border: #737480;
150+
--theme-hover: rgba(0, 0, 0, .2);
151+
152+
--quote-bg: #281733;
153+
--quote-border: hsl(226, 15%, 22%);
154+
155+
--table-border-color: hsl(226, 23%, 76%);
156+
--table-header-bg: hsla(226, 23%, 31%, 0);
157+
--table-alternate-bg: hsl(226, 23%, 14%);
158+
--table-border-line: hsla(201deg, 20%, 92%, 0.2);
159+
160+
--searchbar-border-color: #aaa;
161+
--searchbar-bg: #aeaec6;
162+
--searchbar-fg: #000;
163+
--searchbar-shadow-color: #aaa;
164+
--searchresults-header-fg: #5f5f71;
165+
--searchresults-border-color: #5c5c68;
166+
--searchresults-li-bg: #242430;
167+
--search-mark-bg: #acff5;
168+
}
169+
170+
.colibri .content .header {
171+
color: #fff;
172+
}
173+
174+
/* highlight.js theme, :where() is used to avoid increasing specificity */
175+
176+
:where(.colibri) .hljs {
177+
background: #2f1e2e;
178+
color: #a39e9b;
179+
}
180+
181+
:where(.colibri) .hljs-comment,
182+
:where(.colibri) .hljs-quote {
183+
color: #8d8687;
184+
}
185+
186+
:where(.colibri) .hljs-link,
187+
:where(.colibri) .hljs-meta,
188+
:where(.colibri) .hljs-name,
189+
:where(.colibri) .hljs-regexp,
190+
:where(.colibri) .hljs-selector-class,
191+
:where(.colibri) .hljs-selector-id,
192+
:where(.colibri) .hljs-tag,
193+
:where(.colibri) .hljs-template-variable,
194+
:where(.colibri) .hljs-variable {
195+
color: #ef6155;
196+
}
197+
198+
:where(.colibri) .hljs-built_in,
199+
:where(.colibri) .hljs-deletion,
200+
:where(.colibri) .hljs-literal,
201+
:where(.colibri) .hljs-number,
202+
:where(.colibri) .hljs-params,
203+
:where(.colibri) .hljs-type {
204+
color: #f99b15;
205+
}
206+
207+
:where(.colibri) .hljs-attribute,
208+
:where(.colibri) .hljs-section,
209+
:where(.colibri) .hljs-title {
210+
color: #fec418;
211+
}
212+
213+
:where(.colibri) .hljs-addition,
214+
:where(.colibri) .hljs-bullet,
215+
:where(.colibri) .hljs-string,
216+
:where(.colibri) .hljs-symbol {
217+
color: #48b685;
218+
}
219+
220+
:where(.colibri) .hljs-keyword,
221+
:where(.colibri) .hljs-selector-tag {
222+
color: #815ba4;
223+
}
224+
225+
:where(.colibri) .hljs-emphasis {
226+
font-style: italic;
227+
}
228+
229+
:where(.colibri) .hljs-strong {
230+
font-weight: 700;
231+
}

0 commit comments

Comments
 (0)