diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl
index 54259726d..ba08c82d1 100644
--- a/themes/vue/source/css/_vueschool.styl
+++ b/themes/vue/source/css/_vueschool.styl
@@ -4,21 +4,13 @@
.vueschool-banner
display none
- background #4fc08d
- background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
+ background #0d0751
overflow hidden
position relative
-
- &:before
- content ''
- background #35495E
- background-image linear-gradient(to right, #4fc08d, #4fc08d 80%, #35495E 100%)
- position absolute
- top 0
- bottom 0
- left 0
- width 0
- transition width .15s ease-out .1s
+ background-image: url(/images/vueschool_banner_background.jpg);
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
&:hover
&:before
@@ -26,11 +18,7 @@
width 50%
p
transition-delay 0
- color #fff
- .vueschool-banner--wrapper::before
- width 100vw
- transition width .15s ease-in .10s
a
display flex
@@ -41,37 +29,27 @@
display none
.vueschool-banner--wrapper
+ color: #FFF
display flex
height 100%
align-items center
- background #4fc08d
+ background #0d0751
margin-left -50px
padding-left 50px
position relative
- &:before
- content ''
- pointer-events none
- background #35495E
- background-image linear-gradient(to right, #35495E, #35495E 80%, #4fc08d 100%)
- position absolute
- top 0
- bottom 0
- left 0
- width 0
- transition width .15s ease-out
&:hover
+ .vueschool-banner--close
&:before,
&:after
transform-origin 100%
+ background #fff
p
margin -3px 50px 0 20px
font-size 1.17rem
font-weight 600
- color #2c3e50
position relative
transition-delay .15s
@@ -80,10 +58,23 @@
display block
color #fff
+ button
+ cursor pointer
+ font-weight 600
+ text-transform uppercase
+ padding 16px 32px
+ border-radius 32px
+ background #ff49c6
+ border none
+ color #FFF
+ font-size 16px
+ margin: 0 auto
+
+ &:hover
+ color white
+
+
.vueschool-banner--logo
- height 102%
- margin-top: -1px
- margin-left 125px
position relative
z-index 2
@@ -141,24 +132,32 @@
#main.fix-sidebar .sidebar .sidebar-inner
padding-top 110px
+ #sidebar-sponsors-platinum-right
+ position absolute
+ top: 170px;
+
@media screen and (min-width: 415px) and (max-width: 900px)
.vueschool-weekend-promo.docs:not(.vueschool-menu-fixed)
- #main.fix-sidebar .sidebar .sidebar-inner
- padding-top 140px
+ #main.fix-sidebar .sidebar .sidebar-inner
+ padding-top 140px
- #sidebar-sponsors-platinum-right
- position absolute
- top: 170px;
+ #sidebar-sponsors-platinum-right
+ position absolute
+ top: 170px;
- &.vueschool-menu-fixed.docs
- .vueschool-banner
- margin-bottom 0
+ &.vueschool-menu-fixed.docs
+ .vueschool-banner
+ margin-bottom 0
+
+ .vueschool-banner
+ button
+ display none
@media screen and (max-width: 414px)
// Docs menu
.vueschool-weekend-promo.docs:not(.vueschool-menu-fixed)
#main.fix-sidebar .sidebar .sidebar-inner
- padding-top 100px
+ padding-top 100px
.vueschool-banner
.vueschool-banner--logo
@@ -182,7 +181,6 @@
p, span
font-size .8rem
- color #fff
.vueschool-banner--close
top 0px
@@ -201,6 +199,8 @@
max-width 200px
span
display none
+ button
+ display none
@media screen and (max-width 286px)
.vueschool-banner p
diff --git a/themes/vue/source/images/vueschool_banner_background.jpg b/themes/vue/source/images/vueschool_banner_background.jpg
new file mode 100644
index 000000000..c6a78a2ae
Binary files /dev/null and b/themes/vue/source/images/vueschool_banner_background.jpg differ
diff --git a/themes/vue/source/images/vueschool_logo.svg b/themes/vue/source/images/vueschool_logo.svg
index 885ad1c5b..d0b1ee4f3 100644
--- a/themes/vue/source/images/vueschool_logo.svg
+++ b/themes/vue/source/images/vueschool_logo.svg
@@ -1,54 +1,32 @@
-
-
-