From c197a6eac0f0d905947cf79bf1f82f16dea7532a Mon Sep 17 00:00:00 2001 From: prpatel Date: Sat, 22 Mar 2025 17:28:31 -0400 Subject: [PATCH 1/3] added banner for vueconf 2025 --- .../inlined-scripts/restorePreference.js | 4 +- .vitepress/theme/components/Banner.vue | 95 ++++++++++++++++--- .vitepress/theme/index.ts | 4 +- 3 files changed, 86 insertions(+), 17 deletions(-) diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js index 5e18b50ffa..d4aab6093c 100644 --- a/.vitepress/inlined-scripts/restorePreference.js +++ b/.vitepress/inlined-scripts/restorePreference.js @@ -8,6 +8,6 @@ restore('vue-docs-prefer-composition', 'prefer-composition', true) restore('vue-docs-prefer-sfc', 'prefer-sfc', true) - // window.__VUE_BANNER_ID__ = '' - // restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') + window.__VUE_BANNER_ID__ = 'vueconf2025' + restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') })() diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index 6730fcd48d..f03b0afaa4 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -22,16 +22,31 @@ function dismiss() { @@ -50,12 +65,12 @@ html:not(.banner-dismissed) { font-weight: 600; color: #fff; background-color: var(--vt-c-green); - background: linear-gradient( - 90deg, - rgba(66, 184, 131, 1) 0%, - rgba(39, 179, 137, 1) 19%, - rgba(100, 126, 255, 1) 100% - ); + background: #0f172a; + display: flex; + justify-content: center; + align-items: center; + + } .banner-dismissed .banner { @@ -70,7 +85,7 @@ button { position: absolute; right: 0; top: 0; - padding: 5px; + padding: 20px 10px; } .close { @@ -79,10 +94,64 @@ button { fill: #fff; transform: rotate(45deg); } -/* -@media (max-width: 720px) { - a > span { + +.vt-banner-text { + color: #fff; + font-size: 16px; +} + +.vt-text-primary { + color: #75c05e; +} + +.vt-primary-action { + background: #75c05e; + color: #121c1a; + padding: 8px 15px; + border-radius: 5px; + font-size: 14px; + text-decoration: none; + margin: 0 20px; + font-weight: bold; +} + +.vt-primary-action:hover { + text-decoration: none; + background: #c4d141; +} + +@media (max-width: 1280px) { + .banner .vt-banner-text { + font-size: 14px; + } + + .vt-tagline { display: none; } -} */ +} + +@media (max-width: 780px) { + .vt-tagline { + display: none; + } + + .vt-coupon { + display: none; + } + + .vt-primary-action { + margin: 0 10px; + padding: 5px 8px; + } + + .vt-time-now { + display: none; + } +} + +@media (max-width: 560px) { + .vt-place { + display: none; + } +} diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 3aa1dac274..9ea1fb93ff 100644 --- a/.vitepress/theme/index.ts +++ b/.vitepress/theme/index.ts @@ -10,14 +10,14 @@ import { } from './components/preferences' import SponsorsAside from './components/SponsorsAside.vue' import VueSchoolLink from './components/VueSchoolLink.vue' -// import Banner from './components/Banner.vue' +import Banner from './components/Banner.vue' // import TextAd from './components/TextAd.vue' export default Object.assign({}, VPTheme, { Layout: () => { // @ts-ignore return h(VPTheme.Layout, null, { - // banner: () => h(Banner), + banner: () => h(Banner), 'sidebar-top': () => h(PreferenceSwitch), 'sidebar-bottom': () => h(SecurityUpdateBtn), 'aside-mid': () => h(SponsorsAside) From 07c8f8a4150036e38cf30e49ca60729d42d183ca Mon Sep 17 00:00:00 2001 From: prpatel Date: Sat, 22 Mar 2025 18:53:19 -0400 Subject: [PATCH 2/3] adjusted text to fit on smaller screens --- .vitepress/theme/components/Banner.vue | 28 +++++++++++++------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index f03b0afaa4..0dd0c779e3 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -31,15 +31,15 @@ function dismiss() { · 19-21 May 2025 - Register Now + Register

- Use code VUEJSDOCS - to get $200 off! + Use VUEJSDOCS + $200 off

@@ -85,7 +85,7 @@ button { position: absolute; right: 0; top: 0; - padding: 20px 10px; + padding: 10px 10px; } .close { @@ -111,7 +111,7 @@ button { border-radius: 5px; font-size: 14px; text-decoration: none; - margin: 0 20px; + margin: 0 10px; font-weight: bold; } @@ -125,23 +125,16 @@ button { font-size: 14px; } - .vt-tagline { - display: none; - } + } @media (max-width: 780px) { .vt-tagline { display: none; } - - .vt-coupon { - display: none; - } - .vt-primary-action { margin: 0 10px; - padding: 5px 8px; + padding: 5px 5px; } .vt-time-now { @@ -150,8 +143,15 @@ button { } @media (max-width: 560px) { + + .vt-tagline { + display: none; + } .vt-place { display: none; } + .vt-date { + display: none; + } } From da6a553e384ba158995cd6d1eeeb0f23439f58ef Mon Sep 17 00:00:00 2001 From: prpatel Date: Sat, 22 Mar 2025 18:53:34 -0400 Subject: [PATCH 3/3] adjusted text to fit on smaller screens 780px --- .vitepress/theme/components/Banner.vue | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index 0dd0c779e3..a41d08221c 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -143,10 +143,7 @@ button { } @media (max-width: 560px) { - - .vt-tagline { - display: none; - } + .vt-place { display: none; }