Skip to content

Commit 4418337

Browse files
mrflorismrfloris
committed
Add Minecraft-inspired docs theme
1 parent ae1b869 commit 4418337

4 files changed

Lines changed: 206 additions & 19 deletions

File tree

‎astro.config.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { defineConfig } from 'astro/config';
22
import starlight from '@astrojs/starlight';
3+
import starlightThemeFlexoki from 'starlight-theme-flexoki';
34

45
export default defineConfig({
56
site: 'https://docs.1moreblock.com',
@@ -17,6 +18,7 @@ export default defineConfig({
1718
href: 'https://github.com/mrfdev/1MB-Plugins-Docs',
1819
},
1920
],
21+
plugins: [starlightThemeFlexoki({ accentColor: 'green' })],
2022
customCss: ['./src/styles/custom.css'],
2123
sidebar: [
2224
{ label: 'Home', link: '/' },

‎package-lock.json‎

Lines changed: 14 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@astrojs/starlight": "^0.39.2",
15-
"astro": "^6.4.2"
15+
"astro": "^6.4.2",
16+
"starlight-theme-flexoki": "^0.2.2"
1617
}
1718
}

‎src/styles/custom.css‎

Lines changed: 188 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,190 @@
11
:root {
2-
--sl-color-accent-low: #1c3140;
3-
--sl-color-accent: #7cc7e8;
4-
--sl-color-accent-high: #d9f0ff;
5-
--sl-color-white: #f8fbff;
6-
--sl-color-gray-1: #edf6fb;
7-
--sl-color-gray-2: #c5d9e2;
8-
--sl-color-gray-3: #8ba5b0;
9-
--sl-color-gray-4: #58717c;
10-
--sl-color-gray-5: #364d57;
11-
--sl-color-gray-6: #223640;
12-
--sl-color-black: #101b22;
2+
--mc-grass: #93c85f;
3+
--mc-grass-low: #233a21;
4+
--mc-grass-high: #d7ef9f;
5+
--mc-dirt: #8a5a35;
6+
--mc-dirt-low: #2c2118;
7+
--mc-stone: #6f7b78;
8+
--mc-stone-low: #1b2525;
9+
--mc-diamond: #72d8d3;
10+
--mc-gold: #f1c75b;
11+
--mc-redstone: #f07f6f;
12+
--mc-page-bg: #111917;
13+
--mc-panel-bg: #17221f;
14+
--mc-panel-bg-strong: #1d2c28;
15+
--mc-border: #35463f;
16+
--mc-block-shadow: #090d0c;
17+
--sl-color-accent-low: var(--mc-grass-low);
18+
--sl-color-accent: var(--mc-grass);
19+
--sl-color-accent-high: var(--mc-grass-high);
20+
--sl-color-white: #f5f8ee;
21+
--sl-color-gray-1: #e6eddd;
22+
--sl-color-gray-2: #c9d4c1;
23+
--sl-color-gray-3: #99aa9a;
24+
--sl-color-gray-4: #687b70;
25+
--sl-color-gray-5: #2e403a;
26+
--sl-color-gray-6: var(--mc-panel-bg-strong);
27+
--sl-color-black: var(--mc-page-bg);
28+
--sl-color-bg: var(--mc-page-bg);
29+
--sl-color-bg-nav: #13201c;
30+
--sl-color-bg-sidebar: #121d1a;
31+
--sl-color-bg-inline-code: #26362f;
32+
--sl-color-hairline: var(--mc-border);
33+
--sl-color-hairline-light: #41554e;
34+
--sl-color-text-accent: var(--mc-grass-high);
35+
color-scheme: dark;
36+
}
37+
38+
:root[data-theme='light'] {
39+
--mc-grass: #5e8d36;
40+
--mc-grass-low: #e2f0c8;
41+
--mc-grass-high: #294d20;
42+
--mc-dirt: #9a6641;
43+
--mc-dirt-low: #e9dfc8;
44+
--mc-stone: #6f7774;
45+
--mc-stone-low: #dfe7da;
46+
--mc-diamond: #1f8f8a;
47+
--mc-gold: #9a6a05;
48+
--mc-redstone: #af3029;
49+
--mc-page-bg: #eef3e3;
50+
--mc-panel-bg: #f8fbef;
51+
--mc-panel-bg-strong: #dfe8d2;
52+
--mc-border: #b9c39c;
53+
--mc-block-shadow: #c6d0b0;
54+
--sl-color-accent-low: var(--mc-grass-low);
55+
--sl-color-accent: var(--mc-grass);
56+
--sl-color-accent-high: var(--mc-grass-high);
57+
--sl-color-white: #161c19;
58+
--sl-color-gray-1: #212821;
59+
--sl-color-gray-2: #323a31;
60+
--sl-color-gray-3: #66715f;
61+
--sl-color-gray-4: #8f9a86;
62+
--sl-color-gray-5: #d8ceb3;
63+
--sl-color-gray-6: var(--mc-panel-bg-strong);
64+
--sl-color-gray-7: var(--mc-panel-bg);
65+
--sl-color-black: var(--mc-page-bg);
66+
--sl-color-bg: var(--mc-page-bg);
67+
--sl-color-bg-nav: #efe5cb;
68+
--sl-color-bg-sidebar: #eadfc5;
69+
--sl-color-bg-inline-code: #e0d2ad;
70+
--sl-color-hairline: var(--mc-border);
71+
--sl-color-hairline-light: #d8c9a3;
72+
--sl-color-text-accent: var(--mc-grass-high);
73+
color-scheme: light;
74+
}
75+
76+
body {
77+
background-color: var(--mc-page-bg);
78+
background-image:
79+
linear-gradient(rgb(255 255 255 / 2.8%) 1px, transparent 1px),
80+
linear-gradient(90deg, rgb(255 255 255 / 2.8%) 1px, transparent 1px);
81+
background-size: 24px 24px;
82+
}
83+
84+
:root[data-theme='light'] body {
85+
background-image:
86+
linear-gradient(rgb(63 45 26 / 4%) 1px, transparent 1px),
87+
linear-gradient(90deg, rgb(63 45 26 / 4%) 1px, transparent 1px);
1388
}
1489

1590
.hero img {
16-
filter: drop-shadow(0 18px 45px rgb(124 199 232 / 22%));
91+
filter: drop-shadow(0 18px 0 rgb(0 0 0 / 18%));
92+
}
93+
94+
.site-title {
95+
color: var(--sl-color-white);
96+
font-weight: 800;
97+
}
98+
99+
.header {
100+
border-bottom: 3px solid var(--mc-dirt);
101+
box-shadow: 0 3px 0 var(--mc-block-shadow);
102+
}
103+
104+
.sidebar-content a[aria-current='page'],
105+
.right-sidebar a[aria-current='true'] {
106+
border-radius: 0;
107+
box-shadow:
108+
inset 4px 0 0 var(--mc-grass),
109+
0 2px 0 rgb(0 0 0 / 16%);
110+
}
111+
112+
.sl-markdown-content h1,
113+
.sl-markdown-content h2 {
114+
letter-spacing: 0;
115+
}
116+
117+
.sl-markdown-content h1 {
118+
color: var(--sl-color-white);
119+
text-shadow: 0 3px 0 rgb(0 0 0 / 22%);
120+
}
121+
122+
:root[data-theme='light'] .sl-markdown-content h1 {
123+
text-shadow: 0 2px 0 rgb(154 102 65 / 16%);
124+
}
125+
126+
.sl-markdown-content h2 {
127+
color: var(--mc-grass-high);
128+
}
129+
130+
.sl-markdown-content a:not(.card) {
131+
text-decoration-color: color-mix(in srgb, var(--mc-diamond), transparent 35%);
132+
text-decoration-thickness: 2px;
133+
text-underline-offset: 0.18em;
134+
}
135+
136+
.sl-markdown-content code:not(pre code) {
137+
border: 1px solid color-mix(in srgb, var(--mc-stone), transparent 35%);
138+
border-radius: 3px;
139+
background:
140+
linear-gradient(180deg, color-mix(in srgb, var(--mc-stone-low), white 4%), var(--sl-color-bg-inline-code));
141+
box-shadow: inset 0 -2px 0 rgb(0 0 0 / 16%);
142+
color: var(--mc-diamond);
143+
}
144+
145+
:root[data-theme='light'] .sl-markdown-content code:not(pre code) {
146+
color: #176b66;
147+
box-shadow: inset 0 -2px 0 rgb(94 69 35 / 12%);
148+
}
149+
150+
.sl-markdown-content table {
151+
border: 2px solid var(--mc-border);
152+
border-radius: 0;
153+
box-shadow: 0 4px 0 var(--mc-block-shadow);
154+
}
155+
156+
.sl-markdown-content table th {
157+
background: color-mix(in srgb, var(--mc-dirt), var(--mc-panel-bg) 28%);
158+
color: #fff7db;
159+
}
160+
161+
:root[data-theme='light'] .sl-markdown-content table th {
162+
color: #fff8dc;
163+
}
164+
165+
.sl-markdown-content table td {
166+
background: color-mix(in srgb, var(--mc-panel-bg), transparent 6%);
167+
}
168+
169+
.sl-markdown-content table tr:nth-child(even) td {
170+
background: color-mix(in srgb, var(--mc-panel-bg-strong), transparent 12%);
171+
}
172+
173+
.sl-markdown-content ul li::marker,
174+
.sl-markdown-content ol li::marker {
175+
color: var(--mc-gold);
176+
}
177+
178+
.sl-markdown-content blockquote {
179+
border-inline-start-color: var(--mc-grass);
180+
background: color-mix(in srgb, var(--mc-panel-bg-strong), transparent 40%);
181+
box-shadow: inset 4px 0 0 color-mix(in srgb, var(--mc-dirt), transparent 30%);
182+
}
183+
184+
.pagination-links a {
185+
border-radius: 0;
186+
border: 2px solid var(--mc-border);
187+
box-shadow: 0 4px 0 var(--mc-block-shadow);
17188
}
18189

19190
.sl-markdown-content table.command-table {
@@ -28,17 +199,17 @@
28199

29200
.sl-markdown-content table.command-table th:nth-child(1),
30201
.sl-markdown-content table.command-table td:nth-child(1) {
31-
width: 34%;
202+
width: 36%;
32203
}
33204

34205
.sl-markdown-content table.plugin-command-table th:nth-child(2),
35206
.sl-markdown-content table.plugin-command-table td:nth-child(2) {
36-
width: 42%;
207+
width: 34%;
37208
}
38209

39210
.sl-markdown-content table.plugin-command-table th:nth-child(3),
40211
.sl-markdown-content table.plugin-command-table td:nth-child(3) {
41-
width: 24%;
212+
width: 30%;
42213
}
43214

44215
.sl-markdown-content table.command-index-table th:nth-child(1),
@@ -63,6 +234,6 @@
63234

64235
.sl-markdown-content table.command-table code {
65236
white-space: normal;
66-
overflow-wrap: anywhere;
67-
word-break: break-word;
237+
overflow-wrap: break-word;
238+
word-break: normal;
68239
}

0 commit comments

Comments
 (0)