From be23f15fd578c8eda1290aa0967f70230da2e563 Mon Sep 17 00:00:00 2001 From: patak-dev Date: Wed, 31 Jul 2024 11:18:32 +0200 Subject: [PATCH 1/8] chore: viteconf 24 cta --- .vitepress/theme/components/Home.vue | 59 ++++++++++++--- .vitepress/theme/components/SponsorsAside.vue | 72 ++++++++++++++++++- src/public/viteconf.svg | 24 +++++++ 3 files changed, 143 insertions(+), 12 deletions(-) create mode 100644 src/public/viteconf.svg diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue index a661430c3c..28d2293eb9 100644 --- a/.vitepress/theme/components/Home.vue +++ b/.vitepress/theme/components/Home.vue @@ -40,12 +40,24 @@ onMounted(load) Install Get Security Updates for Vue 2 - + + + + + ViteConf 24 + - @@ -158,21 +170,38 @@ html:not(.dark) .accent, } .actions .security { - background: linear-gradient(var(--vt-c-bg-mute), var(--vt-c-bg-mute)) padding-box, + background: linear-gradient(var(--vt-c-bg-mute), var(--vt-c-bg-mute)) padding-box, linear-gradient(45deg, #42d392, #647eff) border-box; border: 2px solid transparent; } .actions .security:hover { - background: linear-gradient(var(--vt-c-gray-light-4), var(--vt-c-gray-light-4)) padding-box, + background: linear-gradient(var(--vt-c-gray-light-4), var(--vt-c-gray-light-4)) padding-box, linear-gradient(45deg, #42d392, #647eff) border-box; } .dark .actions .security:hover { - background: linear-gradient(var(--vt-c-gray-dark-3), var(--vt-c-gray-dark-3)) padding-box, + background: linear-gradient(var(--vt-c-gray-dark-3), var(--vt-c-gray-dark-3)) padding-box, linear-gradient(45deg, #42d392, #647eff) border-box; } +.actions .viteconf { + background: linear-gradient(var(--vt-c-bg-mute), var(--vt-c-bg-mute)) padding-box, + linear-gradient(45deg, #647eff, #647eff) border-box; + border: 2px solid transparent; +} + +.actions .viteconf:hover { + background: linear-gradient(var(--vt-c-gray-light-4), var(--vt-c-gray-light-4)) padding-box, + linear-gradient(45deg, #647eff, #647eff) border-box; +} + +.dark .actions .viteconf:hover { + background: linear-gradient(var(--vt-c-gray-dark-3), var(--vt-c-gray-dark-3)) padding-box, + linear-gradient(45deg, #647eff, #647eff) border-box; +} + +.actions .viteconf .icon, .actions .security .icon { width: 12px; height: 12px; @@ -180,7 +209,8 @@ html:not(.dark) .accent, } .actions .get-started, -.actions .setup { +.actions .setup, +.actions .security { margin-right: 18px; } @@ -203,20 +233,23 @@ html:not(.dark) .accent, .actions .get-started, .actions .setup, -.actions .security { +.actions .security, +.actions .viteconf { color: var(--vt-c-text-code); } .actions .get-started:hover, .actions .setup:hover, -.actions .security:hover { +.actions .security:hover, +.actions .viteconf:hover { background-color: var(--vt-c-gray-light-4); transition-duration: 0.2s; } .dark .actions .get-started:hover, .dark .actions .setup:hover, -.dark .actions .security:hover { +.dark .actions .security:hover, +.dark .actions .viteconf:hover { background-color: var(--vt-c-gray-dark-3); } @@ -303,6 +336,9 @@ html:not(.dark) .accent, font-size: 18px; margin-bottom: 48px; } + .actions .viteconf { + margin-top: 18px; + } } @media (max-width: 794px) { @@ -342,7 +378,8 @@ html:not(.dark) .accent, .actions a { margin: 18px 0; } - .actions .security { + .actions .security, + .actions .viteconf { margin-top: 0; } } diff --git a/.vitepress/theme/components/SponsorsAside.vue b/.vitepress/theme/components/SponsorsAside.vue index 879ae16729..9dcc2c3a40 100644 --- a/.vitepress/theme/components/SponsorsAside.vue +++ b/.vitepress/theme/components/SponsorsAside.vue @@ -5,6 +5,18 @@ const { frontmatter } = useData()