- <% if (page.path === 'index.html') { %>
-
diff --git a/themes/vue/source/css/_banners.styl b/themes/vue/source/css/_banners.styl
new file mode 100644
index 0000000000..7e5932b892
--- /dev/null
+++ b/themes/vue/source/css/_banners.styl
@@ -0,0 +1,133 @@
+@import "_settings"
+$bts-banner-height = 80px
+
+body.has-bts-banner
+
+ &.docs
+ @media (min-width: 900px)
+ padding-top: 161px
+ #bts
+ position: fixed
+ top: 0
+ width: 100%
+ @media screen and (max-width: 900px)
+ display: none
+ #header
+ top: $bts-banner-height
+
+ #mobile-bar
+ &.top
+ .menu-button
+ top: 27px
+ .menu-button
+ transition: top 250ms cubic-bezier(0.18, 0.89, 0.32, 1.28)
+ background: url(../images/menu-bts.png) center center no-repeat
+ background-size: 24px
+
+ #sidebar-sponsors-platinum-right
+ top: 90px + $bts-banner-height
+
+ .sidebar
+ @media (min-width: 900px)
+ top: $header-height + $bts-banner-height
+
+#bts
+ font-family "CircularStd"
+ min-height: 80px
+ z-index: $z-header - 1
+ 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/bts-mobile.svg)
+ display: flex
+ align-items: center
+ padding: 0 0 0 50px
+ &.bts-hidden
+ display: none
+ @media (min-width: 680px)
+ justify-content: center
+ background-image: url(../images/banners/bts-tablet.svg)
+ padding: 0 20px 0 40px
+ @media (min-width: 900px)
+ background-image: url(../images/banners/bts-desktop.svg)
+ background-position: top right
+ &:hover
+ .bts-button
+ background-color: #38a1f3
+ @media (min-width: 1600px)
+ background-position: top right
+ .bts-backpack
+ img
+ display: inline-block
+ height: 50px
+ width: 50px
+ margin-right: 10px
+ @media (min-width: 680px)
+ margin-right: 0
+ height: 70px
+ width: 70px
+ .bts-slogan
+ @media (min-width: 680px)
+ padding-left: 20px
+ padding-left: 12px
+ padding-right: 10px
+ @media (min-width: 900px)
+ padding-right: 60px
+ padding-left: 20px
+ .bts-title
+ color: #FFF
+ font-size: 16px
+ font-weight: bold
+ width: 253px
+ @media (min-width: 680px)
+ font-size: 17px
+ width: auto
+ margin-bottom: 8px
+ @media (min-width: 900px)
+ margin-bottom: 0
+ font-size: 22px
+ .bts-dot
+ display: none
+ @media (min-width: 680px)
+ display: inline
+ .bts-title-offer
+ display: block
+ @media (min-width: 680px)
+ display: inline
+ .bts-title-grey
+ color: #b3b1dc
+ text-decoration: line-through
+ .bts-title-green
+ color: #1fdb69
+ .bts-subtitle
+ display: none
+ @media (min-width: 680px)
+ color: #c5c2f4
+ font-size: 16px
+ display: inline-block
+ .bts-button
+ color: #fff
+ background-color: #667dff
+ border-radius: 40px
+ font-size: 16px
+ font-weight: 500
+ transition: all .25s ease-in
+ display: none
+ white-space: nowrap
+ padding: 17px 27px
+ @media (min-width: 680px)
+ display: inline-block
+ .bts-close
+ color: #fff;
+ font-size: 28px
+ position: absolute
+ z-index: 9999
+ right: 10px
+ line-height: 1
+ &:hover
+ color: #56D8FF
+ @media (min-width: 1600px)
+ padding: 10px
\ No newline at end of file
diff --git a/themes/vue/source/css/_fonts.styl b/themes/vue/source/css/_fonts.styl
new file mode 100644
index 0000000000..7e11208dd0
--- /dev/null
+++ b/themes/vue/source/css/_fonts.styl
@@ -0,0 +1,23 @@
+@font-face
+ font-family "CircularStd"
+ src url("../fonts/circular/CircularStd-Bold.eot")
+ src url("../fonts/circular/CircularStd-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/circular/CircularStd-Bold.woff") format("woff"), url("../fonts/circular/CircularStd-Bold.ttf") format("truetype"), url("../fonts/circular/CircularStd-Bold.svg#bcc26993292869431e54c666aafa8fcd") format("svg")
+ font-weight 600
+ font-style normal
+ font-display swap
+
+@font-face
+ font-family "CircularStd"
+ src url("../fonts/circular/CircularStd-Medium.eot")
+ src url("../fonts/circular/CircularStd-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/circular/CircularStd-Medium.woff") format("woff"), url("../fonts/circular/CircularStd-Medium.ttf") format("truetype"), url("../fonts/circular/CircularStd-Medium.svg#bcc26993292869431e54c666aafa8fcd") format("svg")
+ font-weight 500
+ font-style normal
+ font-display swap
+
+@font-face
+ font-family "CircularStd"
+ src url("../fonts/circular/CircularStd-Book.eot")
+ src url("../fonts/circular/CircularStd-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/circular/CircularStd-Book.woff") format("woff"), url("../fonts/circular/CircularStd-Book.ttf") format("truetype"), url("../fonts/circular/CircularStd-Book.svg#bcc26993292869431e54c666aafa8fcd") format("svg")
+ font-weight 400
+ font-style normal
+ font-display swap
\ No newline at end of file
diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl
index 35da4dc7b3..6c71ac3b81 100644
--- a/themes/vue/source/css/_header.styl
+++ b/themes/vue/source/css/_header.styl
@@ -1,3 +1,4 @@
+@import "_settings"
$header-height = 40px
red-dot-before(leftPos = -8px)
@@ -12,60 +13,23 @@ red-dot-before(leftPos = -8px)
#header
background-color: #fff
- height: $header-height
- padding: $heading-padding-vertical 60px
+ padding: $heading-padding-vertical 30px $heading-padding-vertical 60px
position: relative
z-index: $z-header
-
-#blm
- background-color: #000
- min-height: $blm-height
- padding: $heading-padding-vertical 60px
- z-index: $z-header - 1
+ display: flex
+ justify-content: space-between
box-sizing: border-box
- text-align: center
- color: #fff
-
-#blm-hashtag
- font-weight: bold
- margin-right: 4px
-
-#blm-hashtag span
- display: none
-
-@media (min-width: 470px)
- #blm-hashtag span
- display: inline
-
-#blm-link
- color: $green
- white-space: nowrap
body.docs
- #blm
- position: fixed
- top: 0
- width: 100%
#header
position: fixed
width: 100%
top: 0
- #nav
- position: fixed
- top: $heading-padding-vertical
-
-@media screen and (max-width: 900px)
- body.docs #blm
- display: none
#nav
list-style-type: none
margin: 0
padding: 0
- position: absolute
- right: 30px
- top: $heading-padding-vertical
- height: $header-height
line-height: $header-height
.break
display: none
@@ -171,9 +135,6 @@ body.docs
left: 12px
background: url(../images/menu.png) center center no-repeat
background-size: 24px
- &.blm
- background: url(../images/menu-blm.png) center center no-repeat
- background-size: 24px
.logo
position: absolute
width: 30px
@@ -183,11 +144,6 @@ body.docs
left: 50%
margin-left: -15px
background-size: 30px
- .blm-mobile
- position: absolute
- right: 12px
- line-height: 40px
- font-weight: bold
@media print
#header
diff --git a/themes/vue/source/css/_settings.styl b/themes/vue/source/css/_settings.styl
index 09ac62b398..0ba9c05ab5 100644
--- a/themes/vue/source/css/_settings.styl
+++ b/themes/vue/source/css/_settings.styl
@@ -37,5 +37,3 @@ $z-sidebar = 10
$z-header = 20
$z-overlay = 30
$z-modal = 40
-
-$blm-height = 40px
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 5ab87697e2..a528928413 100644
--- a/themes/vue/source/css/index.styl
+++ b/themes/vue/source/css/index.styl
@@ -4,6 +4,8 @@
@import "_sponsors-index"
@import "_modal"
@import "_themes"
+@import "_fonts"
+@import "_banners"
$width = 900px
$space = 40px
@@ -25,8 +27,7 @@ body
background-color: transparent
box-shadow: none
z-index: ($z-sidebar - 1)
- .logo,
- .blm-mobile
+ .logo
display: none
#hero,
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index 0c695f7d92..a8f3781c58 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -16,6 +16,8 @@
@import "_scrimba"
@import "_vue-mastery"
@import "_themes"
+@import "_fonts"
+@import "_banners"
#header
box-shadow: 0 0 1px rgba(0,0,0,.25)
diff --git a/themes/vue/source/fonts/circular/CircularStd-Bold.eot b/themes/vue/source/fonts/circular/CircularStd-Bold.eot
new file mode 100644
index 0000000000..275fce36e5
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Bold.eot differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Bold.otf b/themes/vue/source/fonts/circular/CircularStd-Bold.otf
new file mode 100644
index 0000000000..3374c7bf7e
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Bold.otf differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Bold.svg b/themes/vue/source/fonts/circular/CircularStd-Bold.svg
new file mode 100644
index 0000000000..e4fa120ed9
--- /dev/null
+++ b/themes/vue/source/fonts/circular/CircularStd-Bold.svg
@@ -0,0 +1,13533 @@
+
+
+
diff --git a/themes/vue/source/fonts/circular/CircularStd-Bold.ttf b/themes/vue/source/fonts/circular/CircularStd-Bold.ttf
new file mode 100644
index 0000000000..291e4d274b
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Bold.ttf differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Bold.woff b/themes/vue/source/fonts/circular/CircularStd-Bold.woff
new file mode 100644
index 0000000000..66bc04d5f7
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Bold.woff differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Bold.woff2 b/themes/vue/source/fonts/circular/CircularStd-Bold.woff2
new file mode 100644
index 0000000000..e9eff3d3b7
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Bold.woff2 differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Book.eot b/themes/vue/source/fonts/circular/CircularStd-Book.eot
new file mode 100644
index 0000000000..d4effe715f
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Book.eot differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Book.otf b/themes/vue/source/fonts/circular/CircularStd-Book.otf
new file mode 100644
index 0000000000..e4c2e62837
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Book.otf differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Book.svg b/themes/vue/source/fonts/circular/CircularStd-Book.svg
new file mode 100644
index 0000000000..146a87c0c2
--- /dev/null
+++ b/themes/vue/source/fonts/circular/CircularStd-Book.svg
@@ -0,0 +1,9962 @@
+
+
+
diff --git a/themes/vue/source/fonts/circular/CircularStd-Book.ttf b/themes/vue/source/fonts/circular/CircularStd-Book.ttf
new file mode 100644
index 0000000000..c55d6a6ba0
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Book.ttf differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Book.woff b/themes/vue/source/fonts/circular/CircularStd-Book.woff
new file mode 100644
index 0000000000..a6c48ce31c
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Book.woff differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Book.woff2 b/themes/vue/source/fonts/circular/CircularStd-Book.woff2
new file mode 100644
index 0000000000..6830dc20a1
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Book.woff2 differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Medium.eot b/themes/vue/source/fonts/circular/CircularStd-Medium.eot
new file mode 100644
index 0000000000..793e837b37
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Medium.eot differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Medium.otf b/themes/vue/source/fonts/circular/CircularStd-Medium.otf
new file mode 100644
index 0000000000..931f4159d4
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Medium.otf differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Medium.svg b/themes/vue/source/fonts/circular/CircularStd-Medium.svg
new file mode 100644
index 0000000000..363f853098
--- /dev/null
+++ b/themes/vue/source/fonts/circular/CircularStd-Medium.svg
@@ -0,0 +1,13507 @@
+
+
+
diff --git a/themes/vue/source/fonts/circular/CircularStd-Medium.ttf b/themes/vue/source/fonts/circular/CircularStd-Medium.ttf
new file mode 100644
index 0000000000..4b50d1ef9b
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Medium.ttf differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Medium.woff b/themes/vue/source/fonts/circular/CircularStd-Medium.woff
new file mode 100644
index 0000000000..6de2499339
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Medium.woff differ
diff --git a/themes/vue/source/fonts/circular/CircularStd-Medium.woff2 b/themes/vue/source/fonts/circular/CircularStd-Medium.woff2
new file mode 100644
index 0000000000..edc03ebac2
Binary files /dev/null and b/themes/vue/source/fonts/circular/CircularStd-Medium.woff2 differ
diff --git a/themes/vue/source/images/banners/bts-backpack.svg b/themes/vue/source/images/banners/bts-backpack.svg
new file mode 100644
index 0000000000..de8623fb3a
--- /dev/null
+++ b/themes/vue/source/images/banners/bts-backpack.svg
@@ -0,0 +1,71 @@
+
diff --git a/themes/vue/source/images/banners/bts-desktop.svg b/themes/vue/source/images/banners/bts-desktop.svg
new file mode 100644
index 0000000000..589df15ace
--- /dev/null
+++ b/themes/vue/source/images/banners/bts-desktop.svg
@@ -0,0 +1,37 @@
+
diff --git a/themes/vue/source/images/banners/bts-mobile.svg b/themes/vue/source/images/banners/bts-mobile.svg
new file mode 100644
index 0000000000..75fdc198a6
--- /dev/null
+++ b/themes/vue/source/images/banners/bts-mobile.svg
@@ -0,0 +1,25 @@
+
diff --git a/themes/vue/source/images/banners/bts-tablet.svg b/themes/vue/source/images/banners/bts-tablet.svg
new file mode 100644
index 0000000000..8f889608ef
--- /dev/null
+++ b/themes/vue/source/images/banners/bts-tablet.svg
@@ -0,0 +1,31 @@
+
diff --git a/themes/vue/source/images/menu-blm.png b/themes/vue/source/images/menu-bts.png
similarity index 100%
rename from themes/vue/source/images/menu-blm.png
rename to themes/vue/source/images/menu-bts.png
diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
index 74428f007d..c0d833c63e 100644
--- a/themes/vue/source/js/common.js
+++ b/themes/vue/source/js/common.js
@@ -3,6 +3,7 @@
initMobileMenu()
initVideoModal()
initNewNavLinks()
+ initBtsBanner()
if (PAGE_TYPE) {
initVersionSelect()
initApiSpecLinks()
@@ -280,6 +281,24 @@
})
}
+ /**
+ * Banner closing
+ */
+ function initBtsBanner() {
+ const banner = document.getElementById('bts')
+ if (banner && !localStorage.getItem('BTS_BANNER_CLOSED')) {
+ banner.classList.remove('bts-hidden')
+ document.body.classList.add('has-bts-banner')
+ document.getElementById('bts-close').addEventListener('click', function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ document.getElementById('bts').remove()
+ document.body.classList.remove('has-bts-banner')
+ localStorage.setItem('BTS_BANNER_CLOSED', 1)
+ })
+ }
+ }
+
/**
* Modal Video Player
*/
- #BlackLivesMatter
- Support the Equal Justice Initiative.
-
+ <% if (hasBtsBanner) { %>
+
+
+ 
+
+
+
+
+
+ Master Vue.js with Vue School.
+ 3 months only $49! $75
+
+
+ Offer expires 13th September 2020
+
+
+
+
+
+ ×
+
+
<% } %>