Skip to content

Commit 98d26ef

Browse files
js2mejs2me
committed
docs: update docs UI
1 parent 0289f76 commit 98d26ef

File tree

3 files changed

+1813
-249
lines changed

3 files changed

+1813
-249
lines changed

‎docs/.vitepress/theme/style.css‎

Lines changed: 15 additions & 228 deletions
Original file line numberDiff line numberDiff line change
@@ -1,236 +1,23 @@
1-
/**
2-
* Customize default theme styling by overriding CSS variables:
3-
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
4-
*/
5-
6-
/**
7-
* Colors
8-
*
9-
* Each colors have exact same color scale system with 3 levels of solid
10-
* colors with different brightness, and 1 soft color.
11-
*
12-
* - `XXX-1`: The most solid color used mainly for colored text. It must
13-
* satisfy the contrast ratio against when used on top of `XXX-soft`.
14-
*
15-
* - `XXX-2`: The color used mainly for hover state of the button.
16-
*
17-
* - `XXX-3`: The color for solid background, such as bg color of the button.
18-
* It must satisfy the contrast ratio with pure white (#ffffff) text on
19-
* top of it.
20-
*
21-
* - `XXX-soft`: The color used for subtle background such as custom container
22-
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
23-
* on top of it.
24-
*
25-
* The soft color must be semi transparent alpha channel. This is crucial
26-
* because it allows adding multiple "soft" colors on top of each other
27-
* to create a accent, such as when having inline code block inside
28-
* custom containers.
29-
*
30-
* - `default`: The color used purely for subtle indication without any
31-
* special meanings attched to it such as bg color for menu hover state.
32-
*
33-
* - `brand`: Used for primary brand colors, such as link text, button with
34-
* brand theme, etc.
35-
*
36-
* - `tip`: Used to indicate useful information. The default theme uses the
37-
* brand color for this by default.
38-
*
39-
* - `warning`: Used to indicate warning to the users. Used in custom
40-
* container, badges, etc.
41-
*
42-
* - `danger`: Used to show error, or dangerous message to the users. Used
43-
* in custom container, badges, etc.
44-
* -------------------------------------------------------------------------- */
45-
46-
:root {
47-
--vp-c-indigo-1: #c87a45;
48-
--vp-c-indigo-2: #ff8a4f;
49-
--vp-c-indigo-3: #fb681f;
50-
--vp-c-indigo-soft: #ff82512b;
51-
}
52-
53-
html.dark {
54-
--vp-c-indigo-1: #ffae77;
55-
--vp-c-indigo-2: #ff8a4f;
56-
--vp-c-indigo-3: #fb681f;
57-
--vp-c-indigo-soft: #ff662069;
58-
}
59-
60-
:root {
61-
--vp-c-default-1: var(--vp-c-gray-1);
62-
--vp-c-default-2: var(--vp-c-gray-2);
63-
--vp-c-default-3: var(--vp-c-gray-3);
64-
--vp-c-default-soft: var(--vp-c-gray-soft);
65-
66-
--vp-c-brand-1: var(--vp-c-indigo-1);
67-
--vp-c-brand-2: var(--vp-c-indigo-2);
68-
--vp-c-brand-3: var(--vp-c-indigo-3);
69-
--vp-c-brand-soft: var(--vp-c-indigo-soft);
70-
71-
--vp-c-tip-1: var(--vp-c-brand-1);
72-
--vp-c-tip-2: var(--vp-c-brand-2);
73-
--vp-c-tip-3: var(--vp-c-brand-3);
74-
--vp-c-tip-soft: var(--vp-c-brand-soft);
75-
76-
--vp-c-warning-1: var(--vp-c-yellow-1);
77-
--vp-c-warning-2: var(--vp-c-yellow-2);
78-
--vp-c-warning-3: var(--vp-c-yellow-3);
79-
--vp-c-warning-soft: var(--vp-c-yellow-soft);
80-
81-
--vp-c-danger-1: var(--vp-c-red-1);
82-
--vp-c-danger-2: var(--vp-c-red-2);
83-
--vp-c-danger-3: var(--vp-c-red-3);
84-
--vp-c-danger-soft: var(--vp-c-red-soft);
85-
}
86-
87-
/**
88-
* Component: Button
89-
* -------------------------------------------------------------------------- */
1+
@import url('sborshik/vitepress/styles');
902

913
:root {
92-
--vp-button-brand-border: transparent;
93-
--vp-button-brand-text: var(--vp-c-white);
94-
--vp-button-brand-bg: var(--vp-c-brand-3);
95-
--vp-button-brand-hover-border: transparent;
96-
--vp-button-brand-hover-text: var(--vp-c-white);
97-
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
98-
--vp-button-brand-active-border: transparent;
99-
--vp-button-brand-active-text: var(--vp-c-white);
100-
--vp-button-brand-active-bg: var(--vp-c-brand-1);
101-
}
102-
103-
/**
104-
* Component: Home
105-
* -------------------------------------------------------------------------- */
4+
--vp-c-brand-1: #c87a45;
5+
--vp-c-brand-2: #ff8a4f;
6+
--vp-c-brand-3: #fb681f;
7+
--vp-c-brand-soft: #ff82512b;
1068

