+
- <% for (let i = 0; i < coins.length; i++) { %>
- <% const coin = coins[i] %>
- 
- <% } %>
-
-
- <% } %>
-
- 
-
-
- 
-
-
-
-
-
-
- Access to all Vue Courses at Vue School
-
-
- Cyber Monday 35% OFF - Closes Soon
-
-
-
- 
-
-
diff --git a/themes/vue/source/css/_vuemastery-banner.styl b/themes/vue/source/css/_vuemastery-banner.styl
new file mode 100644
index 0000000000..f12fbf6d6a
--- /dev/null
+++ b/themes/vue/source/css/_vuemastery-banner.styl
@@ -0,0 +1,248 @@
+.vuemastery-banner
+ display none
+ background: url(../images/background-vuemastery.svg) center center no-repeat
+ background-size 100% auto
+ overflow hidden
+ position relative
+ transition all .3s ease-out .1s
+
+ &:before
+ content ''
+ background: url(../images/background-bubbles-vuemastery.svg) left center no-repeat
+ background-size cover
+ position absolute
+ top 0
+ bottom 0
+ left 0
+ right 0
+ transition all .3s ease-out .1s
+ transform: scale(1.1)
+
+ &:after
+ content: ''
+ background: url(../images/lock-vuemastery.svg) right center no-repeat
+ background-size: auto 100%
+ position: absolute
+ width: 100%
+ height: 100%
+ top: 0
+ left: 0
+ pointer-events: none
+
+ &:hover
+ background-size 150% auto
+
+ &:before
+ transform: scale(1)
+
+ &:after
+ background-image url(../images/unlock-vuemastery.svg)
+
+ a
+ display flex
+ height 80px
+ justify-content center
+
+.vuemastery-banner--wrapper
+ display flex
+ height 100%
+ align-items center
+ width: 100%
+ justify-content: center
+ position relative
+
+ &:before
+ content ''
+ pointer-events none
+ position absolute
+ top 0
+ bottom 0
+ left 0
+ width 0
+ transition width .3s ease-out
+
+ &:hover
+ + .vuemastery-banner--close
+ &:before,
+ &:after
+ transform-origin 100%
+
+ p
+ margin -3px 50px 0 20px
+ font-size 1rem
+ color #fff
+ position relative
+ transition-delay .15s
+
+ span
+ font-size 1.17rem
+ font-weight 600
+ display block
+ color #BEFF74
+ background -webkit-linear-gradient(#41E281, #BEFF74)
+ -webkit-background-clip text
+ -webkit-text-fill-color transparent
+
+.vuemastery-banner--logo
+ height 102%
+ margin-top: -1px
+ margin-left -200px
+ position relative
+ z-index 2
+
+.vuemastery-banner--close
+ position absolute
+ top 20px
+ right 25px
+ height 40px
+ width 40px
+ -webkit-tap-highlight-color transparent
+ border-radius 50%
+ cursor pointer
+
+ &:before,
+ &:after
+ content ''
+ position absolute
+ top 19px
+ left 14px
+ width 25px
+ height 2px
+ background-color #fff
+ transform-origin 50%
+ transform rotate(-45deg)
+ transition all .2s ease-out
+
+ &:after
+ transform rotate(45deg)
+
+.vuemastery-button
+ display: inline-flex;
+ background: linear-gradient(to top right,#3d2c61,#835ec2);
+ height: 38px;
+ margin: .5em 0;
+ line-height: 38px;
+ padding: 0 30px;
+ color: #fff;
+ text-decoration: none;
+ align-items: center;
+ justify-content: center;
+ outline: 0;
+ text-transform: uppercase;
+ border: none;
+ border-radius: 36px;
+ font-weight: bold;
+ font-size: 12px;
+ cursor: pointer;
+ position: relative
+ overflow hidden
+
+ &:before,
+ &:after
+ background: linear-gradient(to top right,transparent,#fff);
+ content: "";
+ height: 150px;
+ left: -175px;
+ opacity: .1;
+ position: absolute;
+ top: -50px;
+ transform: rotate(35deg);
+ width: 100px;
+
+.vuemastery-weekend-promo
+ #mobile-bar,
+ #mobile-bar.top
+ position relative
+ background-color #fff
+
+ &.docs:not(.vuemastery-menu-fixed)
+ padding-top 0
+ #header
+ position relative
+ width auto
+
+ &.vuemastery-menu-fixed
+ #mobile-bar
+ position fixed
+
+@media screen and (min-width: 901px)
+ .vuemastery-weekend-promo
+ &.docs:not(.vuemastery-menu-fixed)
+ #main.fix-sidebar .sidebar
+ position absolute
+ top 141px
+
+ #sidebar-sponsors-platinum-right
+ position absolute
+ top: 170px;
+
+ &.vuemastery-menu-fixed.docs
+ .vuemastery-banner
+ margin-bottom 0
+
+@media screen and (max-width: 1200px)
+ .vuemastery-banner
+ &,
+ &:hover
+ background-size cover
+
+ &:before
+ transform: scale(1)
+
+ &:hover:before
+ transform: scale(1)
+
+@media screen and (max-width: 1100px)
+ .vuemastery-button
+ display none
+
+@media screen and (max-width: 900px)
+ .vuemastery-weekend-promo
+ &.vuemastery-menu-fixed
+ .vuemastery-banner
+ margin-bottom 40px
+
+
+@media screen and (max-width: 700px)
+ .vuemastery-banner
+ a
+ height 40px
+ overflow hidden
+
+ .vuemastery-banner--logo
+ margin-left 0
+ justify-content flex-start
+
+ p, span
+ font-size .8rem
+ color #fff
+
+ .vuemastery-banner--close
+ top 0px
+ right 0px
+
+ &:before,
+ &:after
+ top 19px
+ left 14px
+ width 15px
+ height 2px
+
+@media screen and (max-width: 465px)
+ .vuemastery-banner
+ &:after
+ display: none
+ p
+ max-width 185px
+
+ &:after
+ background-position right -3rem center
+@media screen and (max-width 330px)
+ .vuemastery-banner p
+ font-size 0.6rem
+ margin -3px 28px 0 0px
+ max-width 140px
+
+@media print
+ .vuemastery-banner
+ display none
\ No newline at end of file
diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl
deleted file mode 100644
index 25c8bb2624..0000000000
--- a/themes/vue/source/css/_vueschool.styl
+++ /dev/null
@@ -1,218 +0,0 @@
-@import "_settings"
-$mobile-bar-height = 40px
-$vs-banner-height-desktop = 80px
-$vs-banner-height-mobile = 80px
-$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
-
- #mobile-bar
- top: $vs-banner-height-mobile
- @media (min-width: 680px)
- top: $vs-banner-height-desktop
-
- .sidebar
- top: $vs-banner-height-mobile + $mobile-bar-height
- @media (min-width: 680px)
- top: $vs-banner-height-desktop + $mobile-bar-height
- @media (min-width: 900px)
- top: $vs-banner-height-desktop + $menu-height
-
- .content
- padding-top: 85px
- @media (min-width: 680px)
- padding-top: 125px
- @media (min-width: 900px)
- padding-top: 35px
-
- &.docs
- @media (min-width: 900px)
- padding-top: 144px
-
- #vs
- position: fixed
-
- #header
- top: $vs-banner-height-mobile
- @media (min-width: 680px)
- top: $vs-banner-height-desktop
-
- #sidebar-sponsors-platinum-right
- @media (min-width: 900px)
- top: 160px
-
-#vs
- font-family "Archivo", sans-serif
- z-index: 8
- box-sizing: border-box
- color: #FFF
- background-color: #000c19
- display: flex
- align-items: center
- position: fixed
- left: 0
- right: 0
- padding: 0 10px
- min-height: $vs-banner-height-mobile
- top: 0
- background-image: url(/images/banners/vueschool_banner_mobile.png)
- background-size: cover
- background-repeat: no-repeat
- @media (min-width: 680px)
- background-image: none
- justify-content: center
- min-height: $vs-banner-height-desktop
- @media (min-width: 900px)
- position: relative
- background-image: none
-
- &.vs-hidden
- display: none
-
- &:hover
- .vs-core
- .vs-button
- background: linear-gradient(261deg, #e61463 100%, #db5248 3%);
-
- .vs-core
- display: none
- @media (min-width: 680px)
- position: relative
- z-index: 1
- align-items: center
- display: flex
-
- .vs-slogan
- font-family: Archivo
- color: #FFF
- margin-left: 8px
- @media (min-width: 680px)
- margin-left: 24px
- .vs-slogan-subtitle
- font-size: 12px
- @media (min-width: 680px)
- font-size: 14px
- .vs-slogan-title
- margin-top: 6px
- font-size: 16px
- font-weight: 600
- @media (min-width: 680px)
- font-size: 18px
- strong
- color: #ffae29
- font-weight: 600
-
- .vs-button
- margin-left: 16px
- color: #FFF
- padding: 7px 10px
- border-radius: 4px
- background: linear-gradient(to left, #e61b60, #dd4a4c)
- font-weight: 600
- white-space: nowrap
- margin-right: 30px
- @media (min-width: 680px)
- margin-right: 0
- padding: 8px 24px
- margin-left: 20px
- @media (min-width: 1024px)
- margin-left: 69px
-
- .vs-tag
- margin-left: 10px
- @media (min-width: 1024px)
- margin-left: 30px
-
- .vs-close
- right: 6px
- position: absolute
- @media (min-width: 680px)
- right: 10px
- padding: 10px
- right: 20px
- &:hover
- color: #56D8FF
-
-.vs-blackfriday-coins {
- overflow: hidden;
- position: absolute;
- bottom: 0;
- right: 0;
- top: 0;
- left: 0;
- z-index: 0;
-}
-
-.vs-blackfriday-coin {
- display: none;
-}
-
-@media (min-width: 768px) {
- .vs-blackfriday-coins {
- background-image: url(/images/banners/vueschool_blackfriday_background_tablet_2.svg);
- background-position: center;
- background-size: cover;
- }
-}
-
-@media (min-width: 1024px) {
- .vs-blackfriday-coins {
- background: transparent;
- }
-
- #vs:hover .vs-blackfriday-coin.left {
- transform: translateX(-600px);
- transition: transform 30s linear;
- }
-
- #vs:hover .vs-blackfriday-coin.right {
- transform: translateX(600px);
- transition: transform 30s linear;
- }
-
- .vs-blackfriday-coin {
- display: inline-block;
- position: absolute;
- transition: transform 5s linear;
- transform: translateX(0);
- }
-
- .vs-blackfriday-coin.js {
- width: 43px;
- top: 32px;
- left: calc(50% - 420px);
- }
-
- .vs-blackfriday-coin.ts {
- top: 0;
- left: 0;
- width: 54px;
- left: calc(50% + 457px);
- }
-
- .vs-blackfriday-coin.vue {
- top: 18px;
- width: 60px;
- left: calc(50% + 586px);
- }
-
- .vs-blackfriday-coin.vuex {
- top: 23px;
- left: 0;
- width: 56px;
- left: calc(50% - 620px);
- }
-
- .vs-blackfriday-coin.nuxt {
- top: 10px;
- width: 48px;
- left: calc(50% - 474px);
- }
-}
\ No newline at end of file
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 5e081274cd..ecafc97067 100644
--- a/themes/vue/source/css/index.styl
+++ b/themes/vue/source/css/index.styl
@@ -3,6 +3,7 @@
@import "_sidebar"
@import "_sponsors-index"
@import "_modal"
+@import "_vuemastery-banner"
@import "_themes"
$width = 900px
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index 90746a3d07..bd35b84ee3 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -14,6 +14,7 @@
@import "_style-guide"
@import "_modal"
@import "_scrimba"
+@import "_vuemastery-banner"
@import "_vue-mastery"
@import "_themes"
diff --git a/themes/vue/source/images/banners/tech-coin-js.png b/themes/vue/source/images/banners/tech-coin-js.png
deleted file mode 100644
index 14e506f28c..0000000000
Binary files a/themes/vue/source/images/banners/tech-coin-js.png and /dev/null differ
diff --git a/themes/vue/source/images/banners/tech-coin-nuxt.png b/themes/vue/source/images/banners/tech-coin-nuxt.png
deleted file mode 100644
index f7e2189dcd..0000000000
Binary files a/themes/vue/source/images/banners/tech-coin-nuxt.png and /dev/null differ
diff --git a/themes/vue/source/images/banners/tech-coin-ts.png b/themes/vue/source/images/banners/tech-coin-ts.png
deleted file mode 100644
index f34f41448e..0000000000
Binary files a/themes/vue/source/images/banners/tech-coin-ts.png and /dev/null differ
diff --git a/themes/vue/source/images/banners/tech-coin-vue.png b/themes/vue/source/images/banners/tech-coin-vue.png
deleted file mode 100644
index 201246e6fa..0000000000
Binary files a/themes/vue/source/images/banners/tech-coin-vue.png and /dev/null differ
diff --git a/themes/vue/source/images/banners/tech-coin-vuex.png b/themes/vue/source/images/banners/tech-coin-vuex.png
deleted file mode 100644
index aa04881939..0000000000
Binary files a/themes/vue/source/images/banners/tech-coin-vuex.png and /dev/null differ
diff --git a/themes/vue/source/images/banners/vueschool_blackfriday_logo.svg b/themes/vue/source/images/banners/vueschool_blackfriday_logo.svg
deleted file mode 100644
index 351c55977e..0000000000
--- a/themes/vue/source/images/banners/vueschool_blackfriday_logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/themes/vue/source/images/banners/vueschool_close.svg b/themes/vue/source/images/banners/vueschool_close.svg
deleted file mode 100644
index 0e2f31fcd4..0000000000
--- a/themes/vue/source/images/banners/vueschool_close.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
\ No newline at end of file
diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
index 73a750b011..74428f007d 100644
--- a/themes/vue/source/js/common.js
+++ b/themes/vue/source/js/common.js
@@ -280,24 +280,6 @@
})
}
- /**
- * Banner closing
- */
- function initVueSchoolBanner () {
- const banner = document.getElementById('vs')
- if (banner && !localStorage.getItem('VS_BF21_BANNER_CLOSED')) {
- 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.body.classList.remove('has-vs-banner')
- localStorage.setItem('VS_BF21_BANNER_CLOSED', 1)
- })
- }
- }
-
/**
* Modal Video Player
*/
@@ -440,7 +422,7 @@
if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') {
return 300
}
- return localStorage.getItem('VS_BF21_BANNER_CLOSED') ? 0 : 80
+ return 0
}
})
}
-