Skip to content

Commit bc373b9

Browse files
donmckennadonmckenna
authored
Merge branch 'main' into fvsch/update-to-gtm
2 parents 6449d84 + 98ab743 commit bc373b9

File tree

14 files changed

+1361
-2133
lines changed

14 files changed

+1361
-2133
lines changed

‎.vitepress/theme/components/AuthButtons/linkStyles.scss‎

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,47 @@
1-
21
.link {
3-
--outline-color-hsl: 0, 0%, 100%;
4-
--outline-opacity: 0.08;
5-
--text-strong-color: #fff;
6-
display: flex;
7-
align-items: center;
8-
height: 36px;
9-
padding: 0 20px;
10-
border-radius: 8px;
11-
color: var(--text-strong-color);
12-
font-size: 13px;
13-
font-weight: 500;
14-
text-decoration: none;
15-
box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
16-
background-color: hsla(224, 32%, 28%, 0.24);
17-
backdrop-filter: blur(8px);
18-
transition: 0.1s ease;
19-
transition-property: background-color, box-shadow, color;
20-
}
21-
22-
.light {
23-
&:hover {
24-
--outline-opacity: 0.14;
25-
color: var(--text-strong-color);
26-
background-color: hsla(224, 32%, 28%, 0.54);
27-
}
28-
:root:not(.dark) & {
29-
--outline-color-hsl: 224, 32%, 28%;
30-
--outline-opacity: 0.1;
31-
color: hsl(240, 6%, 23%);
32-
background-color: hsla(224, 32%, 28%, 0.1);
33-
&:hover {
34-
--outline-opacity: 0.2;
35-
background-color: transparent;
36-
}
37-
}
38-
}
39-
40-
.accent {
2+
--outline-color-hsl: 0, 0%, 100%;
3+
--outline-opacity: 0.08;
4+
--text-strong-color: #fff;
5+
display: flex;
6+
align-items: center;
7+
height: 36px;
8+
padding: 0 20px;
9+
border-radius: 8px;
10+
color: var(--text-strong-color);
11+
font-size: 13px;
12+
font-weight: 500;
13+
text-decoration: none;
14+
box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
15+
background-color: hsla(224, 32%, 28%, 0.24);
16+
backdrop-filter: blur(8px);
17+
transition: 0.1s ease;
18+
transition-property: background-color, box-shadow, color;
19+
}
20+
21+
.light {
22+
&:hover {
4123
--outline-opacity: 0.14;
4224
color: var(--text-strong-color);
43-
background-color: hsl(214, 87%, 51%);
25+
background-color: hsla(224, 32%, 28%, 0.54);
26+
}
27+
:root:not(.dark) & {
28+
--outline-color-hsl: 224, 32%, 28%;
29+
--outline-opacity: 0.1;
30+
color: hsl(240, 6%, 23%);
31+
background-color: hsla(224, 32%, 28%, 0.1);
4432
&:hover {
45-
--outline-opacity: 0.24;
46-
background-color: hsl(208, 100%, 53%);
33+
--outline-opacity: 0.2;
34+
background-color: transparent;
4735
}
48-
}
36+
}
37+
}
38+
39+
.accent {
40+
--outline-opacity: 0.14;
41+
color: var(--text-strong-color);
42+
background-color: hsl(214, 87%, 51%);
43+
&:hover {
44+
--outline-opacity: 0.24;
45+
background-color: hsl(208, 100%, 53%);
46+
}
47+
}

‎.vitepress/theme/icons/index.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Tell Vite to load all SVG icons in the icons folder as part of the build.
22
const importedIconsUrls = import.meta.glob('./*.svg', {
3-
as: 'url',
3+
query: '?url',
4+
import: 'default',
45
eager: true,
56
});
67

@@ -9,6 +10,6 @@ const iconNamePattern = /([0-9a-zA-Z-]+)\.svg$/;
910
export const iconsUrls: Record<string, string> = Object.fromEntries(
1011
Object.entries(importedIconsUrls).map(([path, url]) => {
1112
const nameMatches = path.match(iconNamePattern);
12-
return [nameMatches ? nameMatches[1] : path, url];
13-
})
13+
return [nameMatches ? nameMatches[1] : path, url as string];
14+
}),
1415
);

