jekyll-vitepress-theme 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +93 -0
  4. data/_includes/doc_footer.html +184 -0
  5. data/_includes/head.html +98 -0
  6. data/_includes/home.html +315 -0
  7. data/_includes/local_nav.html +23 -0
  8. data/_includes/nav.html +232 -0
  9. data/_includes/search.html +14 -0
  10. data/_includes/sidebar.html +47 -0
  11. data/_includes/vp_slots/doc_footer.html +0 -0
  12. data/_includes/vp_slots/head.html +1 -0
  13. data/_includes/vp_slots/layout_bottom.html +0 -0
  14. data/_layouts/default.html +127 -0
  15. data/_layouts/home.html +5 -0
  16. data/assets/css/vitepress-components.css +1524 -0
  17. data/assets/css/vitepress-core.css +2149 -0
  18. data/assets/css/vitepress-overrides.css +1408 -0
  19. data/assets/css/vp-icons.css +24 -0
  20. data/assets/images/favicon/apple-touch-icon.png +0 -0
  21. data/assets/images/favicon/favicon-96x96.png +0 -0
  22. data/assets/images/favicon/favicon.ico +0 -0
  23. data/assets/images/favicon/site.webmanifest +21 -0
  24. data/assets/images/favicon/web-app-manifest-192x192.png +0 -0
  25. data/assets/images/favicon/web-app-manifest-512x512.png +0 -0
  26. data/assets/images/file-icons/css.svg +1 -0
  27. data/assets/images/file-icons/default.svg +1 -0
  28. data/assets/images/file-icons/docker.svg +1 -0
  29. data/assets/images/file-icons/env.svg +1 -0
  30. data/assets/images/file-icons/go.svg +1 -0
  31. data/assets/images/file-icons/html.svg +1 -0
  32. data/assets/images/file-icons/java.svg +1 -0
  33. data/assets/images/file-icons/javascript.svg +1 -0
  34. data/assets/images/file-icons/json.svg +1 -0
  35. data/assets/images/file-icons/kotlin.svg +1 -0
  36. data/assets/images/file-icons/make.svg +1 -0
  37. data/assets/images/file-icons/markdown.svg +1 -0
  38. data/assets/images/file-icons/php.svg +1 -0
  39. data/assets/images/file-icons/python.svg +1 -0
  40. data/assets/images/file-icons/ruby.svg +1 -0
  41. data/assets/images/file-icons/rust.svg +1 -0
  42. data/assets/images/file-icons/shell.svg +1 -0
  43. data/assets/images/file-icons/sql.svg +1 -0
  44. data/assets/images/file-icons/text.svg +1 -0
  45. data/assets/images/file-icons/toml.svg +1 -0
  46. data/assets/images/file-icons/typescript.svg +1 -0
  47. data/assets/images/file-icons/vue.svg +1 -0
  48. data/assets/images/file-icons/xml.svg +1 -0
  49. data/assets/images/file-icons/yaml-dark.svg +1 -0
  50. data/assets/images/file-icons/yaml.svg +1 -0
  51. data/assets/images/logo.svg +337 -0
  52. data/assets/images/social-icons/bitbucket.svg +1 -0
  53. data/assets/images/social-icons/bluesky.svg +1 -0
  54. data/assets/images/social-icons/devdotto.svg +1 -0
  55. data/assets/images/social-icons/discord.svg +1 -0
  56. data/assets/images/social-icons/dribbble.svg +1 -0
  57. data/assets/images/social-icons/facebook.svg +1 -0
  58. data/assets/images/social-icons/github.svg +1 -0
  59. data/assets/images/social-icons/gitlab.svg +1 -0
  60. data/assets/images/social-icons/instagram.svg +1 -0
  61. data/assets/images/social-icons/linkedin.svg +1 -0
  62. data/assets/images/social-icons/mastodon.svg +1 -0
  63. data/assets/images/social-icons/medium.svg +1 -0
  64. data/assets/images/social-icons/npm.svg +1 -0
  65. data/assets/images/social-icons/reddit.svg +1 -0
  66. data/assets/images/social-icons/rss.svg +1 -0
  67. data/assets/images/social-icons/slack.svg +1 -0
  68. data/assets/images/social-icons/stackoverflow.svg +1 -0
  69. data/assets/images/social-icons/telegram.svg +1 -0
  70. data/assets/images/social-icons/twitch.svg +1 -0
  71. data/assets/images/social-icons/twitter.svg +1 -0
  72. data/assets/images/social-icons/x.svg +1 -0
  73. data/assets/images/social-icons/youtube.svg +1 -0
  74. data/assets/images/theme/vitepress-logo-large.svg +340 -0
  75. data/assets/images/theme/vitepress-logo-mini.svg +337 -0
  76. data/assets/js/vitepress-theme.js +1301 -0
  77. data/lib/jekyll/vitepress_theme/hooks.rb +111 -0
  78. data/lib/jekyll/vitepress_theme/version.rb +5 -0
  79. data/lib/jekyll-vitepress-theme.rb +3 -0
  80. metadata +143 -0
