diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml index 2c48e01683..1615b60b5b 100644 --- a/themes/vue/_config.yml +++ b/themes/vue/_config.yml @@ -4,10 +4,10 @@ root_domain: vuejs.org vue_version: 2.7.8 # START SPONSORS special: - - name: uni-app - url: https://uniapp.dcloud.io/?hmsr=vueen&hmpl=&hmcu=&hmkw=&hmci= - img: uni_app.png?v2 - description: Cross-Platform for Vue + - name: appwrite + url: https://appwrite.io + img: appwrite.svg + description: Open Source Firebase Alternative platinum: - name: VueMastery url: https://www.vuemastery.com/ @@ -32,9 +32,6 @@ platinum: - name: Nuxt url: https://nuxtjs.org/ img: nuxt.png - - name: Refurbed - url: https://www.refurbed.org/?utm_source=vuejs - img: refurbed.png - name: ButterCMS url: >- https://buttercms.com/vuejs-cms/?utm_source=vuejs.org&utm_medium=banner&utm_campaign=sponsorship @@ -45,17 +42,13 @@ platinum: - name: CodeDict url: https://code-dict.com img: codedict.svg - - name: vuejs.de Conf + - name: Chrome Frameworks Fund + url: https://opencollective.com/2021-frameworks-fund + img: chrome_frameworks_fund.png + - name: Marker.io url: >- - https://conf.vuejs.de/?utm_source=vuejs-vite&utm_medium=referral&utm_campaign=sponsoring - img: vuejs_de_conf.svg -platinum_china: - - name: HBuilder - url: https://www.dcloud.io/hbuilderx.html?hmsr=vue-en&hmpl=&hmcu=&hmkw=&hmci= - img: hbuilder.png - - name: 稀土掘金技术社区 - url: https://juejin.cn/frontend?utm_source=vue&utm_campaign=sponsor - img: xitujuejinjishushequ.png + https://marker.io/?utm_source=vuejs&utm_medium=sponsor&utm_campaign=dev-community + img: marker_io.svg gold: - name: Laravel url: https://laravel.com @@ -102,18 +95,9 @@ gold: - name: Fenêtre Online Solutions url: https://www.fenetre.nl/ img: fen_tre_online_solutions.svg - - name: MyEtherWallet Inc - url: https://www.myetherwallet.com - img: myetherwallet_inc.png - - name: Barrage - url: https://www.barrage.net - img: barrage.png - name: Ant Design Vue url: https://antdv.com img: ant_design_vue.png - - name: Lemon Law - url: https://lemonlaw.site - img: lemon_law.png - name: MQTT X url: https://mqttx.app img: mqtt_x.png @@ -126,15 +110,24 @@ gold: - name: Handsontable - JavaScript Data Grid url: https://handsontable.com/ img: handsontable___javascript_data_grid.svg - - name: 1Tool - url: https://www.1tool.com - img: 1tool.png - name: LearnVue url: https://learnvue.co img: learnvue.png - name: Quickbooks tool hub url: https://quickbookstoolhub.com img: quickbooks_tool_hub.png + - name: Casinoburst.com + url: https://casinoburst.com/casino-utan-licens/ + img: casinoburst_com.png + - name: uudetkasinot.com + url: https://www.uudetkasinot.com + img: uudetkasinot_com.png + - name: spinsify.com/uk + url: https://www.spinsify.com/uk/new-casinos + img: spinsify_com_uk.png + - name: 'Enkrypt: Ethereum and Polkadot Web3 Wallet' + url: https://www.enkrypt.com + img: enkrypt__ethereum_and_polkadot_web3_wallet.svg silver: - name: Draxlr url: https://www.draxlr.com @@ -161,12 +154,6 @@ silver: url: >- https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=vuejs&utm_medium=banner&utm_campaign=sponsorships_vuejs&utm_content=logo img: localazy.png - - name: AddWeb Solution - url: http://addwebsolution.com/ - img: addweb_solution.png?v2 - - name: 1394TA - url: https://1394ta.org - img: 1394ta.png bronze: - name: Derek Pollard url: https://polyglotengineer.com/derek.pollard @@ -192,6 +179,13 @@ bronze: - name: Monarch Air Group url: https://monarchairgroup.com img: monarch_air_group.png + - name: The Codest + url: https://thecodest.co/ + img: the_codest.png?v2 +platinum_china: + - name: 稀土掘金技术社区 + url: https://juejin.cn/frontend?utm_source=vue&utm_campaign=sponsor + img: xitujuejinjishushequ.png # END SPONSORS redirects: '/v2/api/index.html': '/api/' diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs index 6eefa30c1c..50901c97c7 100644 --- a/themes/vue/layout/partials/vueschool_banner.ejs +++ b/themes/vue/layout/partials/vueschool_banner.ejs @@ -1,35 +1,19 @@ - -
- + +
+
-
- Free Weekend 1st & 2nd of October -
-
- Get Access to ALL Vue School premium courses -
+
+
-
- Join for Free -
+
- Close + class="vs-close"> + Close
- \ No newline at end of file + diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl index 1c16bf8c11..1a4049dbef 100644 --- a/themes/vue/source/css/_vueschool.styl +++ b/themes/vue/source/css/_vueschool.styl @@ -32,7 +32,7 @@ body.has-vs-banner @media (min-width: 900px) padding-top: 144px - #vs + #vs-top position: fixed #header @@ -44,93 +44,87 @@ body.has-vs-banner @media (min-width: 900px) top: 160px -#vs.vs-hidden { +#vs-top.vs-hidden { display: none; } /*******************************************************/ - -#vs { - background-color: #0A1124; +#vs-top { + display: block; box-sizing: border-box; - color: #fff; - font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + height: 72px; position: fixed; + top: 0; left: 0; right: 0; - top: 0; z-index: 100; - height: 72px; - background: linear-gradient(to left, #161a35, #283065); + line-height: 1; } -#vs .vs-background-wrapper { +#vs-top .vs-background-wrapper { align-items: center; justify-content: center; display: flex; padding: 0 10px; height: 100%; width: 100%; - background-image: url(/images/banners/bg-mobile.png); - background-repeat: no-repeat; - background-size: cover; - background-position: top right; } -#vs:hover { +#vs-top:hover { text-decoration: none; } -#vs:hover .vs-core .vs-button { +#vs-top:hover .vs-core .vs-button { background-image: linear-gradient(to bottom, #5ccc45, #419E2D), linear-gradient(to bottom, #388f26, #50b83b); } -#vs .vs-logo { +#vs-top .vs-logo { position: absolute; left: 10px; + width: 36px; + height: 42px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; } -#vs .vs-logo .logo-big { - display: none; -} - -#vs .vs-core { +#vs-top .vs-core { display: flex; align-items: center; width: 288px; } -#vs .vs-core .vs-slogan-wrapper { +#vs-top .vs-core .vs-slogan-wrapper { text-align: center; - width: 170px; + width: 184px; margin: 0 auto; } -#vs .vs-core .vs-slogan { - color: #fff; +#vs-top .vs-core .vs-slogan { font-weight: bold; - font-size: 10px; + font-size: 12px; + font-family: 'Roboto', Arial, sans-serif; } -#vs .vs-core .vs-subline { - color: #c6cdf7; +#vs-top .vs-core .vs-subline { font-size: 10px; - margin-top: 4px; + font-family: 'Roboto', Arial, sans-serif; + text-align: center; } -#vs .vs-core .vs-button-wrapper { +#vs-top .vs-core .vs-button-wrapper { padding: 2px; background-image: linear-gradient(to bottom, #388f26, #50b83b); border-radius: 60px; overflow: hidden; } -#vs .vs-core .vs-button { +#vs-top .vs-core .vs-button { + background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b); border-radius: 60px; color: #FFF; padding: 8px 6px; - background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b); font-weight: bold; text-transform: uppercase; text-align: center; @@ -139,81 +133,182 @@ body.has-vs-banner white-space: nowrap; } -#vs .vs-close { +#vs-top .vs-close { right: 0; position: absolute; padding: 10px; } -#vs .vs-close:hover { +#vs-top .vs-close:hover { color: #56d8ff; } @media (min-width: 680px) { - #vs .vs-background-wrapper { - background-image: url(/images/banners/bg-tablet.svg); + #vs-top .vs-core { + width: auto; } - #vs .vs-logo { - left: 20px; + #vs-top .vs-core .vs-slogan-wrapper { + margin: 0 12px 0 0; + width: 288px; } - #vs .vs-logo .logo-small { - display: none; + #vs-top .vs-core .vs-slogan { + font-size: 17px; } - #vs .vs-logo .logo-big { - display: inline-block; - width: 90px; + #vs-top .vs-core .vs-subline { + font-size: 12px; + margin-top: 4px; } - #vs .vs-core { - width: auto; - margin-right: -60px; + #vs-top .vs-core .vs-button { + font-size: 13px; + padding: 8px 15px; } +} - #vs .vs-core .vs-slogan-wrapper { - margin: 0 12px 0 0; - width: auto; +@media (min-width: 1280px) { + #vs-top .vs-logo { + left: 20px; + width: 104px; } - #vs .vs-core .vs-slogan { - font-size: 16px; + #vs-top .vs-core { + margin-right: 0; } - #vs .vs-core .vs-subline { - font-size: 15px; - text-align: left; + #vs-top .vs-core .vs-slogan-wrapper { + width: auto; } - #vs .vs-core .vs-button { - font-size: 13px; - padding: 8px 15px; + #vs-top .vs-core .vs-subline { + font-size: 15px; } +} + +/* FREE_WEEKEND +******************************************/ - #vs .vs-close { - right: 20px; +#vs-top.FREE_WEEKEND { + color: #FFF; + background: linear-gradient(to left, #161a35, #283065); +} + +#vs-top.FREE_WEEKEND .vs-logo { + background-image: url('https://vueschool.io/images/mark-vueschool-white.svg'); +} + +#vs-top.FREE_WEEKEND .vs-core .vs-slogan { + color: #fff; +} + +#vs-top.FREE_WEEKEND .vs-core .vs-slogan strong { + color: #ff2556; +} + +#vs-top.FREE_WEEKEND .vs-core .vs-subline { + color: #c6cdf7; +} + +#vs-top.FREE_WEEKEND .vs-background-wrapper { + background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-mobile.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: top right; +} + +@media (min-width: 680px) { + #vs-top.FREE_WEEKEND .vs-background-wrapper { + background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-tablet.svg'); } } -@media (min-width: 900px) { - #vs .vs-background-wrapper { - background-image: url(/images/banners/bg-desktop.svg); - background-position: top right -300px; +@media (min-width: 1280px) { + #vs-top.FREE_WEEKEND .vs-logo { + background-image: url('https://vueschool.io/images/icons/logo-white.svg'); } - #vs .vs-logo .logo-big { - display: inline-block; - width: auto; + #vs-top.FREE_WEEKEND .vs-background-wrapper { + background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-desktop.svg'); + background-position: top right -60px; } +} - #vs .vs-core { - margin-right: 0; +/* LEVELUP2022 +******************************************/ + +#vs-top.LEVELUP2022 { + color: #121733; + background: #EEF5FF; +} + +#vs-top.LEVELUP2022 .vs-logo { + background-image: url('https://vueschool.io/images/mark-vueschool.svg'); +} + +#vs-top.LEVELUP2022 .vs-core .vs-slogan { + color: #121733; +} + +#vs-top.LEVELUP2022 .vs-core .vs-slogan strong { + color: #ff2556; +} + +#vs-top.LEVELUP2022 .vs-core .vs-subline { + color: #394170; +} + +#vs-top.LEVELUP2022 .vs-core .vs-subline strong { + color: #48aa34; +} + +#vs-top.LEVELUP2022 .vs-background-wrapper { + background-image: url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-mobile.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: top right; +} + +#vs-top.LEVELUP2022 .vs-core .vs-button-wrapper { + background-image: linear-gradient(to bottom, #d71b46, #fd2455); +} + +#vs-top.LEVELUP2022 .vs-core .vs-button { + background-image: linear-gradient(to bottom, #ff2556, #d51b44), linear-gradient(to bottom, #d71b46, #fd2455); +} + +@media (min-width: 680px) { + #vs-top.LEVELUP2022 .vs-background-wrapper { + background-image: url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-tablet.png'); + } + + #vs-top.LEVELUP2022 .vs-core .vs-slogan-wrapper { + width: 458px; } } @media (min-width: 1280px) { - #vs .vs-background-wrapper { - background-position: top right; + #vs-top.LEVELUP2022 .vs-logo { + background-image: url('https://vueschool.io/images/icons/logo.svg'); + } + + #vs-top.LEVELUP2022 .vs-background-wrapper { + background-image: + url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-desktop-left.png'), + url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-desktop-right.png'); + background-position: + top left -120px, + top right -120px; + background-size: contain; + background-repeat: no-repeat; + } +} + +@media (min-width: 1536px) { + #vs-top.LEVELUP2022 .vs-background-wrapper { + background-position: + top left, + top right; } } \ No newline at end of file diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js index 635d62ccab..1b9f97c42c 100644 --- a/themes/vue/source/js/common.js +++ b/themes/vue/source/js/common.js @@ -285,19 +285,83 @@ * Banner closing */ function initVueSchoolBanner () { - const banner = document.getElementById('vs') - const start = new Date('2022-09-21T00:00:00+02:00') + const banner = document.getElementById('vs-top') + + const items = [ + { + banner: { + assets: "FREE_WEEKEND", + cta: "JOIN FOR FREE", + link: "/free-weekend", + static: "FREE_WEEKEND", + subtitle: "Get Access to ALL Vue School premium courses", + title: "Free Weekend 1st & 2nd of October" + }, + ends: "2022-09-30T23:59:59+02:00", + id: "FREE_WEEKEND_LOBBY", + isExtended: false + }, + { + banner: { + assets: "FREE_WEEKEND", + cta: "WATCH FOR FREE", + link: "/free-weekend", + static: "FREE_WEEKEND_LIVE", + subtitle: "Get Access to ALL Vue School premium courses", + title: "Free Weekend NOW LIVE" + }, + ends: "2022-10-02T23:59:59+02:00", + id: "FREE_WEEKEND_LIVE", + isExtended: false + }, + { + banner: { + assets: "LEVELUP2022", + cta: "GET OFFER", + link: "/sales/levelup2022", + static: "LEVELUP2022", + subtitle: "Access 800+ lessons including the Vue.js 3 Masterclass", + title: "Less than 48 hours to get 45% off at Vue School" + }, + ends: "2022-10-04T23:59:59+02:00", + id: "LEVELUP2022", + isExtended: false + }, + { + banner: { + assets: "LEVELUP2022", + cta: "GET OFFER", + link: "/sales/levelup2022", + static: "LEVELUP2022", + subtitle: "Extended! Access 800+ lessons including the Vue.js 3 Masterclass", + title: "Less than 48 hours to get 45% off at Vue School" + }, + ends: "2022-10-06T23:59:59+02:00", + id: "LEVELUP2022_EXTENDED", + isExtended: true + } + ] + const now = new Date() - if (banner && (now > start) && !localStorage.getItem('VS_FW_OCTOBER')) { + const phases = items.map(phase => ({ ...phase, remaining: new Date(phase.ends) - now })) + const activePhase = phases.find(phase => phase.remaining > 0) + + if (banner && (activePhase) && !localStorage.getItem('VS_FW_OCTOBER')) { banner.classList.remove('vs-hidden') document.body.classList.add('has-vs-banner') document.getElementById('vs-close').addEventListener('click', function (e) { e.preventDefault() e.stopPropagation() - document.getElementById('vs').remove() + document.getElementById('vs-top').remove() document.body.classList.remove('has-vs-banner') localStorage.setItem('VS_FW_OCTOBER', 1) }) + + document.getElementById('vs-top').classList.add(activePhase.banner.assets) + document.getElementById('vs-top').href = `https://vueschool.io${activePhase.banner.link}?friend=vuejs&utm_source=vuejs&utm_medium=website&utm_campaign=affiliate&utm_content=top_banner` + document.getElementById('vs-slogan').innerHTML = activePhase.banner.title + document.getElementById('vs-subline').innerHTML = activePhase.banner.subtitle + document.getElementById('vs-button').innerHTML = activePhase.banner.cta } }