+ 
+
+
+
+ 
+
+
+
+
+
+
+
+ VUE 3 MASTERCLASS - FREE WEEKEND
+
+
+ Register at vueschool.io/free-weekend
+
+
+
+
+ 
+
+
+
+ 
+
+
diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl
index f0105af42b..1e341be245 100644
--- a/themes/vue/source/css/_header.styl
+++ b/themes/vue/source/css/_header.styl
@@ -143,6 +143,7 @@ body.docs
display: none
box-shadow: 0 0 2px rgba(0,0,0,.25)
pointer-events: none
+ transition: background-color 0.25s ease-in
> *
pointer-events: auto
.menu-button
diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl
new file mode 100644
index 0000000000..e822721727
--- /dev/null
+++ b/themes/vue/source/css/_vueschool.styl
@@ -0,0 +1,161 @@
+@import "_settings"
+$mobile-bar-height = 40px
+$vs-banner-height-desktop = 80px
+$vs-banner-height-mobile = 50px
+$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 "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/vueschool-banner-bg-mobile.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
+ @media (min-width: 680px)
+ min-height: $vs-banner-height-desktop
+ background-image: url(../images/banners/vueschool-banner-bg-tablet.svg)
+ @media (min-width: 900px)
+ position: static
+ background-image: url(../images/banners/vueschool-banner-bg-desktop.svg)
+
+ &.vs-hidden
+ display: none
+
+ &:hover
+ .vs-core
+ .vs-button
+ .vs-button-inside
+ background: linear-gradient(#ed81eb, #d457d0)
+ &.vs-button-alt
+ .vs-button-inside
+ background: linear-gradient(#ffea80, #ffba49)
+
+ .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: #47b785
+ font-size: 14px
+ font-weight: bold
+ @media (min-width: 680px)
+ font-size: 18px
+
+ .vs-slogan-down
+ color: #fff
+ 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
+ @media (min-width: 680px)
+ display: inline-block
+ .vs-button-inside
+ 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)
+
+ .vs-close
+ right: 10px
+ position: absolute
+ padding: 10px
+ @media (min-width: 680px)
+ right: 20px
+ &:hover
+ color: #56D8FF
\ No newline at end of file
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 5e081274cd..bec2ecd6f2 100644
--- a/themes/vue/source/css/index.styl
+++ b/themes/vue/source/css/index.styl
@@ -4,6 +4,7 @@
@import "_sponsors-index"
@import "_modal"
@import "_themes"
+@import "_vueschool.styl"
$width = 900px
$space = 40px
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index 90746a3d07..e8b6b94cdc 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -16,6 +16,7 @@
@import "_scrimba"
@import "_vue-mastery"
@import "_themes"
+@import "_vueschool.styl"
#header
box-shadow: 0 0 1px rgba(0,0,0,.25)
diff --git a/themes/vue/source/images/banners/close.svg b/themes/vue/source/images/banners/close.svg
new file mode 100644
index 0000000000..4fee93a6ab
--- /dev/null
+++ b/themes/vue/source/images/banners/close.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/themes/vue/source/images/banners/free-access.svg b/themes/vue/source/images/banners/free-access.svg
new file mode 100644
index 0000000000..7c8f7c490a
--- /dev/null
+++ b/themes/vue/source/images/banners/free-access.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/themes/vue/source/images/banners/vs-iso.svg b/themes/vue/source/images/banners/vs-iso.svg
new file mode 100644
index 0000000000..985476ee66
--- /dev/null
+++ b/themes/vue/source/images/banners/vs-iso.svg
@@ -0,0 +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
new file mode 100644
index 0000000000..9b72a0ed0e
--- /dev/null
+++ b/themes/vue/source/images/banners/vs-logo.svg
@@ -0,0 +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
new file mode 100644
index 0000000000..adb1c11dc6
--- /dev/null
+++ b/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg
@@ -0,0 +1,219 @@
+
\ 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
new file mode 100644
index 0000000000..5a3c53666b
--- /dev/null
+++ b/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg
@@ -0,0 +1,14 @@
+
\ 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
new file mode 100644
index 0000000000..de06abe8b0
--- /dev/null
+++ b/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg
@@ -0,0 +1,201 @@
+
\ No newline at end of file
diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
index 74428f007d..172bc52397 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()
@@ -280,6 +281,24 @@
})
}
+ /**
+ * Banner closing
+ */
+ function initVueSchoolBanner () {
+ const banner = document.getElementById('vs')
+ if (banner && !localStorage.getItem('VS_FW_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_FW_BANNER_CLOSED', 1)
+ })
+ }
+ }
+
/**
* Modal Video Player
*/
@@ -422,7 +441,7 @@
if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') {
return 300
}
- return 0
+ return localStorage.getItem('VS_FW_BANNER_CLOSED') ? 0 : 80
}
})
}
+