Vue School Black Friday Banner (#2403)

* refactor: make banner stand out

* refactor: change banner style

Author: rahaug

themes/vue/layout/partials/vueschool_banner.ejs

@@ -3,6 +3,7 @@
     <img class="vueschool-banner--logo" src="/images/vueschool_logo.svg" alt="Vue School Logo">
     <div class="vueschool-banner--wrapper">
       <p>Black Friday 40% OFF at Vue School<span>Learn Vue.js through video courses.</span></p>
+      <button>Get 40% Off</button>
     </div>
     <div id="vs-close" class="vueschool-banner--close"></div>
   </a>

themes/vue/source/css/_vueschool.styl

@@ -4,33 +4,21 @@
 
 .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
       transition width .15s ease-in
       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