Skip to content

Commit 4f4a205

Browse files
committed
πŸ’„ Customized UI and used Tokyo Night theme
1 parent eaa75ea commit 4f4a205

75 files changed

Lines changed: 2622 additions & 296 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

β€Žbook.tomlβ€Ž

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,8 @@ description = "Documentation for Strata"
99
[build]
1010
build-dir = "docs"
1111
create-missing = true
12+
13+
[output.html]
14+
theme = "theme"
15+
default-theme = "tokyonight"
16+
preferred-dark-theme = "tokyonight"

β€Ždocs/404.htmlβ€Ž

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE HTML>
2-
<html lang="en" class="sidebar-visible no-js light">
2+
<html lang="en" class="sidebar-visible no-js tokyonight">
33
<head>
44
<!-- Book generated using mdBook -->
55
<meta charset="UTF-8">
@@ -26,8 +26,6 @@
2626

2727
<!-- Highlight.js Stylesheets -->
2828
<link rel="stylesheet" href="highlight.css">
29-
<link rel="stylesheet" href="tomorrow-night.css">
30-
<link rel="stylesheet" href="ayu-highlight.css">
3129

3230
<!-- Custom theme stylesheets -->
3331

@@ -37,7 +35,7 @@
3735
<!-- Provide site root to javascript -->
3836
<script>
3937
var path_to_root = "";
40-
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
38+
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "tokyonight" : "tokyonight";
4139
</script>
4240

4341
<!-- Work around some values being stored in localStorage wrapped in quotes -->
@@ -63,7 +61,7 @@
6361
if (theme === null || theme === undefined) { theme = default_theme; }
6462
var html = document.querySelector('html');
6563
html.classList.remove('no-js')
66-
html.classList.remove('light')
64+
html.classList.remove('tokyonight')
6765
html.classList.add(theme);
6866
html.classList.add('js');
6967
</script>

β€Ždocs/css/chrome.cssβ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ pre > .result {
283283
}
284284

285285
mark {
286-
border-radius: 2px;
286+
border-radius: 5px;
287287
padding: 0 3px 1px 3px;
288288
margin: 0 -3px -1px -3px;
289289
background-color: var(--search-mark-bg);

β€Ždocs/css/general.cssβ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
}
99