@@ -0,0 +1,1408 @@
1
+ /* Jekyll integration and compatibility tweaks */
2
+
3
+ html,
4
+ body {
5
+ overflow-x: hidden;
6
+ }
7
+
8
+ .VPBackdrop {
9
+ opacity: 0;
10
+ pointer-events: none;
11
+ }
12
+
13
+ .VPBackdrop.is-active {
14
+ opacity: 1;
15
+ pointer-events: auto;
16
+ }
17
+
18
+ body.vp-nav-screen-open {
19
+ overflow: hidden;
20
+ }
21
+
22
+ .VPNavBar > .wrapper > .container > .title,
23
+ .VPNavBar > .wrapper > .container > .content > .content-body,
24
+ .vp-doc div[class*='language-'],
25
+ .vp-doc [class*='language-'] code,
26
+ .vp-doc [class*='language-'] code .highlighted,
27
+ .vp-doc [class*='language-'] code .diff,
28
+ .vp-doc .line-numbers-wrapper,
29
+ .vp-doc [class*='language-'] > span.lang {
30
+ transition-duration: 0.25s;
31
+ }
32
+
33
+ .VPNavScreen[hidden] {
34
+ display: none !important;
35
+ }
36
+
37
+ .VPVersionSelector {
38
+ position: relative;
39
+ display: none;
40
+ }
41
+
42
+ @media (min-width: 768px) {
43
+ .VPVersionSelector {
44
+ display: flex;
45
+ align-items: center;
46
+ }
47
+ }
48
+
49
+ .VPVersionSelector .button {
50
+ display: flex;
51
+ align-items: center;
52
+ height: var(--vp-nav-height);
53
+ padding: 0 12px;
54
+ line-height: var(--vp-nav-height);
55
+ font-size: 14px;
56
+ font-weight: 500;
57
+ color: var(--vp-c-text-2);
58
+ transition: color 0.25s;
59
+ }
60
+
61
+ .VPVersionSelector .button:hover {
62
+ color: var(--vp-c-text-1);
63
+ }
64
+
65
+ .VPVersionSelector .text {
66
+ display: flex;
67
+ align-items: center;
68
+ gap: 2px;
69
+ }
70
+
71
+ .VPVersionSelector .text-icon {
72
+ font-size: 14px;
73
+ transition: transform 0.25s;
74
+ }
75
+
76
+ .VPVersionSelector.open .text-icon {
77
+ transform: rotate(270deg);
78
+ }
79
+
80
+ .VPVersionSelector .menu {
81
+ position: absolute;
82
+ top: calc(100% - 12px);
83
+ right: 0;
84
+ z-index: calc(var(--vp-z-index-nav) + 1);
85
+ min-width: 192px;
86
+ border: 1px solid var(--vp-c-divider);
87
+ border-radius: 8px;
88
+ padding: 6px;
89
+ background: var(--vp-c-bg-elv);
90
+ box-shadow: var(--vp-shadow-3);
91
+ }
92
+
93
+ .VPVersionSelector .menu[hidden] {
94
+ display: none !important;
95
+ }
96
+
97
+ .VPVersionSelector .menu .VPLink {
98
+ display: block;
99
+ border-radius: 6px;
100
+ padding: 0 10px;
101
+ line-height: 32px;
102
+ font-size: 13px;
103
+ color: var(--vp-c-text-1);
104
+ transition: color 0.25s, background-color 0.25s;
105
+ }
106
+
107
+ .VPVersionSelector .menu .VPLink:hover {
108
+ color: var(--vp-c-brand-1);
109
+ background: var(--vp-c-default-soft);
110
+ }
111
+
112
+ .VPNavScreen .menu + .version {
113
+ margin-top: 16px;
114
+ }
115
+
116
+ .VPNavScreen .version + .appearance {
117
+ margin-top: 24px;
118
+ }
119
+
120
+ .VPNavScreenVersion .text {
121
+ margin: 0;
122
+ line-height: 24px;
123
+ font-size: 12px;
124
+ font-weight: 600;
125
+ color: var(--vp-c-text-2);
126
+ }
127
+
128
+ .VPNavScreenVersion .version-link:last-child {
129
+ border-bottom: 0;
130
+ }
131
+
132
+ #vp-local-outline-dropdown .items[hidden] {
133
+ display: none;
134
+ }
135
+
136
+ #vp-local-outline-button {
137
+ display: flex;
138
+ align-items: center;
139
+ gap: 2px;
140
+ }
141
+
142
+ #vp-local-outline-dropdown .outline .VPDocOutlineItem {
143
+ padding: 0 16px;
144
+ }
145
+
146
+ #vp-search-button {
147
+ cursor: pointer;
148
+ }
149
+
150
+ @media (min-width: 768px) {
151
+ .VPNavBarSearchButton {
152
+ border: 1px solid var(--vp-c-border);
153
+ background-color: var(--vp-c-bg-soft);
154
+ }
155
+
156
+ .VPNavBarSearchButton .keys {
157
+ background-color: var(--vp-c-bg);
158
+ }
159
+ }
160
+
161
+ body.vp-search-open {
162
+ overflow: hidden;
163
+ }
164
+
165
+ .VPSearch[hidden] {
166
+ display: none !important;
167
+ }
168
+
169
+ .VPSearch {
170
+ position: fixed;
171
+ inset: 0;
172
+ z-index: calc(var(--vp-z-index-backdrop) + 20);
173
+ }
174
+
175
+ .VPSearchBackdrop {
176
+ position: absolute;
177
+ inset: 0;
178
+ background: var(--vp-backdrop-bg-color);
179
+ }
180
+
181
+ .VPSearchDialog {
182
+ position: relative;
183
+ margin: 88px auto 0;
184
+ border: 1px solid var(--vp-c-divider);
185
+ border-radius: 12px;
186
+ width: min(760px, calc(100vw - 32px));
187
+ background: var(--vp-c-bg);
188
+ box-shadow: var(--vp-shadow-5);
189
+ overflow: hidden;
190
+ }
191
+
192
+ .VPSearchBar {
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 12px;
196
+ border-bottom: 1px solid var(--vp-c-divider);
197
+ padding: 12px 16px;
198
+ }
199
+
200
+ .VPSearchBar .vpi-search {
201
+ color: var(--vp-c-text-2);
202
+ font-size: 18px;
203
+ }
204
+
205
+ .VPSearchBar input {
206
+ border: 0;
207
+ width: 100%;
208
+ line-height: 32px;
209
+ font-size: 15px;
210
+ color: var(--vp-c-text-1);
211
+ background: transparent;
212
+ outline: none;
213
+ }
214
+
215
+ .VPSearchBar kbd {
216
+ border: 1px solid var(--vp-c-divider);
217
+ border-radius: 4px;
218
+ padding: 0 6px;
219
+ line-height: 20px;
220
+ font-size: 12px;
221
+ color: var(--vp-c-text-2);
222
+ background: var(--vp-c-bg-soft);
223
+ }
224
+
225
+ .VPSearchResults {
226
+ max-height: min(62vh, 560px);
227
+ overflow-y: auto;
228
+ }
229
+
230
+ .VPSearchResult {
231
+ display: block;
232
+ border-top: 1px solid var(--vp-c-divider);
233
+ padding: 12px 16px;
234
+ transition: background-color 0.2s;
235
+ }
236
+
237
+ .VPSearchResult:first-child {
238
+ border-top: 0;
239
+ }
240
+
241
+ .VPSearchResult:hover,
242
+ .VPSearchResult.active {
243
+ background: var(--vp-c-default-soft);
244
+ }
245
+
246
+ .VPSearchResult .title {
247
+ display: block;
248
+ line-height: 22px;
249
+ font-size: 14px;
250
+ font-weight: 600;
251
+ color: var(--vp-c-text-1);
252
+ }
253
+
254
+ .VPSearchResult .snippet {
255
+ display: block;
256
+ margin-top: 2px;
257
+ line-height: 20px;
258
+ font-size: 12px;
259
+ color: var(--vp-c-text-2);
260
+ }
261
+
262
+ .VPSearchEmpty {
263
+ padding: 20px 16px;
264
+ line-height: 22px;
265
+ font-size: 14px;
266
+ color: var(--vp-c-text-2);
267
+ }
268
+
269
+ .VPDocFooter .last-updated {
270
+ margin-top: 8px;
271
+ }
272
+
273
+ .VPDocFooter .VPLastUpdated {
274
+ margin: 0;
275
+ line-height: 22px;
276
+ font-size: 13px;
277
+ color: var(--vp-c-text-2);
278
+ }
279
+
280
+ .VPDocFooter .VPLastUpdated time {
281
+ color: var(--vp-c-text-1);
282
+ }
283
+
284
+ .VPFooter .copyright a {
285
+ color: inherit;
286
+ text-decoration: underline;
287
+ text-underline-offset: 2px;
288
+ }
289
+
290
+ .VPFooter .container {
291
+ display: flex;
292
+ flex-direction: column;
293
+ align-items: center;
294
+ gap: 10px;
295
+ text-align: center;
296
+ }
297
+
298
+ .VPFooter .message,
299
+ .VPFooter .copyright {
300
+ margin: 0;
301
+ line-height: 28px;
302
+ font-size: 16px;
303
+ font-weight: 500;
304
+ }
305
+
306
+ .VPFooter .footer-brand-links {
307
+ display: inline-flex;
308
+ align-items: center;
309
+ justify-content: center;
310
+ flex-wrap: wrap;
311
+ gap: 16px;
312
+ }
313
+
314
+ .VPFooter .footer-chatwithwork-link {
315
+ display: inline-flex;
316
+ align-items: center;
317
+ vertical-align: middle;
318
+ white-space: nowrap;
319
+ text-decoration: none;
320
+ }
321
+
322
+ .VPFooter .footer-chatwithwork-logo {
323
+ display: block;
324
+ width: auto;
325
+ height: 32px;
326
+ }
327
+
328
+ .VPFooter .footer-rubyllm-link {
329
+ display: inline-flex;
330
+ align-items: center;
331
+ vertical-align: middle;
332
+ white-space: nowrap;
333
+ text-decoration: none;
334
+ }
335
+
336
+ .VPFooter .footer-rubyllm-logo {
337
+ display: block;
338
+ width: auto;
339
+ height: 36px;
340
+ }
341
+
342
+ .dark .VPFooter .footer-chatwithwork-logo {
343
+ filter: brightness(0) invert(1);
344
+ }
345
+
346
+ @media (min-width: 640px) {
347
+ .VPFooter .message,
348
+ .VPFooter .copyright {
349
+ line-height: 28px;
350
+ font-size: 16px;
351
+ }
352
+
353
+ .VPDocFooter .last-updated {
354
+ margin-top: 0;
355
+ }
356
+ }
357
+
358
+ :root {
359
+ --vp-home-hero-name-color: transparent;
360
+ --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
361
+ --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
362
+ --vp-home-hero-image-filter: blur(44px);
363
+ }
364
+
365
+ @media (min-width: 640px) {
366
+ :root {
367
+ --vp-home-hero-image-filter: blur(56px);
368
+ }
369
+ }
370
+
371
+ @media (min-width: 960px) {
372
+ :root {
373
+ --vp-home-hero-image-filter: blur(68px);
374
+ }
375
+ }
376
+
377
+ .VPHome {
378
+ margin-bottom: 96px;
379
+ }
380
+
381
+ @media (min-width: 768px) {
382
+ .VPHome {
383
+ margin-bottom: 128px;
384
+ }
385
+ }
386
+
387
+ .VPHero {
388
+ margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
389
+ padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
390
+ }
391
+
392
+ @media (min-width: 640px) {
393
+ .VPHero {
394
+ padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
395
+ }
396
+ }
397
+
398
+ @media (min-width: 960px) {
399
+ .VPHero {
400
+ padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
401
+ }
402
+ }
403
+
404
+ .VPHero .container {
405
+ display: flex;
406
+ flex-direction: column;
407
+ margin: 0 auto;
408
+ max-width: 1152px;
409
+ }
410
+
411
+ @media (min-width: 960px) {
412
+ .VPHero .container {
413
+ flex-direction: row;
414
+ }
415
+ }
416
+
417
+ .VPHero .main {
418
+ position: relative;
419
+ z-index: 10;
420
+ order: 2;
421
+ flex-grow: 1;
422
+ flex-shrink: 0;
423
+ }
424
+
425
+ .VPHero.has-image .container {
426
+ text-align: center;
427
+ }
428
+
429
+ @media (min-width: 960px) {
430
+ .VPHero.has-image .container {
431
+ text-align: left;
432
+ }
433
+
434
+ .VPHero .main {
435
+ order: 1;
436
+ width: calc((100% / 3) * 2);
437
+ }
438
+
439
+ .VPHero.has-image .main {
440
+ max-width: 592px;
441
+ }
442
+ }
443
+
444
+ .VPHero .heading {
445
+ display: flex;
446
+ flex-direction: column;
447
+ }
448
+
449
+ .VPHero .name,
450
+ .VPHero .text {
451
+ width: fit-content;
452
+ max-width: 392px;
453
+ letter-spacing: -0.4px;
454
+ line-height: 40px;
455
+ font-size: 32px;
456
+ font-weight: 700;
457
+ white-space: pre-wrap;
458
+ }
459
+
460
+ .VPHero.has-image .name,
461
+ .VPHero.has-image .text {
462
+ margin: 0 auto;
463
+ }
464
+
465
+ .VPHero .name {
466
+ color: var(--vp-home-hero-name-color);
467
+ }
468
+
469
+ .VPHero .clip {
470
+ background: var(--vp-home-hero-name-background);
471
+ -webkit-background-clip: text;
472
+ background-clip: text;
473
+ -webkit-text-fill-color: var(--vp-home-hero-name-color);
474
+ }
475
+
476
+ @media (min-width: 640px) {
477
+ .VPHero .name,
478
+ .VPHero .text {
479
+ max-width: 576px;
480
+ line-height: 56px;
481
+ font-size: 48px;
482
+ }
483
+ }
484
+
485
+ @media (min-width: 960px) {
486
+ .VPHero .name,
487
+ .VPHero .text {
488
+ line-height: 64px;
489
+ font-size: 56px;
490
+ }
491
+
492
+ .VPHero.has-image .name,
493
+ .VPHero.has-image .text {
494
+ margin: 0;
495
+ }
496
+ }
497
+
498
+ .VPHero .tagline {
499
+ padding-top: 8px;
500
+ max-width: 392px;
501
+ line-height: 28px;
502
+ font-size: 18px;
503
+ font-weight: 500;
504
+ white-space: pre-wrap;
505
+ color: var(--vp-c-text-2);
506
+ }
507
+
508
+ .VPHero.has-image .tagline {
509
+ margin: 0 auto;
510
+ }
511
+
512
+ @media (min-width: 640px) {
513
+ .VPHero .tagline {
514
+ padding-top: 12px;
515
+ max-width: 576px;
516
+ line-height: 32px;
517
+ font-size: 20px;
518
+ }
519
+ }
520
+
521
+ @media (min-width: 960px) {
522
+ .VPHero .tagline {
523
+ line-height: 36px;
524
+ font-size: 24px;
525
+ }
526
+
527
+ .VPHero.has-image .tagline {
528
+ margin: 0;
529
+ }
530
+ }
531
+
532
+ .VPHero .actions {
533
+ display: flex;
534
+ flex-wrap: wrap;
535
+ margin: -6px;
536
+ padding-top: 24px;
537
+ }
538
+
539
+ .VPHero.has-image .actions {
540
+ justify-content: center;
541
+ }
542
+
543
+ @media (min-width: 640px) {
544
+ .VPHero .actions {
545
+ padding-top: 32px;
546
+ }
547
+ }
548
+
549
+ @media (min-width: 960px) {
550
+ .VPHero.has-image .actions {
551
+ justify-content: flex-start;
552
+ }
553
+ }
554
+
555
+ .VPHero .action {
556
+ flex-shrink: 0;
557
+ padding: 6px;
558
+ }
559
+
560
+ .VPHero .image {
561
+ order: 1;
562
+ margin: -76px -24px -48px;
563
+ }
564
+
565
+ @media (min-width: 640px) {
566
+ .VPHero .image {
567
+ margin: -108px -24px -48px;
568
+ }
569
+ }
570
+
571
+ @media (min-width: 960px) {
572
+ .VPHero .image {
573
+ flex-grow: 1;
574
+ order: 2;
575
+ margin: 0;
576
+ min-height: 100%;
577
+ }
578
+ }
579
+
580
+ .VPHero .image-container {
581
+ position: relative;
582
+ margin: 0 auto;
583
+ width: 320px;
584
+ height: 320px;
585
+ }
586
+
587
+ @media (min-width: 640px) {
588
+ .VPHero .image-container {
589
+ width: 392px;
590
+ height: 392px;
591
+ }
592
+ }
593
+
594
+ @media (min-width: 960px) {
595
+ .VPHero .image-container {
596
+ display: flex;
597
+ justify-content: center;
598
+ align-items: center;
599
+ width: 100%;
600
+ height: 100%;
601
+ transform: translate(-32px, -32px);
602
+ }
603
+ }
604
+
605
+ .VPHero .image-bg {
606
+ position: absolute;
607
+ top: 50%;
608
+ left: 50%;
609
+ border-radius: 50%;
610
+ width: 192px;
611
+ height: 192px;
612
+ background-image: var(--vp-home-hero-image-background-image);
613
+ filter: var(--vp-home-hero-image-filter);
614
+ transform: translate(-50%, -50%);
615
+ }
616
+
617
+ @media (min-width: 640px) {
618
+ .VPHero .image-bg {
619
+ width: 256px;
620
+ height: 256px;
621
+ }
622
+ }
623
+
624
+ @media (min-width: 960px) {
625
+ .VPHero .image-bg {
626
+ width: 320px;
627
+ height: 320px;
628
+ }
629
+ }
630
+
631
+ .VPHero .image-src {
632
+ position: absolute;
633
+ top: 50%;
634
+ left: 50%;
635
+ max-width: 192px;
636
+ max-height: 192px;
637
+ width: 100%;
638
+ height: 100%;
639
+ padding: 18px;
640
+ object-fit: contain;
641
+ filter: drop-shadow(-2px 4px 6px rgba(0, 0, 0, 0.2));
642
+ transform: translate(-50%, -50%);
643
+ }
644
+
645
+ @media (min-width: 640px) {
646
+ .VPHero .image-src {
647
+ max-width: 256px;
648
+ max-height: 256px;
649
+ }
650
+ }
651
+
652
+ @media (min-width: 960px) {
653
+ .VPHero .image-src {
654
+ max-width: 320px;
655
+ max-height: 320px;
656
+ }
657
+ }
658
+
659
+ .VPButton {
660
+ display: inline-block;
661
+ border: 1px solid transparent;
662
+ text-align: center;
663
+ font-weight: 600;
664
+ white-space: nowrap;
665
+ transition: color 0.25s, border-color 0.25s, background-color 0.25s;
666
+ }
667
+
668
+ .VPButton:active {
669
+ transition: color 0.1s, border-color 0.1s, background-color 0.1s;
670
+ }
671
+
672
+ .VPButton.medium {
673
+ border-radius: 20px;
674
+ padding: 0 20px;
675
+ line-height: 38px;
676
+ font-size: 14px;
677
+ }
678
+
679
+ .VPButton.big {
680
+ border-radius: 24px;
681
+ padding: 0 24px;
682
+ line-height: 46px;
683
+ font-size: 16px;
684
+ }
685
+
686
+ .VPButton.brand {
687
+ border-color: var(--vp-button-brand-border);
688
+ color: var(--vp-button-brand-text);
689
+ background-color: var(--vp-button-brand-bg);
690
+ }
691
+
692
+ .VPButton.brand:hover {
693
+ border-color: var(--vp-button-brand-hover-border);
694
+ color: var(--vp-button-brand-hover-text);
695
+ background-color: var(--vp-button-brand-hover-bg);
696
+ }
697
+
698
+ .VPButton.brand:active {
699
+ border-color: var(--vp-button-brand-active-border);
700
+ color: var(--vp-button-brand-active-text);
701
+ background-color: var(--vp-button-brand-active-bg);
702
+ }
703
+
704
+ .VPButton.alt {
705
+ border-color: var(--vp-button-alt-border);
706
+ color: var(--vp-button-alt-text);
707
+ background-color: var(--vp-button-alt-bg);
708
+ }
709
+
710
+ .VPButton.alt:hover {
711
+ border-color: var(--vp-button-alt-hover-border);
712
+ color: var(--vp-button-alt-hover-text);
713
+ background-color: var(--vp-button-alt-hover-bg);
714
+ }
715
+
716
+ .VPButton.alt:active {
717
+ border-color: var(--vp-button-alt-active-border);
718
+ color: var(--vp-button-alt-active-text);
719
+ background-color: var(--vp-button-alt-active-bg);
720
+ }
721
+
722
+ .VPButton.sponsor {
723
+ border-color: var(--vp-button-sponsor-border);
724
+ color: var(--vp-button-sponsor-text);
725
+ background-color: var(--vp-button-sponsor-bg);
726
+ }
727
+
728
+ .VPButton.sponsor:hover {
729
+ border-color: var(--vp-button-sponsor-hover-border);
730
+ color: var(--vp-button-sponsor-hover-text);
731
+ background-color: var(--vp-button-sponsor-hover-bg);
732
+ }
733
+
734
+ .VPButton.sponsor:active {
735
+ border-color: var(--vp-button-sponsor-active-border);
736
+ color: var(--vp-button-sponsor-active-text);
737
+ background-color: var(--vp-button-sponsor-active-bg);
738
+ }
739
+
740
+ .VPFeatures {
741
+ position: relative;
742
+ padding: 0 24px;
743
+ }
744
+
745
+ @media (min-width: 640px) {
746
+ .VPFeatures {
747
+ padding: 0 48px;
748
+ }
749
+ }
750
+
751
+ @media (min-width: 960px) {
752
+ .VPFeatures {
753
+ padding: 0 64px;
754
+ }
755
+ }
756
+
757
+ .VPFeatures .container {
758
+ margin: 0 auto;
759
+ max-width: 1152px;
760
+ }
761
+
762
+ .VPFeatures .items {
763
+ display: flex;
764
+ flex-wrap: wrap;
765
+ margin: -8px;
766
+ }
767
+
768
+ .VPFeatures .item {
769
+ padding: 8px;
770
+ width: 100%;
771
+ }
772
+
773
+ @media (min-width: 640px) {
774
+ .VPFeatures .item.grid-2,
775
+ .VPFeatures .item.grid-4,
776
+ .VPFeatures .item.grid-6 {
777
+ width: calc(100% / 2);
778
+ }
779
+ }
780
+
781
+ @media (min-width: 768px) {
782
+ .VPFeatures .item.grid-2,
783
+ .VPFeatures .item.grid-4 {
784
+ width: calc(100% / 2);
785
+ }
786
+
787
+ .VPFeatures .item.grid-3 {
788
+ width: calc(100% / 3);
789
+ }
790
+
791
+ .VPFeatures .item.grid-6 {
792
+ width: calc(100% / 3);
793
+ }
794
+ }
795
+
796
+ @media (min-width: 960px) {
797
+ .VPFeatures .item.grid-4 {
798
+ width: calc(100% / 4);
799
+ }
800
+ }
801
+
802
+ .VPFeature {
803
+ display: block;
804
+ border: 1px solid var(--vp-c-bg-soft);
805
+ border-radius: 12px;
806
+ height: 100%;
807
+ background-color: var(--vp-c-bg-soft);
808
+ transition: border-color 0.25s, background-color 0.25s;
809
+ }
810
+
811
+ .VPFeature.link:hover {
812
+ border-color: var(--vp-c-brand-1);
813
+ }
814
+
815
+ .VPFeature .box {
816
+ display: flex;
817
+ flex-direction: column;
818
+ padding: 24px;
819
+ height: 100%;
820
+ }
821
+
822
+ .VPFeature .box > .VPImage {
823
+ margin-bottom: 20px;
824
+ }
825
+
826
+ .VPFeature .icon {
827
+ display: flex;
828
+ justify-content: center;
829
+ align-items: center;
830
+ margin-bottom: 20px;
831
+ border-radius: 6px;
832
+ background-color: var(--vp-c-default-soft);
833
+ width: 48px;
834
+ height: 48px;
835
+ font-size: 24px;
836
+ transition: background-color 0.25s;
837
+ }
838
+
839
+ .VPFeature .icon .icon-image {
840
+ max-width: 100%;
841
+ max-height: 100%;
842
+ width: auto;
843
+ height: auto;
844
+ }
845
+
846
+ .VPFeature .title {
847
+ margin: 0;
848
+ border: 0;
849
+ padding: 0;
850
+ letter-spacing: normal;
851
+ line-height: 24px;
852
+ font-size: 16px;
853
+ font-weight: 600;
854
+ }
855
+
856
+ .VPFeature .details {
857
+ margin: 0;
858
+ flex-grow: 1;
859
+ padding-top: 8px;
860
+ line-height: 24px;
861
+ font-size: 14px;
862
+ font-weight: 500;
863
+ color: var(--vp-c-text-2);
864
+ }
865
+
866
+ .VPFeature .link-text {
867
+ padding-top: 8px;
868
+ }
869
+
870
+ .VPFeature .link-text-value {
871
+ display: flex;
872
+ align-items: center;
873
+ margin: 0;
874
+ font-size: 14px;
875
+ font-weight: 500;
876
+ color: var(--vp-c-brand-1);
877
+ }
878
+
879
+ .VPFeature .link-text-icon {
880
+ margin-left: 6px;
881
+ }
882
+
883
+ .VPHomeContent {
884
+ padding-top: 48px;
885
+ }
886
+
887
+ @media (min-width: 640px) {
888
+ .VPHomeContent {
889
+ padding-top: 64px;
890
+ }
891
+ }
892
+
893
+ .VPHomeContent .container {
894
+ margin: auto;
895
+ width: 100%;
896
+ max-width: 1280px;
897
+ padding: 0 24px;
898
+ }
899
+
900
+ @media (min-width: 640px) {
901
+ .VPHomeContent .container {
902
+ padding: 0 48px;
903
+ }
904
+ }
905
+
906
+ @media (min-width: 960px) {
907
+ .VPHomeContent .container {
908
+ width: 100%;
909
+ padding: 0 64px;
910
+ }
911
+ }
912
+
913
+ .vp-doc .home-section-lead {
914
+ margin-top: -2px;
915
+ margin-bottom: 20px;
916
+ max-width: 900px;
917
+ line-height: 30px;
918
+ font-size: 20px;
919
+ font-weight: 500;
920
+ color: var(--vp-c-text-2);
921
+ }
922
+
923
+ @media (max-width: 767px) {
924
+ .vp-doc .home-section-lead {
925
+ line-height: 24px;
926
+ font-size: 16px;
927
+ }
928
+ }
929
+
930
+ .home-release-banner {
931
+ margin: 0 auto 28px;
932
+ padding: 0 24px;
933
+ max-width: 1152px;
934
+ }
935
+
936
+ @media (min-width: 640px) {
937
+ .home-release-banner {
938
+ padding: 0 48px;
939
+ }
940
+ }
941
+
942
+ @media (min-width: 960px) {
943
+ .home-release-banner {
944
+ padding: 0 64px;
945
+ }
946
+ }
947
+
948
+ .home-video {
949
+ margin: 0 0 36px;
950
+ }
951
+
952
+ .home-video-card {
953
+ border: 1px solid var(--vp-c-divider);
954
+ border-radius: 16px;
955
+ padding: 14px;
956
+ background: var(--vp-c-bg-soft);
957
+ }
958
+
959
+ .home-video-frame {
960
+ position: relative;
961
+ border: 1px dashed var(--vp-c-divider);
962
+ border-radius: 12px;
963
+ overflow: hidden;
964
+ padding-top: 56.25%;
965
+ background: linear-gradient(145deg, var(--vp-c-bg), var(--vp-c-bg-elv));
966
+ }
967
+
968
+ .home-video-content {
969
+ position: absolute;
970
+ inset: 0;
971
+ display: flex;
972
+ flex-direction: column;
973
+ justify-content: center;
974
+ align-items: center;
975
+ padding: 24px;
976
+ text-align: center;
977
+ }
978
+
979
+ .home-video-kicker {
980
+ margin: 0 0 8px;
981
+ letter-spacing: 0.08em;
982
+ text-transform: uppercase;
983
+ line-height: 16px;
984
+ font-size: 11px;
985
+ font-weight: 600;
986
+ color: var(--vp-c-text-2);
987
+ }
988
+
989
+ .home-video-content h3 {
990
+ margin: 0;
991
+ border-top: 0;
992
+ line-height: 32px;
993
+ font-size: 26px;
994
+ }
995
+
996
+ .home-video-content p {
997
+ margin: 10px 0 0;
998
+ max-width: 640px;
999
+ line-height: 24px;
1000
+ color: var(--vp-c-text-2);
1001
+ }
1002
+
1003
+ @media (max-width: 767px) {
1004
+ .home-video-content h3 {
1005
+ line-height: 28px;
1006
+ font-size: 21px;
1007
+ }
1008
+
1009
+ .home-video-content p {
1010
+ line-height: 22px;
1011
+ font-size: 14px;
1012
+ }
1013
+ }
1014
+
1015
+ .home-big-cards {
1016
+ display: grid;
1017
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1018
+ gap: 14px;
1019
+ margin: 24px 0 32px;
1020
+ }
1021
+
1022
+ @media (min-width: 960px) {
1023
+ .home-big-cards {
1024
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1025
+ gap: 16px;
1026
+ }
1027
+ }
1028
+
1029
+ .home-big-card {
1030
+ display: block;
1031
+ border: 1px solid var(--vp-c-divider);
1032
+ border-radius: 14px;
1033
+ padding: 18px;
1034
+ min-height: 210px;
1035
+ background: var(--vp-c-bg-soft);
1036
+ transition: border-color 0.25s, background-color 0.25s, transform 0.25s;
1037
+ }
1038
+
1039
+ .home-big-card:hover {
1040
+ border-color: var(--vp-c-brand-1);
1041
+ background: var(--vp-c-bg-elv);
1042
+ transform: translateY(-2px);
1043
+ }
1044
+
1045
+ .home-big-card-label {
1046
+ margin: 0;
1047
+ letter-spacing: 0.08em;
1048
+ text-transform: uppercase;
1049
+ line-height: 18px;
1050
+ font-size: 11px;
1051
+ font-weight: 600;
1052
+ color: var(--vp-c-text-2);
1053
+ }
1054
+
1055
+ .home-big-card h3 {
1056
+ margin: 10px 0 0;
1057
+ border-top: 0;
1058
+ line-height: 32px;
1059
+ font-size: 24px;
1060
+ }
1061
+
1062
+ .home-big-card p {
1063
+ margin: 10px 0 0;
1064
+ line-height: 24px;
1065
+ color: var(--vp-c-text-2);
1066
+ }
1067
+
1068
+ @media (max-width: 767px) {
1069
+ .home-big-card {
1070
+ min-height: 0;
1071
+ }
1072
+
1073
+ .home-big-card h3 {
1074
+ line-height: 28px;
1075
+ font-size: 20px;
1076
+ }
1077
+ }
1078
+
1079
+ .vp-doc .home-example {
1080
+ margin: 28px 0;
1081
+ border: 1px solid var(--vp-c-divider);
1082
+ border-radius: 14px;
1083
+ padding: 18px;
1084
+ background: var(--vp-c-bg-soft);
1085
+ }
1086
+
1087
+ .vp-doc .home-example > h6 {
1088
+ margin-top: 0;
1089
+ }
1090
+
1091
+ .vp-doc .home-example > h3 {
1092
+ margin-top: 18px;
1093
+ border-top: 0;
1094
+ }
1095
+
1096
+ .vp-doc .home-example > p:last-child {
1097
+ margin-bottom: 0;
1098
+ }
1099
+
1100
+ .vp-doc .home-example .highlighter-rouge {
1101
+ margin-bottom: 0;
1102
+ }
1103
+
1104
+ html:not(.dark) .theme-image.dark,
1105
+ html:not(.dark) .VPImage.dark,
1106
+ html:not(.dark) .only-dark,
1107
+ html.dark .theme-image.light,
1108
+ html.dark .VPImage.light,
1109
+ html.dark .only-light {
1110
+ display: none !important;
1111
+ }
1112
+
1113
+ /* Utility classes for project docs markdown */
1114
+ .vp-doc .fs-6 {
1115
+ line-height: 1.8;
1116
+ font-size: 1.25rem;
1117
+ color: var(--vp-c-text-2);
1118
+ }
1119
+
1120
+ .vp-doc .fw-300 {
1121
+ font-weight: 300;
1122
+ }
1123
+
1124
+ .vp-doc .text-delta {
1125
+ letter-spacing: 0.08em;
1126
+ text-transform: uppercase;
1127
+ font-size: 12px;
1128
+ color: var(--vp-c-text-2);
1129
+ }
1130
+
1131
+ .vp-doc .btn {
1132
+ display: inline-block;
1133
+ border: 1px solid var(--vp-button-alt-border);
1134
+ border-radius: 20px;
1135
+ padding: 8px 16px;
1136
+ font-size: 14px;
1137
+ font-weight: 500;
1138
+ color: var(--vp-button-alt-text);
1139
+ background: var(--vp-button-alt-bg);
1140
+ transition: background-color 0.25s, color 0.25s;
1141
+ }
1142
+
1143
+ .vp-doc .btn:hover {
1144
+ color: var(--vp-button-alt-hover-text);
1145
+ background: var(--vp-button-alt-hover-bg);
1146
+ }
1147
+
1148
+ .vp-doc .btn.btn-primary {
1149
+ color: var(--vp-button-brand-text);
1150
+ background: var(--vp-button-brand-bg);
1151
+ }
1152
+
1153
+ .vp-doc .btn.btn-primary:hover {
1154
+ color: var(--vp-button-brand-hover-text);
1155
+ background: var(--vp-button-brand-hover-bg);
1156
+ }
1157
+
1158
+ .vp-doc .mb-4 {
1159
+ margin-bottom: 16px;
1160
+ }
1161
+
1162
+ .vp-doc .mr-2 {
1163
+ margin-right: 8px;
1164
+ }
1165
+
1166
+ /* Optional docs-home utility blocks */
1167
+ .vp-doc .logo-container {
1168
+ display: flex;
1169
+ flex-wrap: wrap;
1170
+ align-items: center;
1171
+ gap: 16px;
1172
+ }
1173
+
1174
+ .vp-doc .provider-icons {
1175
+ display: grid;
1176
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1177
+ gap: 12px;
1178
+ margin: 22px 0 28px;
1179
+ }
1180
+
1181
+ .vp-doc .provider-logo {
1182
+ display: flex;
1183
+ align-items: center;
1184
+ justify-content: center;
1185
+ border: 1px solid var(--vp-c-divider);
1186
+ border-radius: 999px;
1187
+ padding: 9px 12px;
1188
+ min-height: 52px;
1189
+ gap: 8px;
1190
+ background: var(--vp-c-bg-soft);
1191
+ }
1192
+
1193
+ .dark .vp-doc .provider-logo img[src*='-text.svg'] {
1194
+ filter: brightness(0) invert(1) saturate(0.8);
1195
+ }
1196
+
1197
+ .vp-doc .logo-small {
1198
+ max-height: 18px;
1199
+ }
1200
+
1201
+ .vp-doc .logo-medium {
1202
+ max-height: 24px;
1203
+ }
1204
+
1205
+ .vp-doc .badge-container {
1206
+ display: flex;
1207
+ flex-wrap: wrap;
1208
+ gap: 8px;
1209
+ margin: 20px 0;
1210
+ }
1211
+
1212
+ .vp-doc .highlighter-rouge {
1213
+ position: relative;
1214
+ }
1215
+
1216
+ .vp-doc .highlighter-rouge .highlight {
1217
+ background: transparent !important;
1218
+ }
1219
+
1220
+ .vp-doc .highlighter-rouge pre {
1221
+ margin: 0;
1222
+ }
1223
+
1224
+ .vp-doc .highlighter-rouge code {
1225
+ color: inherit;
1226
+ }
1227
+
1228
+ .vp-doc .vp-code-title {
1229
+ margin: 16px 0 0;
1230
+ font-family: var(--vp-font-family-mono);
1231
+ font-size: 13px;
1232
+ color: var(--vp-c-text-2);
1233
+ }
1234
+
1235
+ .vp-doc .vp-code-block-title {
1236
+ margin: 16px 0;
1237
+ }
1238
+
1239
+ .vp-doc .vp-code-block-title-bar {
1240
+ position: relative;
1241
+ margin: 16px -24px 0;
1242
+ overflow-x: auto;
1243
+ border-radius: 8px 8px 0 0;
1244
+ padding: 0 12px;
1245
+ background-color: var(--vp-code-block-bg);
1246
+ box-shadow: inset 0 -1px var(--vp-code-tab-divider);
1247
+ color: var(--vp-code-tab-text-color);
1248
+ font-size: 14px;
1249
+ font-weight: 500;
1250
+ white-space: nowrap;
1251
+ transition: background-color 0.25s, color 0.25s;
1252
+ }
1253
+
1254
+ .custom-block .vp-code-block-title-bar {
1255
+ margin: 16px 0 0;
1256
+ }
1257
+
1258
+ @media (min-width: 640px) {
1259
+ .vp-doc .vp-code-block-title-bar {
1260
+ margin: 16px 0 0;
1261
+ }
1262
+ }
1263
+
1264
+ .vp-doc .vp-code-block-title-text {
1265
+ display: inline-flex;
1266
+ align-items: center;
1267
+ min-height: 44px;
1268
+ padding: 0 12px;
1269
+ font-family: var(--vp-font-family-base);
1270
+ font-size: 14px;
1271
+ color: inherit;
1272
+ }
1273
+
1274
+ .vp-doc .vp-code-block-title-text[data-icon]::before {
1275
+ content: '';
1276
+ display: inline-block;
1277
+ flex-shrink: 0;
1278
+ width: 1em;
1279
+ height: 1em;
1280
+ margin-right: 0.5em;
1281
+ margin-bottom: -0.12em;
1282
+ background: var(--vp-code-file-icon) no-repeat center / contain;
1283
+ }
1284
+
1285
+ .vp-doc .vp-code-block-title-text[data-icon='default'] { --vp-code-file-icon: url("../images/file-icons/default.svg"); }
1286
+ .vp-doc .vp-code-block-title-text[data-icon='ruby'] { --vp-code-file-icon: url("../images/file-icons/ruby.svg"); }
1287
+ .vp-doc .vp-code-block-title-text[data-icon='javascript'] { --vp-code-file-icon: url("../images/file-icons/javascript.svg"); }
1288
+ .vp-doc .vp-code-block-title-text[data-icon='typescript'] { --vp-code-file-icon: url("../images/file-icons/typescript.svg"); }
1289
+ .vp-doc .vp-code-block-title-text[data-icon='json'] { --vp-code-file-icon: url("../images/file-icons/json.svg"); }
1290
+ .vp-doc .vp-code-block-title-text[data-icon='markdown'] { --vp-code-file-icon: url("../images/file-icons/markdown.svg"); }
1291
+ .vp-doc .vp-code-block-title-text[data-icon='html'] { --vp-code-file-icon: url("../images/file-icons/html.svg"); }
1292
+ .vp-doc .vp-code-block-title-text[data-icon='css'] { --vp-code-file-icon: url("../images/file-icons/css.svg"); }
1293
+ .vp-doc .vp-code-block-title-text[data-icon='vue'] { --vp-code-file-icon: url("../images/file-icons/vue.svg"); }
1294
+ .vp-doc .vp-code-block-title-text[data-icon='yaml'] { --vp-code-file-icon: url("../images/file-icons/yaml.svg"); }
1295
+ .dark .vp-doc .vp-code-block-title-text[data-icon='yaml'] { --vp-code-file-icon: url("../images/file-icons/yaml-dark.svg"); }
1296
+ .vp-doc .vp-code-block-title-text[data-icon='toml'] { --vp-code-file-icon: url("../images/file-icons/toml.svg"); }
1297
+ .vp-doc .vp-code-block-title-text[data-icon='shell'] { --vp-code-file-icon: url("../images/file-icons/shell.svg"); }
1298
+ .vp-doc .vp-code-block-title-text[data-icon='python'] { --vp-code-file-icon: url("../images/file-icons/python.svg"); }
1299
+ .vp-doc .vp-code-block-title-text[data-icon='go'] { --vp-code-file-icon: url("../images/file-icons/go.svg"); }
1300
+ .vp-doc .vp-code-block-title-text[data-icon='rust'] { --vp-code-file-icon: url("../images/file-icons/rust.svg"); }
1301
+ .vp-doc .vp-code-block-title-text[data-icon='java'] { --vp-code-file-icon: url("../images/file-icons/java.svg"); }
1302
+ .vp-doc .vp-code-block-title-text[data-icon='kotlin'] { --vp-code-file-icon: url("../images/file-icons/kotlin.svg"); }
1303
+ .vp-doc .vp-code-block-title-text[data-icon='php'] { --vp-code-file-icon: url("../images/file-icons/php.svg"); }
1304
+ .vp-doc .vp-code-block-title-text[data-icon='sql'] { --vp-code-file-icon: url("../images/file-icons/sql.svg"); }
1305
+ .vp-doc .vp-code-block-title-text[data-icon='xml'] { --vp-code-file-icon: url("../images/file-icons/xml.svg"); }
1306
+ .vp-doc .vp-code-block-title-text[data-icon='docker'] { --vp-code-file-icon: url("../images/file-icons/docker.svg"); }
1307
+ .vp-doc .vp-code-block-title-text[data-icon='make'] { --vp-code-file-icon: url("../images/file-icons/make.svg"); }
1308
+ .vp-doc .vp-code-block-title-text[data-icon='env'] { --vp-code-file-icon: url("../images/file-icons/env.svg"); }
1309
+ .vp-doc .vp-code-block-title-text[data-icon='text'] { --vp-code-file-icon: url("../images/file-icons/text.svg"); }
1310
+
1311
+ .vp-doc .vp-code-block-title > div[class*='language-'] {
1312
+ margin-top: 0 !important;
1313
+ border-top-left-radius: 0 !important;
1314
+ border-top-right-radius: 0 !important;
1315
+ }
1316
+
1317
+ .vp-doc .VPBadge {
1318
+ display: inline-block;
1319
+ margin-left: 8px;
1320
+ border: 1px solid transparent;
1321
+ border-radius: 10px;
1322
+ padding: 0 6px;
1323
+ line-height: 18px;
1324
+ font-size: 10px;
1325
+ font-weight: 600;
1326
+ color: var(--vp-c-text-2);
1327
+ vertical-align: middle;
1328
+ transform: translateY(-1px);
1329
+ }
1330
+
1331
+ .vp-doc .VPBadge.tip,
1332
+ .vp-doc .VPBadge.info {
1333
+ border-color: var(--vp-c-tip-2);
1334
+ color: var(--vp-c-tip-1);
1335
+ background: var(--vp-c-tip-soft);
1336
+ }
1337
+
1338
+ .vp-doc .VPBadge.warning {
1339
+ border-color: var(--vp-c-warning-2);
1340
+ color: var(--vp-c-warning-1);
1341
+ background: var(--vp-c-warning-soft);
1342
+ }
1343
+
1344
+ .vp-doc .VPBadge.danger {
1345
+ border-color: var(--vp-c-danger-2);
1346
+ color: var(--vp-c-danger-1);
1347
+ background: var(--vp-c-danger-soft);
1348
+ }
1349
+
1350
+ /* Just-the-docs callout class compatibility */
1351
+ .vp-doc blockquote.note,
1352
+ .vp-doc .note {
1353
+ border: 1px solid var(--vp-custom-block-tip-border);
1354
+ border-radius: 8px;
1355
+ padding: 12px 16px;
1356
+ color: var(--vp-custom-block-tip-text);
1357
+ background-color: var(--vp-custom-block-tip-bg);
1358
+ }
1359
+
1360
+ .vp-doc blockquote.warning,
1361
+ .vp-doc .warning {
1362
+ border: 1px solid var(--vp-custom-block-warning-border);
1363
+ border-radius: 8px;
1364
+ padding: 12px 16px;
1365
+ color: var(--vp-custom-block-warning-text);
1366
+ background-color: var(--vp-custom-block-warning-bg);
1367
+ }
1368
+
1369
+ .vp-doc blockquote.new,
1370
+ .vp-doc .new {
1371
+ border: 1px solid var(--vp-custom-block-success-border, transparent);
1372
+ border-radius: 8px;
1373
+ padding: 12px 16px;
1374
+ color: var(--vp-c-success-1);
1375
+ background-color: var(--vp-c-success-soft);
1376
+ }
1377
+
1378
+ @media (max-width: 1279px) {
1379
+ .VPDoc.has-aside .content-container {
1380
+ max-width: 100%;
1381
+ }
1382
+ }
1383
+
1384
+
1385
+ /* Optional hero logo support for layout: home */
1386
+ .VPHome .VPHero .hero-logo {
1387
+ margin-bottom: 12px;
1388
+ }
1389
+
1390
+ .VPHome .VPHero .hero-logo-image {
1391
+ display: block;
1392
+ max-width: min(640px, 100%);
1393
+ width: 100%;
1394
+ height: auto;
1395
+ }
1396
+
1397
+ .VPHero.has-image .hero-logo,
1398
+ .VPHero.has-image .hero-logo-image {
1399
+ margin-right: auto;
1400
+ margin-left: auto;
1401
+ }
1402
+
1403
+ @media (min-width: 960px) {
1404
+ .VPHero.has-image .hero-logo,
1405
+ .VPHero.has-image .hero-logo-image {
1406
+ margin-left: 0;
1407
+ }
1408
+ }