diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs index 0f37b5a6a3..6eefa30c1c 100644 --- a/themes/vue/layout/partials/vueschool_banner.ejs +++ b/themes/vue/layout/partials/vueschool_banner.ejs @@ -1,26 +1,35 @@ - -
- -
- -
-
-
- Get up to 40% off your Vue School Subscription + +
+ +
+
+
+ Free Weekend 1st & 2nd of October +
+
+ Get Access to ALL Vue School premium courses +
-
- Time Limited Offer +
+
+ Join for Free +
-
-
- GET OFFER -
+
+ 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 9bca06b15a..1c16bf8c11 100644 --- a/themes/vue/source/css/_vueschool.styl +++ b/themes/vue/source/css/_vueschool.styl @@ -1,17 +1,13 @@ @import "_settings" $mobile-bar-height = 40px -$vs-banner-height-desktop = 80px -$vs-banner-height-mobile = 50px +$vs-banner-height-desktop = 72px +$vs-banner-height-mobile = 72px $menu-height = 63px body.has-vs-banner - - #v3-banner - margin-top: $vs-banner-height-mobile - @media (min-width: 680px) - margin-top: $vs-banner-height-desktop - @media (min-width: 900px) - margin-top: 0 + padding-top: $vs-banner-height-mobile + @media (min-width: 680px) + padding-top: $vs-banner-height-desktop #mobile-bar top: $vs-banner-height-mobile @@ -48,114 +44,176 @@ body.has-vs-banner @media (min-width: 900px) top: 160px -#vs - font-family "Roboto", sans-serif - z-index: 8 - box-sizing: border-box - color: #fff - background-size: cover - background-color: #1E204D - background-repeat: no-repeat - background-position: top right - background-image: url(../images/banners/vs-fw-bg-small.svg) - display: flex - justify-content: center - align-items: center - position: fixed - left: 0 - right: 0 - 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/vs-fw-bg.svg) - @media (min-width: 900px) - background-position: top right - position: static - - &.vs-hidden - display: none - - &:hover - .vs-core - .vs-button - .vs-button-inside - background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%) - - .vs-iso - position: absolute - left: 20px - height: 26px - img - height: 26px - @media (min-width: 680px) - left: 40px - height: 40px - img - height: 40px - @media (min-width: 900px) - display: none - - .vs-logo - position: absolute - display: none - left: 40px - @media (min-width: 900px) - display: block - - .vs-core - display: flex - align-items: center - - .vs-slogan - text-align: center - - .vs-slogan-up - 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: #cdc5dc - font-size: 12px - @media (min-width: 680px) - font-size: 16px - - .vs-button - margin-left: 43px - color: #fff - 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(90deg, #FFC828, #E19C0E) - padding: 8px 24px - font-size: 22px - white-space: nowrap - border-radius: 30px - font-weight: bold - - .vs-close - right: 10px - position: absolute - padding: 10px - @media (min-width: 680px) - right: 20px - &:hover - color: #56D8FF \ No newline at end of file +#vs.vs-hidden { + display: none; +} + +/*******************************************************/ + + +#vs { + background-color: #0A1124; + 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"; + position: fixed; + left: 0; + right: 0; + top: 0; + z-index: 100; + height: 72px; + background: linear-gradient(to left, #161a35, #283065); +} + +#vs .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 { + text-decoration: none; +} + +#vs:hover .vs-core .vs-button { + background-image: linear-gradient(to bottom, #5ccc45, #419E2D), linear-gradient(to bottom, #388f26, #50b83b); +} + +#vs .vs-logo { + position: absolute; + left: 10px; +} + +#vs .vs-logo .logo-big { + display: none; +} + +#vs .vs-core { + display: flex; + align-items: center; + width: 288px; +} + +#vs .vs-core .vs-slogan-wrapper { + text-align: center; + width: 170px; + margin: 0 auto; +} + +#vs .vs-core .vs-slogan { + color: #fff; + font-weight: bold; + font-size: 10px; +} + +#vs .vs-core .vs-subline { + color: #c6cdf7; + font-size: 10px; + margin-top: 4px; +} + +#vs .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 { + 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; + font-size: 10px; + letter-spacing: 0.3px; + white-space: nowrap; +} + +#vs .vs-close { + right: 0; + position: absolute; + padding: 10px; +} + +#vs .vs-close:hover { + color: #56d8ff; +} + +@media (min-width: 680px) { + #vs .vs-background-wrapper { + background-image: url(/images/banners/bg-tablet.svg); + } + + #vs .vs-logo { + left: 20px; + } + + #vs .vs-logo .logo-small { + display: none; + } + + #vs .vs-logo .logo-big { + display: inline-block; + width: 90px; + } + + #vs .vs-core { + width: auto; + margin-right: -60px; + } + + #vs .vs-core .vs-slogan-wrapper { + margin: 0 12px 0 0; + width: auto; + } + + #vs .vs-core .vs-slogan { + font-size: 16px; + } + + #vs .vs-core .vs-subline { + font-size: 15px; + text-align: left; + } + + #vs .vs-core .vs-button { + font-size: 13px; + padding: 8px 15px; + } + + #vs .vs-close { + right: 20px; + } +} + +@media (min-width: 900px) { + #vs .vs-background-wrapper { + background-image: url(/images/banners/bg-desktop.svg); + background-position: top right -300px; + } + + #vs .vs-logo .logo-big { + display: inline-block; + width: auto; + } + + #vs .vs-core { + margin-right: 0; + } +} + +@media (min-width: 1280px) { + #vs .vs-background-wrapper { + background-position: top right; + } +} \ No newline at end of file diff --git a/themes/vue/source/images/banners/bg-desktop.svg b/themes/vue/source/images/banners/bg-desktop.svg new file mode 100644 index 0000000000..a05fbd8a7e --- /dev/null +++ b/themes/vue/source/images/banners/bg-desktop.svg @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/bg-mobile.png b/themes/vue/source/images/banners/bg-mobile.png new file mode 100644 index 0000000000..f18973d137 Binary files /dev/null and b/themes/vue/source/images/banners/bg-mobile.png differ diff --git a/themes/vue/source/images/banners/bg-tablet.svg b/themes/vue/source/images/banners/bg-tablet.svg new file mode 100644 index 0000000000..95e08041ac --- /dev/null +++ b/themes/vue/source/images/banners/bg-tablet.svg @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/close.svg b/themes/vue/source/images/banners/close.svg index 4fee93a6ab..a9d51d1d86 100644 --- a/themes/vue/source/images/banners/close.svg +++ b/themes/vue/source/images/banners/close.svg @@ -1,7 +1,7 @@ - + - \ No newline at end of file + diff --git a/themes/vue/source/images/banners/extended.svg b/themes/vue/source/images/banners/extended.svg deleted file mode 100644 index 192d76b2f9..0000000000 --- a/themes/vue/source/images/banners/extended.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/themes/vue/source/images/banners/free-access.svg b/themes/vue/source/images/banners/free-access.svg deleted file mode 100644 index 7c8f7c490a..0000000000 --- a/themes/vue/source/images/banners/free-access.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/themes/vue/source/images/banners/vs-close.svg b/themes/vue/source/images/banners/vs-close.svg deleted file mode 100644 index 0e2f31fcd4..0000000000 --- a/themes/vue/source/images/banners/vs-close.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ 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 deleted file mode 100644 index a914f40050..0000000000 --- a/themes/vue/source/images/banners/vs-fw-bg-small.svg +++ /dev/null @@ -1,183 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/vue/source/images/banners/vs-fw-bg.svg b/themes/vue/source/images/banners/vs-fw-bg.svg deleted file mode 100644 index 8c52220629..0000000000 --- a/themes/vue/source/images/banners/vs-fw-bg.svg +++ /dev/null @@ -1,219 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/vue/source/images/banners/vs-iso.svg b/themes/vue/source/images/banners/vs-iso.svg index a95d926079..b3bb7a8ca4 100644 --- a/themes/vue/source/images/banners/vs-iso.svg +++ b/themes/vue/source/images/banners/vs-iso.svg @@ -1,7 +1,10 @@ - - - - - + + + + + + + + - + \ 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 b44c004583..9b72a0ed0e 100644 --- a/themes/vue/source/images/banners/vs-logo.svg +++ b/themes/vue/source/images/banners/vs-logo.svg @@ -1,8 +1,13 @@ - - - - - - + + + + + + + + + + + - + \ No newline at end of file diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg b/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg deleted file mode 100644 index adb1c11dc6..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg +++ /dev/null @@ -1,219 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg b/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg deleted file mode 100644 index 5a3c53666b..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg b/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg deleted file mode 100644 index de06abe8b0..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg +++ /dev/null @@ -1,201 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/vue/source/images/banners/vueschool_banner_mobile.png b/themes/vue/source/images/banners/vueschool_banner_mobile.png deleted file mode 100644 index 590a15a4f3..0000000000 Binary files a/themes/vue/source/images/banners/vueschool_banner_mobile.png and /dev/null differ diff --git a/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet_2.svg b/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet_2.svg deleted file mode 100644 index ed53dc0f14..0000000000 --- a/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet_2.svg +++ /dev/null @@ -1,200 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js index b03acd978f..635d62ccab 100644 --- a/themes/vue/source/js/common.js +++ b/themes/vue/source/js/common.js @@ -3,6 +3,7 @@ initMobileMenu() initVideoModal() initNewNavLinks() + initVueSchoolBanner() if (PAGE_TYPE) { initVersionSelect() initApiSpecLinks() @@ -285,7 +286,9 @@ */ function initVueSchoolBanner () { const banner = document.getElementById('vs') - if (banner && !localStorage.getItem('VS_FW_BANNER_CLOSED_2')) { + const start = new Date('2022-09-21T00:00:00+02:00') + const now = new Date() + if (banner && (now > start) && !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) { @@ -293,7 +296,7 @@ e.stopPropagation() document.getElementById('vs').remove() document.body.classList.remove('has-vs-banner') - localStorage.setItem('VS_FW_BANNER_CLOSED_2', 1) + localStorage.setItem('VS_FW_OCTOBER', 1) }) } } @@ -440,7 +443,7 @@ if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') { return 300 } - return localStorage.getItem('VS_FW_BANNER_CLOSED_2') ? 0 : 80 + return localStorage.getItem('VS_FW_OCTOBER') ? 0 : 72 } }) }