‎.vitepress/theme/styles/content-aside.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// --------------------------------
2+
// -- Aside / Table of Contents
3+
4+
// Widen aside
5+
.VPDoc .aside {
6+
max-width: 300px !important;
7+
position: relative;
8+
padding-left: 0;
9+
@media (min-width: 1380px) {
10+
max-width: 248px;
11+
}
12+
@media (min-width: 1500px) {
13+
max-width: 300px;
14+
}
15+
@media (min-width: 1600px) {
16+
max-width: 328px;
17+
}
18+
}
19+
.aside-container {
20+
width: 300px !important;
21+
max-width: 300px;
22+
}
23+
.aside-content {
24+
padding-top: 56px;
25+
}
26+
27+
// Add gap between title and list, but account for hardcoded `outline-marker` `top`
28+
.VPDocAside .outline-title {
29+
margin-block-end: -1px;
30+
transform: translateY(-6px);
31+
}
32+
33+
// Space out links without affecting `outline-marker` too much
34+
.VPDocAside .outline-link {
35+
padding: 6px 0;
36+
font-size: 12.5px;
37+
transition-duration: 0.1s;
38+
}
39+
40+
// Don't clip text in the outline
41+
.VPDocAsideOutline .outline-link {
42+
white-space: normal;
43+
text-overflow: initial;
44+
padding: 5px 0;
45+
font-size: 13px;
46+
line-height: 18px;
47+
}

‎.vitepress/theme/styles/content.scss‎

Lines changed: 182 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,81 @@
1+
.vp-doc a {
2+
transition: 0.1s ease;
3+
}
4+
5+
.vp-doc p > strong > a,
6+
.vp-doc p > a,
7+
.vp-doc li > strong > a,
8+
.vp-doc li > a,
9+
.vp-doc td > strong > a,
10+
.vp-doc td > a {
11+
text-decoration: underline;
12+
text-underline-offset: 2px;
13+
text-decoration-thickness: 1px;
14+
transition: 0.1s ease;
15+
transition-property: color, text-underline-offset;
16+
:root.dark & {
17+
color: rgb(131, 222, 255);
18+
}
19+
&:hover,
20+
:root.dark &:hover {
21+
color: var(--vp-c-text-1);
22+
text-decoration-thickness: 1px;
23+
text-underline-offset: 4px;
24+
}
25+
}
26+
27+
.vp-doc h1,
28+
.vp-doc h2,
29+
.vp-doc h3,
30+
.vp-doc h4,
31+
.vp-doc h5,
32+
.vp-doc h6 {
33+
width: max-content;
34+
max-width: 100%;
35+
}
36+
37+
.vp-doc .header-anchor {
38+
@media (min-width: 960px) {
39+
position: absolute;
40+
left: -28px;
41+
padding: 0 18px;
42+
transform: scale(0.94);
43+
}
44+
}
45+
46+
.vp-doc h1 + p,
47+
.vp-doc h2 + p {
48+
margin-top: 0;
49+
}
50+
151
.vp-doc h1 {
252
margin-bottom: 24px;
353
}
454

555
.vp-doc h2 {
656
margin: 44px 0 24px;
57+
padding-top: 16px !important;
758
border-top: 1px solid var(--vp-c-divider-light);
8-
padding-top: 32px;
59+
}
60+
61+
.vp-doc h2 .header-anchor {
62+
top: 16px;
63+
}
64+
65+
.vp-doc h3 {
66+
margin-top: 40px !important;
67+
}
68+
69+
.vp-doc pre code {
70+
font-size: 13px !important;
71+
}
72+
73+
.vp-doc :not(pre) > code {
74+
color: var(--vp-text-code);
75+
}
76+
77+
.vp-doc div[class*='language-'] {
78+
margin: 32px 0 40px;
979
}
1080