107-
:root {
108-
--vp-home-hero-name-color: transparent;
109-
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3ba235 5%, #ff6a07);
110-
--vp-home-hero-image-background-image: linear-gradient(-45deg, #752c1c 50%, #238832 50%);
111-
--vp-home-hero-image-filter: blur(44px);
9+
--custom-brand-1: #3ba235;
10+
--custom-brand-2: #ff8a4f;
11+
--custom-brand-3: #ff6a07;
11212
}
11313

11414
html.dark {
115-
--vp-home-hero-image-background-image: linear-gradient(-45deg, #9e321a 50%, #128223 50%);
116-
}
117-
118-
@media (min-width: 640px) {
119-
:root {
120-
--vp-home-hero-image-filter: blur(56px);
121-
}
122-
}
123-
124-
@media (min-width: 960px) {
125-
:root {
126-
--vp-home-hero-image-filter: blur(68px);
127-
}
128-
}
129-
130-
/**
131-
* Component: Custom Block
132-
* -------------------------------------------------------------------------- */
133-
134-
:root {
135-
--vp-custom-block-tip-border: transparent;
136-
--vp-custom-block-tip-bg: #dbebfdc2;
137-
}
15+
--vp-c-brand-1: #ffae77;
16+
--vp-c-brand-2: #ff8a4f;
17+
--vp-c-brand-3: #fb681f;
18+
--vp-c-brand-soft: #ff662069;
13819

139-
html.dark {
140-
--vp-custom-block-tip-bg: #273646c2;
141-
}
142-
143-
.i-logos\:mobx-icon {
144-
background: url(/mobx.svg) no-repeat;
145-
background-size: 100% 100%;
146-
background-color: transparent;
147-
width: 1.2em;
148-
height: 1.2em;
149-
}
150-
151-
/**
152-
* Component: Algolia
153-
* -------------------------------------------------------------------------- */
154-
155-
.DocSearch {
156-
--docsearch-primary-color: var(--vp-c-brand-1) !important;
157-
}
158-
159-
.custom-block > .custom-block-title:first-child:last-child {
160-
margin-top: -8px;
161-
}
162-
p:has(>em:first-child:last-child) + div[class*=language-] {
163-
margin-top: -10px;
164-
}
165-
166-
.vp-doc strong a {
167-
font-weight: bold;
168-
}
169-
170-
.vp-doc strong code {
171-
font-weight: bold;
172-
}
173-
174-
.VPHome {
175-
flex: 1;
176-
display: flex;
177-
flex-direction: column;
178-
margin-bottom: 0 !important;
179-
}
180-
181-
.VPContent.is-home {
182-
display: flex;
183-
}
184-
185-
.VPHero.has-image.VPHomeHero {
186-
flex: 1;
187-
display: flex;
188-
flex-direction: column;
189-
}
190-
191-
.VPHero.has-image .main {position: relative;}
192-
193-
.VPHero.has-image .container {
194-
padding-left: 2rem;
195-
padding-right: 2rem;
196-
margin-top: auto;
197-
margin-bottom: auto;
198-
padding-bottom: 7vh;
199-
}
200-
201-
.main > .heading > .text {
202-
font-size: 24px;
203-
line-height: 28px;
204-
padding-top: 20px;
205-
}
206-
207-
html .VPFooter {
208-
border-top: 0 !important;
209-
}
210-
211-
html:has(.VPFeatures.VPHomeFeatures .items > .item) .VPHero.has-image .container {
212-
margin-bottom: 0;
213-
margin-top: auto;
214-
}
215-
html:has(.VPFeatures.VPHomeFeatures .items > .item) .VPHero.has-image.VPHomeHero {
216-
flex: 1;
217-
}
218-
html:has(.VPFeatures.VPHomeFeatures .items > .item) .VPFeatures.VPHomeFeatures {
219-
margin-bottom: auto;
220-
flex: 1;
221-
}
222-
223-
html.gh-preview .main > .heading > .name {
224-
line-height: 72px;
225-
font-size: 68px;
226-
}
227-
html.gh-preview .main > .heading > .text {
228-
font-size: 43px;
229-
line-height: 48px;
230-
}
231-
html.gh-preview .main > .actions {
232-
opacity: 0;
20+
--custom-brand-1: #128223;
21+
--custom-brand-2: #fb681f;
22+
--custom-brand-3: #9e321a;
23323
}
234-
html.gh-preview .VPFeatures.VPHomeFeatures {
235-
opacity: 0;
236-
}

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@unocss/preset-icons": "^0.61.9",
77
"shiki": "^3.3.0",
88
"vue": "^3.5.13",
9+
"sborshik": "^1.0.12",
910
"unocss": "^0.61.9",
1011
"vite": "^5.3.1",
1112
"vitepress": "^1.6.4"

0 commit comments

Comments
 (0)