diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs index a4a9934dd9..0f37b5a6a3 100644 --- a/themes/vue/layout/partials/vueschool_banner.ejs +++ b/themes/vue/layout/partials/vueschool_banner.ejs @@ -1,4 +1,4 @@ - +
@@ -8,15 +8,15 @@
- VUE 3 MASTERCLASS - FREE WEEKEND + Get up to 40% off your Vue School Subscription
- Register at vueschool.io/free-weekend + Time Limited Offer
- Free Access + GET OFFER
diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl index e822721727..9bca06b15a 100644 --- a/themes/vue/source/css/_vueschool.styl +++ b/themes/vue/source/css/_vueschool.styl @@ -57,7 +57,7 @@ body.has-vs-banner background-color: #1E204D background-repeat: no-repeat background-position: top right - background-image: url(../images/banners/vueschool-banner-bg-mobile.svg) + background-image: url(../images/banners/vs-fw-bg-small.svg) display: flex justify-content: center align-items: center @@ -67,12 +67,13 @@ body.has-vs-banner padding: 0 10px min-height: $vs-banner-height-mobile top: 0 + background-position: bottom right @media (min-width: 680px) min-height: $vs-banner-height-desktop - background-image: url(../images/banners/vueschool-banner-bg-tablet.svg) + background-image: url(../images/banners/vs-fw-bg.svg) @media (min-width: 900px) + background-position: top right position: static - background-image: url(../images/banners/vueschool-banner-bg-desktop.svg) &.vs-hidden display: none @@ -81,10 +82,7 @@ body.has-vs-banner .vs-core .vs-button .vs-button-inside - background: linear-gradient(#ed81eb, #d457d0) - &.vs-button-alt - .vs-button-inside - background: linear-gradient(#ffea80, #ffba49) + background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%) .vs-iso position: absolute @@ -115,41 +113,43 @@ body.has-vs-banner text-align: center .vs-slogan-up - color: #47b785 + color: #FFF font-size: 14px font-weight: bold + width: 170px @media (min-width: 680px) font-size: 18px + width: 220px + @media (min-width: 1024px) + width: auto + font-size: 24px + strong + color: #fdc722 .vs-slogan-down - color: #fff + color: #cdc5dc font-size: 12px @media (min-width: 680px) font-size: 16px - strong - color: #48a0ff .vs-button margin-left: 43px color: #fff - background: linear-gradient(to bottom, #b349b0, #dc61da) padding: 2px border-radius: 40px display: none + background: linear-gradient(0deg, #ffdf4c, #e29d0a) @media (min-width: 680px) display: inline-block .vs-button-inside + color: #000 border-radius: 40px - background: linear-gradient(#dc61da, #b349b0) - transition: all .25s ease-in - padding: 17px 27px - line-height: 0 - @media (min-width: 680px) - padding: 13px 24px - &.vs-button-alt - background: linear-gradient(to bottom, #ffcc38, #ffd13d) - .vs-button-inside - background: linear-gradient(to bottom, #ffe24f, #ffa40e) + background: linear-gradient(90deg, #FFC828, #E19C0E) + padding: 8px 24px + font-size: 22px + white-space: nowrap + border-radius: 30px + font-weight: bold .vs-close right: 10px diff --git a/themes/vue/source/images/banners/vs-close.svg b/themes/vue/source/images/banners/vs-close.svg new file mode 100644 index 0000000000..0e2f31fcd4 --- /dev/null +++ b/themes/vue/source/images/banners/vs-close.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/themes/vue/source/images/banners/vs-fw-bg-small.svg b/themes/vue/source/images/banners/vs-fw-bg-small.svg new file mode 100644 index 0000000000..a914f40050 --- /dev/null +++ b/themes/vue/source/images/banners/vs-fw-bg-small.svg @@ -0,0 +1,183 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vs-fw-bg.svg b/themes/vue/source/images/banners/vs-fw-bg.svg new file mode 100644 index 0000000000..8c52220629 --- /dev/null +++ b/themes/vue/source/images/banners/vs-fw-bg.svg @@ -0,0 +1,219 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vs-iso.svg b/themes/vue/source/images/banners/vs-iso.svg index 985476ee66..a95d926079 100644 --- a/themes/vue/source/images/banners/vs-iso.svg +++ b/themes/vue/source/images/banners/vs-iso.svg @@ -1,10 +1,7 @@ - - - - - - - - + + + + + - \ No newline at end of file + diff --git a/themes/vue/source/images/banners/vs-logo.svg b/themes/vue/source/images/banners/vs-logo.svg index 9b72a0ed0e..b44c004583 100644 --- a/themes/vue/source/images/banners/vs-logo.svg +++ b/themes/vue/source/images/banners/vs-logo.svg @@ -1,13 +1,8 @@ - - - - - - - - - - - + + + + + + - \ No newline at end of file + diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js index 172bc52397..3a5244959d 100644 --- a/themes/vue/source/js/common.js +++ b/themes/vue/source/js/common.js @@ -286,7 +286,7 @@ */ function initVueSchoolBanner () { const banner = document.getElementById('vs') - if (banner && !localStorage.getItem('VS_FW_BANNER_CLOSED')) { + if (banner && !localStorage.getItem('VS_FW_BANNER_CLOSED_2')) { banner.classList.remove('vs-hidden') document.body.classList.add('has-vs-banner') document.getElementById('vs-close').addEventListener('click', function (e) { @@ -294,7 +294,7 @@ e.stopPropagation() document.getElementById('vs').remove() document.body.classList.remove('has-vs-banner') - localStorage.setItem('VS_FW_BANNER_CLOSED', 1) + localStorage.setItem('VS_FW_BANNER_CLOSED_2', 1) }) } } @@ -441,7 +441,7 @@ if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') { return 300 } - return localStorage.getItem('VS_FW_BANNER_CLOSED') ? 0 : 80 + return localStorage.getItem('VS_FW_BANNER_CLOSED_2') ? 0 : 80 } }) }