1010
html {
11-
font-family: "Open Sans", sans-serif;
11+
font-family: "Figtree", sans-serif;
1212
color: var(--fg);
1313
background-color: var(--bg);
1414
text-size-adjust: none;

β€Ždocs/css/variables.cssβ€Ž

Lines changed: 18 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,32 @@
22
/* Globals */
33

44
:root {
5-
--sidebar-width: 300px;
5+
--sidebar-width: 400px;
66
--page-padding: 15px;
77
--content-max-width: 750px;
88
--menu-bar-height: 50px;
9-
--mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
10-
--code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */
9+
--mono-font: "JetBrains Mono", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
10+
--code-font-size: 0.875em
1111
}
1212

13-
/* Themes */
13+
.tokyonight {
14+
--bg: #222436;
15+
--fg: #c8d3f5;
1416

15-
.ayu {
16-
--bg: hsl(210, 25%, 8%);
17-
--fg: #c5c5c5;
18-
19-
--sidebar-bg: #14191f;
20-
--sidebar-fg: #c8c9db;
21-
--sidebar-non-existant: #5c6773;
22-
--sidebar-active: #ffb454;
23-
--sidebar-spacer: #2d334f;
17+
--sidebar-bg: #1b1d2b;
18+
--sidebar-fg: #c8d3f5;
19+
--sidebar-non-existant: #444a73;
20+
--sidebar-active: #2196F3;
21+
--sidebar-spacer: #82aaff;
2422

2523
--scrollbar: var(--sidebar-fg);
2624

27-
--icons: #737480;
28-
--icons-hover: #b7b9cc;
25+
--icons: #c8d3f5;
26+
--icons-hover: #c8d3f5;
2927

30-
--links: #0096cf;
28+
--links: #c099ff;
3129

32-
--inline-code-color: #ffb454;
30+
--inline-code-color: #82aaff;
3331

3432
--theme-popup-bg: #14191f;
3533
--theme-popup-border: #5c6773;
@@ -38,9 +36,9 @@
3836
--quote-bg: hsl(226, 15%, 17%);
3937
--quote-border: hsl(226, 15%, 22%);
4038

41-
--table-border-color: hsl(210, 25%, 13%);
42-
--table-header-bg: hsl(210, 25%, 28%);
43-
--table-alternate-bg: hsl(210, 25%, 11%);
39+
--table-border-color: #82aaff;
40+
--table-header-bg: #444a73;
41+
--table-alternate-bg: #82aaff;
4442

4543
--searchbar-border-color: #848484;
4644
--searchbar-bg: #424242;
@@ -52,166 +50,6 @@
5250
--search-mark-bg: #e3b171;
5351
}
5452

55-
.coal {
56-
--bg: hsl(200, 7%, 8%);
57-
--fg: #98a3ad;
58-
59-
--sidebar-bg: #292c2f;
60-
--sidebar-fg: #a1adb8;
61-
--sidebar-non-existant: #505254;
62-
--sidebar-active: #3473ad;
63-
--sidebar-spacer: #393939;
64-
65-
--scrollbar: var(--sidebar-fg);
66-
67-
--icons: #43484d;
68-
--icons-hover: #b3c0cc;
69-
70-
--links: #2b79a2;
71-
72-
--inline-code-color: #c5c8c6;
73-
74-
--theme-popup-bg: #141617;
75-
--theme-popup-border: #43484d;
76-
--theme-hover: #1f2124;
77-
78-
--quote-bg: hsl(234, 21%, 18%);
79-
--quote-border: hsl(234, 21%, 23%);
80-
81-
--table-border-color: hsl(200, 7%, 13%);
82-
--table-header-bg: hsl(200, 7%, 28%);
83-
--table-alternate-bg: hsl(200, 7%, 11%);
84-
85-
--searchbar-border-color: #aaa;
86-
--searchbar-bg: #b7b7b7;
87-
--searchbar-fg: #000;
88-
--searchbar-shadow-color: #aaa;
89-
--searchresults-header-fg: #666;
90-
--searchresults-border-color: #98a3ad;
91-
--searchresults-li-bg: #2b2b2f;
92-
--search-mark-bg: #355c7d;
93-
}
94-
95-
.light {
96-
--bg: hsl(0, 0%, 100%);
97-
--fg: hsl(0, 0%, 0%);
98-
99-
--sidebar-bg: #fafafa;
100-
--sidebar-fg: hsl(0, 0%, 0%);
101-
--sidebar-non-existant: #aaaaaa;
102-
--sidebar-active: #1f1fff;
103-
--sidebar-spacer: #f4f4f4;
104-
105-
--scrollbar: #8F8F8F;
106-
107-
--icons: #747474;
108-
--icons-hover: #000000;
109-
110-
--links: #20609f;
111-
112-
--inline-code-color: #301900;
113-
114-
--theme-popup-bg: #fafafa;
115-
--theme-popup-border: #cccccc;
116-
--theme-hover: #e6e6e6;
117-
118-
--quote-bg: hsl(197, 37%, 96%);
119-
--quote-border: hsl(197, 37%, 91%);
120-
121-
--table-border-color: hsl(0, 0%, 95%);
122-
--table-header-bg: hsl(0, 0%, 80%);
123-
--table-alternate-bg: hsl(0, 0%, 97%);
124-
125-
--searchbar-border-color: #aaa;
126-
--searchbar-bg: #fafafa;
127-
--searchbar-fg: #000;
128-
--searchbar-shadow-color: #aaa;
129-
--searchresults-header-fg: #666;
130-
--searchresults-border-color: #888;
131-
--searchresults-li-bg: #e4f2fe;
132-
--search-mark-bg: #a2cff5;
133-
}
134-
135-
.navy {
136-
--bg: hsl(226, 23%, 11%);
137-
--fg: #bcbdd0;
138-
139-
--sidebar-bg: #282d3f;
140-
--sidebar-fg: #c8c9db;
141-
--sidebar-non-existant: #505274;
142-
--sidebar-active: #2b79a2;
143-
--sidebar-spacer: #2d334f;
144-
145-
--scrollbar: var(--sidebar-fg);
146-
147-
--icons: #737480;
148-
--icons-hover: #b7b9cc;
149-
150-
--links: #2b79a2;
151-
152-
--inline-code-color: #c5c8c6;
153-
154-
--theme-popup-bg: #161923;
155-
--theme-popup-border: #737480;
156-
--theme-hover: #282e40;
157-
158-
--quote-bg: hsl(226, 15%, 17%);
159-
--quote-border: hsl(226, 15%, 22%);
160-
161-
--table-border-color: hsl(226, 23%, 16%);
162-
--table-header-bg: hsl(226, 23%, 31%);
163-
--table-alternate-bg: hsl(226, 23%, 14%);
164-
165-
--searchbar-border-color: #aaa;
166-
--searchbar-bg: #aeaec6;
167-
--searchbar-fg: #000;
168-
--searchbar-shadow-color: #aaa;
169-
--searchresults-header-fg: #5f5f71;
170-
--searchresults-border-color: #5c5c68;
171-
--searchresults-li-bg: #242430;
172-
--search-mark-bg: #a2cff5;
173-
}
174-
175-
.rust {
176-
--bg: hsl(60, 9%, 87%);
177-
--fg: #262625;
178-
179-
--sidebar-bg: #3b2e2a;
180-
--sidebar-fg: #c8c9db;
181-
--sidebar-non-existant: #505254;
182-
--sidebar-active: #e69f67;
183-
--sidebar-spacer: #45373a;
184-
185-
--scrollbar: var(--sidebar-fg);
186-
187-
--icons: #737480;
188-
--icons-hover: #262625;
189-
190-
--links: #2b79a2;
191-
192-
--inline-code-color: #6e6b5e;
193-
194-
--theme-popup-bg: #e1e1db;
195-
--theme-popup-border: #b38f6b;
196-
--theme-hover: #99908a;
197-
198-
--quote-bg: hsl(60, 5%, 75%);
199-
--quote-border: hsl(60, 5%, 70%);
200-
201-
--table-border-color: hsl(60, 9%, 82%);
202-
--table-header-bg: #b3a497;
203-
--table-alternate-bg: hsl(60, 9%, 84%);
204-
205-
--searchbar-border-color: #aaa;
206-
--searchbar-bg: #fafafa;
207-
--searchbar-fg: #000;
208-
--searchbar-shadow-color: #aaa;
209-
--searchresults-header-fg: #666;
210-
--searchresults-border-color: #888;
211-
--searchresults-li-bg: #dec2a2;
212-
--search-mark-bg: #e69f67;
213-
}
214-
21553
@media (prefers-color-scheme: dark) {
21654
.light.no-js {
21755
--bg: hsl(200, 7%, 8%);
92.4 KB
Binary file not shown.
95.9 KB
Binary file not shown.
91.5 KB
Binary file not shown.
94.6 KB
Binary file not shown.
90.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)