Skip to content

Commit 23adfb3

Browse files
ConnectedSystemsConnectedSystems
committed
Add theme files
1 parent ad00659 commit 23adfb3

File tree

2 files changed

+234
-0
lines changed

2 files changed

+234
-0
lines changed

‎docs/src/.vitepress/theme/index.ts‎

Whitespace-only changes.

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

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
@import url(https://fonts.googleapis.com/css?family=Space+Mono:regular,italic,700,700italic);
2+
@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:regular,italic,700,700italic);
3+
4+
/* Customize default theme styling by overriding CSS variables:
5+
https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
6+
*/
7+
8+
/* Layouts */
9+
10+
/*
11+
:root {
12+
--vp-layout-max-width: 1440px;
13+
} */
14+
15+
.VPHero .clip {
16+
white-space: pre;
17+
max-width: 500px;
18+
}
19+
20+
/* Fonts */
21+
22+
:root {
23+
/* Typography */
24+
--vp-font-family-base: "Barlow", "Inter var experimental", "Inter var",
25+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
26+
Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
27+
28+
/* Code Snippet font */
29+
--vp-font-family-mono: "Space Mono", Menlo, Monaco, Consolas, "Courier New",
30+
monospace;
31+
}
32+
33+
/* Colors */
34+
/**
35+
* Colors
36+
* -------------------------------------------------------------------------- */
37+
38+
:root {
39+
--c-yellow-1: #ffd859;
40+
--c-yellow-2: #f7d336;
41+
--c-yellow-3: #dec96e;
42+
--c-yellow-soft-1: #ecb732;
43+
--c-yellow-soft-2: #c99513;
44+
45+
--c-teal: #086367;
46+
--c-teal-light: #33898d;
47+
48+
--c-white-dark: #f8f8f8;
49+
--c-black-darker: #0d121b;
50+
--c-black: #111827;
51+
--c-black-light: #161f32;
52+
--c-black-lighter: #262a44;
53+
54+
--c-green-1: #52ce63;
55+
--c-green-2: #8ae99c;
56+
--c-green-3: #51a256;
57+
--c-green-soft: #316334;
58+
59+
/* light theme is a bit different */
60+
--vp-c-brand-1: var(--vp-c-green-1);
61+
--vp-c-brand-2: var(--vp-c-green-2);
62+
--vp-c-brand-3: var(--vp-c-green-3);
63+
--vp-c-brand-soft: var(--vp-c-green-soft);
64+
65+
--c-text-dark-1: #d9e6eb;
66+
--c-text-dark-2: #c4dde6;
67+
--c-text-dark-3: #abc4cc;
68+
--c-text-light-1: #2c3e50;
69+
--c-text-light-2: #476582;
70+
--c-text-light-3: #90a4b7;
71+
72+
--vp-c-brand-dark: var(--c-green-soft);
73+
--vp-c-brand-darker: var(--c-green-soft);
74+
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
75+
--vp-c-brand-text: var(--c-text-light-1);
76+
--c-bg-accent: var(--c-white-dark);
77+
--code-bg-color: var(--c-white-dark);
78+
--code-inline-bg-color: var(--c-white-dark);
79+
--code-font-family: 'dm', source-code-pro, Menlo, Monaco, Consolas,
80+
'Courier New', monospace;
81+
--code-font-size: 16px;
82+
83+
--vp-code-block-bg: var(--vp-c-bg-alt);
84+
--vp-code-line-highlight-color: rgba(0, 0, 0, 0.075);
85+
--vp-code-color: var(--vp-text-color);
86+
}
87+
88+
html.dark:root {
89+
/* --c-black: #ffffff;
90+
--c-white: #000000; */
91+
/* --c-divider-light: rgba(60, 60, 67, 0.12);
92+
--c-divider-dark: rgba(84, 84, 88, 0.48); */
93+
/* --c-brand-light: var(--c-yellow-light); */
94+
95+
--vp-c-brand-1: var(--c-yellow-1);
96+
--vp-c-brand-2: var(--c-yellow-2);
97+
--vp-c-brand-3: var(--c-yellow-3);
98+
99+
--vp-c-bg-alpha-with-backdrop: rgba(20, 25, 36, 0.7);
100+
--vp-c-bg-alpha-without-backdrop: rgba(20, 25, 36, 0.9);
101+
102+
--vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
103+
104+
--vp-c-text-1: var(--c-text-dark-1);
105+
--vp-c-brand-text: var(--c-text-light-1);
106+
--c-text-light: var(--c-text-dark-2);
107+
--c-text-lighter: var(--c-text-dark-3);
108+
--c-divider: var(--c-divider-dark);
109+
--c-bg-accent: var(--c-black-light);
110+
/* --vp-code-inline-bg: var(--vp-c-black-light); */
111+
112+
--vp-c-bg: var(--c-black);
113+
--vp-c-bg-soft: var(--c-black-light);
114+
--vp-c-bg-soft-up: var(--c-black-lighter);
115+
--vp-c-bg-mute: var(--c-black-light);
116+
--vp-c-bg-soft-mute: var(--c-black-lighter);
117+
--vp-c-bg-alt: #0d121b;
118+
--vp-c-bg-elv: var(--vp-c-bg-soft);
119+
--vp-c-bg-elv-mute: var(--vp-c-bg-soft-mute);
120+
--vp-c-mute: var(--vp-c-bg-mute);
121+
--vp-c-mute-dark: var(--c-black-lighter);
122+
--vp-c-mute-darker: var(--c-black-darker);
123+
124+
--vp-home-hero-name-background: -webkit-linear-gradient(78deg,
125+
var(--c-yellow-2) 30%,
126+
var(--c-green-3));
127+
}
128+
129+
html.dark .DocSearch {
130+
--docsearch-hit-active-color: var(--c-text-light-1);
131+
}
132+
133+
/**
134+
* Component: Button
135+
* -------------------------------------------------------------------------- */
136+
137+
:root {
138+
--vp-button-brand-border: var(--c-yellow-soft-1);
139+
--vp-button-brand-text: var(--c-black);
140+
--vp-button-brand-bg: var(--c-yellow-1);
141+
--vp-button-brand-hover-border: var(--c-yellow-2);
142+
--vp-button-brand-hover-text: var(--c-black-darker);
143+
--vp-button-brand-hover-bg: var(--c-yellow-2);
144+
--vp-button-brand-active-border: var(--c-yellow-soft-1);
145+
--vp-button-brand-active-text: var(--c-black-darker);
146+
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
147+
}
148+
149+
/**
150+
* Component: Home
151+
* -------------------------------------------------------------------------- */
152+
153+
:root {
154+
--vp-home-hero-name-color: transparent;
155+
--vp-home-hero-name-background: linear-gradient(292deg,
156+
var(--c-text-light-2) 50%,
157+
var(--c-green-2));
158+
--vp-home-hero-image-background-image: linear-gradient(15deg,
159+
var(--c-yellow-2) 35%,
160+
var(--c-text-light-2) 15%);
161+
--vp-home-hero-image-filter: blur(40px);
162+
}
163+
164+
.VPHero .VPImage.image-src {
165+
max-height: 192px;
166+
}
167+
168+
@media (min-width: 640px) {
169+
:root {
170+
--vp-home-hero-image-filter: blur(56px);
171+
}
172+
173+
.VPHero .VPImage.image-src {
174+
max-height: 256px;
175+
}
176+
}
177+
178+
@media (min-width: 960px) {
179+
:root {
180+
--vp-home-hero-image-filter: blur(72px);
181+
}
182+
183+
.VPHero .VPImage.image-src {
184+
max-height: 320px;
185+
}
186+
}
187+
188+
.become-sponsor {
189+
font-size: 0.9em;
190+
font-weight: 700;
191+
width: auto;
192+
text-align: center;
193+
background-color: transparent;
194+
padding: 0.75em 2em;
195+
border-radius: 2em;
196+
transition: all 0.15s ease;
197+
box-sizing: border-box;
198+
border: 2px solid var(--c-yellow-2);
199+
}
200+
201+
.become-sponsor:hover {
202+
background-color: var(--c-yellow-1);
203+
text-decoration: none;
204+
border-color: var(--c-yellow-1);
205+
color: var(--c-text-light-1);
206+
}
207+
208+
.vp-doc a {
209+
text-decoration: none;
210+
}
211+
212+
.vp-doc a:hover {
213+
text-decoration: underline;
214+
}
215+
216+
.sponsors-top .become-sponsor {
217+
font-size: 0.75em;
218+
padding: 0.2em;
219+
width: auto;
220+
max-width: 150px;
221+
}
222+
223+
kbd {
224+
display: inline-block;
225+
padding: 3px 5px;
226+
font-size: 0.65em;
227+
color: var(--vp-c-text-1);
228+
vertical-align: middle;
229+
background-color: var(--vp-c-bg-mute);
230+
border: solid 1px var(--vp-c-bg-soft-mute);
231+
border-radius: 6px;
232+
box-shadow: inset 0 -1px 0 var(--vp-c-bg-soft-mute);
233+
line-height: 0.95em;
234+
}

0 commit comments

Comments
 (0)