1181
// Wrap code examples
@@ -16,6 +86,15 @@
1686
word-break: break-word;
1787
}
1888

89+
.vp-doc p,
90+
.vp-doc li {
91+
font-size: 15px;
92+
line-height: 1.8;
93+
}
94+
.vp-doc p {
95+
margin: 24px 0;
96+
}
97+
1998
.vp-doc td,
2099
.vp-doc th {
21100
font-size: 14px;
@@ -29,10 +108,22 @@
29108
cursor: default;
30109
}
31110

111+
.vp-doc p a {
112+
display: inline-block;
113+
text-underline-offset: 2px;
114+
text-decoration-thickness: 1px;
115+
}
116+
32117
.vp-doc img {
33118
margin: 8px 0;
34119
}
35120

121+
.vp-doc p > img,
122+
.vp-doc > div > img {
123+
margin: 40px 0;
124+
border-radius: 6px;
125+
}
126+
36127
.vp-doc figure {
37128
margin-top: 1.5rem;
38129
margin-bottom: 1.5rem;
@@ -75,6 +166,11 @@
75166
}
76167
}
77168

169+
.vp-code-group .tabs label {
170+
font-size: 13px !important;
171+
font-weight: 600;
172+
}
173+
78174
.vp-doc .footnotes-sep {
79175
margin: 44px 0 32px;
80176
border-top: 1px solid var(--vp-c-divider-light);
@@ -96,3 +192,88 @@
96192
margin-left: auto !important;
97193
margin-right: auto !important;
98194
}
195+
196+
// --------------------------------
197+
// Community Projects
198+
199+
.community-project-screenshot {
200+
width: 100%;
201+
max-width: 760px;
202+
border-radius: 12px;
203+
overflow: hidden;
204+
img {
205+
max-width: min(100%, 800px);
206+
margin: 0 !important;
207+
}
208+
@media screen and (max-height: 768px) {
209+
max-width: 680px;
210+
max-height: 352px;
211+
}
212+
@media screen and (max-width: 960px) {
213+
max-width: 680px;
214+
max-height: 352px;
215+
}
216+
}
217+
218+
// --------------------------------
219+
// Twitter Tweet Embed
220+
221+
.twitter-tweet {
222+
position: relative;
223+
display: block;
224+
max-width: 640px;
225+
padding: 64px 32px 16px !important;
226+
margin: 52px 0 !important;
227+
color: var(--vp-c-text-2);
228+
font-size: 14px;
229+
font-weight: 500;
230+
@media screen and (max-width: 960px) {
231+
padding: 64px 24px 16px !important;
232+
padding-right: 0 !important;
233+
}
234+
235+
& > p {
236+
margin-bottom: 16px !important;
237+
color: var(--vp-c-text-1) !important;
238+
font-size: 16px;
239+
@media screen and (max-width: 500px) {
240+
font-size: 14px !important;
241+
}
242+
}
243+
244+
&::before {
245+
--twitter-icon-mask-size: 26px;
246+
--block-icon-url: url('@theme/icons/fa-twitter.svg');
247+
content: '';
248+
position: absolute;
249+
top: 16px;
250+
left: 32px;
251+
width: var(--twitter-icon-mask-size);
252+
height: var(--twitter-icon-mask-size);
253+
transition: background-color 0.14s ease;
254+
background-color: #1da1f2;
255+
mask-image: var(--twitter-icon-img);
256+
mask-position: center;
257+
mask-repeat: no-repeat;
258+
mask-size: cover;
259+
}
260+
}
261+
262+
// --------------------------------
263+
// Footer / Above Footer
264+
265+
.VPLink.link.edit-link-button {
266+
gap: 4px;
267+
font-size: 13px;
268+
svg {
269+
transform: scale(0.92);
270+
}
271+
}
272+
273+
.content-container footer.VPDocFooter .edit-info {
274+
margin-top: 20px;
275+
}
276+
277+
.edit-info {
278+
padding-bottom: 24px !important;
279+
}

0 commit comments

Comments
 (0)