From c5b0b45fcdcbe76b61cd33dbffaa756431f6e480 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 13 Feb 2019 12:31:59 -0200
Subject: [PATCH 01/20] Add Vue Mastery banner for free weekend lessons

---
 src/images/logo-vuemastery.svg                |  22 +++
 themes/vue/layout/index.ejs                   |  53 ++++---
 themes/vue/layout/layout.ejs                  |   1 +
 .../vue/layout/partials/vue_mastery_promo.ejs |  71 +++++++++
 themes/vue/source/css/_vue-mastery-promo.styl | 142 ++++++++++++++++++
 themes/vue/source/css/index.styl              |   1 +
 6 files changed, 265 insertions(+), 25 deletions(-)
 create mode 100644 src/images/logo-vuemastery.svg
 create mode 100644 themes/vue/layout/partials/vue_mastery_promo.ejs
 create mode 100644 themes/vue/source/css/_vue-mastery-promo.styl

diff --git a/src/images/logo-vuemastery.svg b/src/images/logo-vuemastery.svg
new file mode 100644
index 0000000000..b4ce163d48
--- /dev/null
+++ b/src/images/logo-vuemastery.svg
@@ -0,0 +1,22 @@
+<svg width="356" height="182" viewBox="0 0 356 182" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M110.099 0L356 0L245.739 182H0L110.099 0Z" fill="white"/>
+<path d="M121.5 132.2L132.5 113.2L143.5 132.2H161L132.5 82.9L104 132.2H121.5Z" fill="#36495E"/>
+<path d="M132.5 82.9V113.2L143.5 132.2H161L132.5 82.9Z" fill="url(#paint0_linear)"/>
+<path d="M200.5 132.2L189.5 113.2L178.5 132.2H161L189.5 82.9L218 132.2H200.5Z" fill="#36495E"/>
+<path d="M189.5 82.9V113.2L178.5 132.2H161L189.5 82.9Z" fill="url(#paint1_linear)"/>
+<path d="M189.5 50L161 99.3L132.5 50L85 132.2H104L132.5 82.9L161 132.2L189.5 82.9L218 132.2H237L189.5 50Z" fill="url(#paint2_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="146.762" y1="132.244" x2="146.762" y2="82.8712" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36495E"/>
+<stop offset="1" stop-color="#0A1C33"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="175.267" y1="132.244" x2="175.267" y2="82.8712" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36495E"/>
+<stop offset="1" stop-color="#0A1C33"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="161.014" y1="132.244" x2="161.014" y2="49.9561" gradientUnits="userSpaceOnUse">
+<stop offset="0.2" stop-color="#41B782"/>
+<stop offset="1" stop-color="#86D169"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index 10eed9f2ca..199ad4401f 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -126,34 +126,37 @@
 
 <script>
 (function () {
-  var topScrolled = false
-  var sponsors = document.getElementById('sponsors')
-  var sponsorTop = sponsors.offsetTop
-  var sponsorActive = false
+  // Fix error when element not present in DOM
+  document.addEventListener("DOMContentLoaded", function() {
+    var topScrolled = false
+    var sponsors = document.getElementById('sponsors')
+    var sponsorTop = sponsors.offsetTop
+    var sponsorActive = false
 
-  window.addEventListener('resize', function () {
-    sponsorTop = sponsors.offsetTop
-  })
+    window.addEventListener('resize', function () {
+      sponsorTop = sponsors.offsetTop
+    })
 
-  window.addEventListener('scroll', function () {
-    if (window.pageYOffset > 165 && !topScrolled) {
-      topScrolled = true
-      document.getElementById('mobile-bar').classList.remove('top')
-    } else if (window.pageYOffset <= 165 && topScrolled) {
-      topScrolled = false
-      document.getElementById('mobile-bar').classList.add('top')
-    }
-    if (window.pageYOffset > sponsorTop - 100) {
-      if (!sponsorActive) {
-        sponsorActive = true
-        sponsors.classList.add('active')
+    window.addEventListener('scroll', function () {
+      if (window.pageYOffset > 165 && !topScrolled) {
+        topScrolled = true
+        document.getElementById('mobile-bar').classList.remove('top')
+      } else if (window.pageYOffset <= 165 && topScrolled) {
+        topScrolled = false
+        document.getElementById('mobile-bar').classList.add('top')
       }
-    } else {
-      if (sponsorActive) {
-        sponsorActive = false
-        sponsors.classList.remove('active')
+      if (window.pageYOffset > sponsorTop - 100) {
+        if (!sponsorActive) {
+          sponsorActive = true
+          sponsors.classList.add('active')
+        }
+      } else {
+        if (sponsorActive) {
+          sponsorActive = false
+          sponsors.classList.remove('active')
+        }
       }
-    }
-  })
+    })
+  });
 })()
 </script>
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
index 77b6689743..0071b7de5c 100644
--- a/themes/vue/layout/layout.ejs
+++ b/themes/vue/layout/layout.ejs
@@ -78,6 +78,7 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
+    <%- partial('partials/vue_mastery_promo.ejs') %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>
diff --git a/themes/vue/layout/partials/vue_mastery_promo.ejs b/themes/vue/layout/partials/vue_mastery_promo.ejs
new file mode 100644
index 0000000000..a1f09895ab
--- /dev/null
+++ b/themes/vue/layout/partials/vue_mastery_promo.ejs
@@ -0,0 +1,71 @@
+<script>
+  (function () {
+    var mobileBar, vuemasteryPromo, menuTop, close;
+
+    // This allow the mobile menu to scroll once the banner is not visible
+    var fixMenuAfterBanner = function() {
+      if (window.pageYOffset > menuTop) {
+        // The menu will be fixed
+        vuemasteryPromo.classList.add('fixed');
+      } else {
+        // The menu stay under the banner
+        vuemasteryPromo.classList.remove('fixed');
+      }
+    }
+
+    // Get position of the menu when the windows is resized
+    var getMenuPosition = function() {
+      menuTop = vuemasteryPromo.clientHeight;
+    }
+
+    var initBanner = function () {
+      // Get elements
+      mobileBar = document.getElementById('mobile-bar');
+      vuemasteryPromo = document.getElementById('vue-mastery-promo');
+      close = document.getElementById('close-vue-mastery-promo');
+
+      // Initialize the banner
+      vuemasteryPromo.classList.remove('hide');
+      // Init close button action
+      close.onclick = closeBanner
+
+      // Wait for the end of animation before getting position
+      setTimeout(function () {
+        // Get position of the menu bar
+        menuTop = mobileBar.offsetTop;
+      }, 500)
+    }
+
+    // Remove the banner once the user click on the cross
+    var closeBanner = function(e) {
+      // Prevent redirection to vuemastery if click on the close button
+      e.preventDefault();
+      // Save action in the local storage
+      localStorage.setItem('hideVuemasteryBanner', true);
+      // Hide the banner
+      vuemasteryPromo.classList.add('hide');
+      // Remove events
+      window.removeEventListener('resize', getMenuPosition)
+      window.removeEventListener('scroll', fixMenuAfterBanner)
+    }
+    
+    // Check if user already removed the banner
+    if(!localStorage.getItem('hideVuemasteryBanner')) {
+      // Add event listeners
+      window.addEventListener('resize', getMenuPosition)
+      window.addEventListener('scroll', fixMenuAfterBanner)
+      // Wait for the DOM to be ready
+      document.addEventListener("DOMContentLoaded", initBanner);
+    }
+  })()
+</script>
+
+<div id="vue-mastery-promo" class="vue-mastery-promo hide" role="banner">
+  <a href="https://www.vuemastery.com/free-weekend" target="_blank">
+    <img class="vue-mastery-logo" src="/images/logo-vuemastery.svg" alt="vue-mastery" />
+    <div class="vue-mastery-wrapper">
+      <p>Free Vue Courses on Vue Mastery Feb 22 - Feb 24.<span>Sign up today to get access.</span></p>
+    </div>
+    <div id="close-vue-mastery-promo" class="close"></div>
+  </a>
+</div>
\ No newline at end of file
diff --git a/themes/vue/source/css/_vue-mastery-promo.styl b/themes/vue/source/css/_vue-mastery-promo.styl
new file mode 100644
index 0000000000..3cfca21308
--- /dev/null
+++ b/themes/vue/source/css/_vue-mastery-promo.styl
@@ -0,0 +1,142 @@
+.vue-mastery-promo
+  background #4fc08d
+  background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
+  overflow hidden
+  height 80px
+  transition height .3s ease-in
+
+  &:hover
+    background-image linear-gradient(to left, #35495E, #35495E 50%, #4fc08d 50%)
+    .vue-mastery-wrapper
+      background #35495E
+    p
+      color #fff
+
+  &.hide
+    transition height .3s ease-out
+    height: 0
+
+  a
+    display flex
+    height 80px
+    justify-content center
+  
+  .vue-mastery-wrapper
+    display flex
+    height 100%
+    align-items center
+    background #4fc08d
+    margin-left -50px
+    padding-left 50px
+
+    &:hover
+      + .close
+        &:before,
+        &:after
+          transform-origin 100%
+
+  .vue-mastery-logo
+    height 102%
+    margin-top: -1px
+    margin-left 125px
+    position relative
+
+  p
+    margin -3px 50px 0 20px
+    font-size 1.17rem
+    font-weight 600
+    color #2c3e50
+
+  span
+    font-size 1rem
+    display block
+    color #fff
+  
+  .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)
+
+    &:hover
+      background closeBgHoverColor
+      &:before,
+      &:after
+        background-color closeBarBgHoverColor
+        transform rotate(180deg)
+
+@media screen and (max-width: 900px)
+  .vue-mastery-promo + #mobile-bar.top
+    position relative
+    background-color #fff
+
+  .vue-mastery-promo.fixed 
+    margin-bottom 40px
+    + #mobile-bar
+      position fixed
+
+  .vue-mastery-promo
+    .vue-mastery-logo
+      margin-left 0
+
+@media screen and (max-width: 700px)
+  .vue-mastery-promo
+    height 40px
+    a
+      height 40px
+      overflow hidden
+
+    .vue-mastery-logo
+      margin-left 0
+      justify-content flex-start
+
+    p, span
+      font-size .8rem
+      color #fff
+
+    .close
+      top 0px
+      right 0px
+
+      &:before,
+      &:after
+        top 19px
+        left 14px
+        width 15px
+        height 2px
+
+@media screen and (max-width: 425px)
+  .vue-mastery-promo
+    p
+      max-width 185px
+    span
+      display none
+
+@media screen and (max-width 286px)
+  .vue-mastery-promo p
+    font-size 0.6rem
+    margin -3px 28px 0 0px
+
+@media print
+  .vue-mastery-promo
+    display none
\ No newline at end of file
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 0613877a05..4428e6cad0 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 "_vue-mastery-promo"
 
 $width = 900px
 $space = 40px

From 98a96e39ad61173237c5dd6fe11f7df7596e30c8 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 13 Feb 2019 12:39:56 -0200
Subject: [PATCH 02/20] Add banner only on homepage

---
 themes/vue/layout/layout.ejs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
index 0071b7de5c..d34aa12faf 100644
--- a/themes/vue/layout/layout.ejs
+++ b/themes/vue/layout/layout.ejs
@@ -78,7 +78,9 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
-    <%- partial('partials/vue_mastery_promo.ejs') %>
+    <% if (isIndex) { %>
+      <%- partial('partials/vue_mastery_promo.ejs') %>
+    <% } %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>

From 4336b97b192f44f18f86b441795b13f89a0c23cb Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 13 Feb 2019 14:10:45 -0200
Subject: [PATCH 03/20] Add vuemastery weekend promo on every pages

---
 themes/vue/layout/layout.ejs                  |  4 +-
 .../vue/layout/partials/vue_mastery_promo.ejs | 14 +++++--
 themes/vue/source/css/_vue-mastery-promo.styl | 40 ++++++++++++++-----
 themes/vue/source/css/page.styl               |  1 +
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
index d34aa12faf..0071b7de5c 100644
--- a/themes/vue/layout/layout.ejs
+++ b/themes/vue/layout/layout.ejs
@@ -78,9 +78,7 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
-    <% if (isIndex) { %>
-      <%- partial('partials/vue_mastery_promo.ejs') %>
-    <% } %>
+    <%- partial('partials/vue_mastery_promo.ejs') %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>
diff --git a/themes/vue/layout/partials/vue_mastery_promo.ejs b/themes/vue/layout/partials/vue_mastery_promo.ejs
index a1f09895ab..b877614bfa 100644
--- a/themes/vue/layout/partials/vue_mastery_promo.ejs
+++ b/themes/vue/layout/partials/vue_mastery_promo.ejs
@@ -1,15 +1,15 @@
 <script>
   (function () {
-    var mobileBar, vuemasteryPromo, menuTop, close;
+    var mobileBar, vuemasteryPromo, menuTop, close, wrapper;
 
     // This allow the mobile menu to scroll once the banner is not visible
     var fixMenuAfterBanner = function() {
       if (window.pageYOffset > menuTop) {
         // The menu will be fixed
-        vuemasteryPromo.classList.add('fixed');
+        wrapper.classList.add('fixed');
       } else {
         // The menu stay under the banner
-        vuemasteryPromo.classList.remove('fixed');
+        wrapper.classList.remove('fixed');
       }
     }
 
@@ -23,7 +23,11 @@
       mobileBar = document.getElementById('mobile-bar');
       vuemasteryPromo = document.getElementById('vue-mastery-promo');
       close = document.getElementById('close-vue-mastery-promo');
+      close = document.getElementById('close-vue-mastery-promo');
+      wrapper = document.getElementsByTagName("body")[0];
 
+      // Add class to wrapper
+      wrapper.classList.add('vuemastery-weekend-promo');
       // Initialize the banner
       vuemasteryPromo.classList.remove('hide');
       // Init close button action
@@ -32,7 +36,7 @@
       // Wait for the end of animation before getting position
       setTimeout(function () {
         // Get position of the menu bar
-        menuTop = mobileBar.offsetTop;
+        menuTop = vuemasteryPromo.clientHeight;
       }, 500)
     }
 
@@ -47,6 +51,8 @@
       // Remove events
       window.removeEventListener('resize', getMenuPosition)
       window.removeEventListener('scroll', fixMenuAfterBanner)
+      // Remove css
+      wrapper.classList.remove('vuemastery-weekend-promo');
     }
     
     // Check if user already removed the banner
diff --git a/themes/vue/source/css/_vue-mastery-promo.styl b/themes/vue/source/css/_vue-mastery-promo.styl
index 3cfca21308..93c66cac11 100644
--- a/themes/vue/source/css/_vue-mastery-promo.styl
+++ b/themes/vue/source/css/_vue-mastery-promo.styl
@@ -2,8 +2,6 @@
   background #4fc08d
   background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
   overflow hidden
-  height 80px
-  transition height .3s ease-in
 
   &:hover
     background-image linear-gradient(to left, #35495E, #35495E 50%, #4fc08d 50%)
@@ -13,7 +11,6 @@
       color #fff
 
   &.hide
-    transition height .3s ease-out
     height: 0
 
   a
@@ -85,23 +82,48 @@
         background-color closeBarBgHoverColor
         transform rotate(180deg)
 
-@media screen and (max-width: 900px)
-  .vue-mastery-promo + #mobile-bar.top
+.vuemastery-weekend-promo
+  #mobile-bar,
+  #mobile-bar.top
     position relative
     background-color #fff
+  
+  &.docs:not(.fixed)
+    padding-top 0
+    #header
+      position relative
+      width auto
+    #nav
+      position absolute
 
-  .vue-mastery-promo.fixed 
-    margin-bottom 40px
-    + #mobile-bar
+  &.fixed
+    #mobile-bar
       position fixed
 
+@media screen and (min-width: 901px)
+  .vuemastery-weekend-promo
+    &.docs:not(.fixed)
+      #main.fix-sidebar .sidebar
+        top 141px
+        position absolute
+    
+    &.fixed.docs
+      .vue-mastery-promo
+        margin-bottom 0
+
+@media screen and (max-width: 900px)
   .vue-mastery-promo
     .vue-mastery-logo
       margin-left 0
 
+  .vuemastery-weekend-promo
+    &.fixed
+      .vue-mastery-promo
+        margin-bottom 40px
+
+
 @media screen and (max-width: 700px)
   .vue-mastery-promo
-    height 40px
     a
       height 40px
       overflow hidden
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index e6bc76ae1c..c24b2801f3 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -14,6 +14,7 @@
 @import "_modal"
 @import "_scrimba"
 @import "_vue-mastery"
+@import "_vue-mastery-promo"
 
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)

From eff58bec62502ed0607599401e34c49747ac80dc Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 13 Feb 2019 15:06:47 -0200
Subject: [PATCH 04/20] Add vuemastery banner transition

---
 themes/vue/source/css/_vue-mastery-promo.styl | 41 ++++++++++++++++---
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/themes/vue/source/css/_vue-mastery-promo.styl b/themes/vue/source/css/_vue-mastery-promo.styl
index 93c66cac11..37dd3f49f2 100644
--- a/themes/vue/source/css/_vue-mastery-promo.styl
+++ b/themes/vue/source/css/_vue-mastery-promo.styl
@@ -2,14 +2,31 @@
   background #4fc08d
   background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
   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
 
   &:hover
-    background-image linear-gradient(to left, #35495E, #35495E 50%, #4fc08d 50%)
-    .vue-mastery-wrapper
-      background #35495E
+    &:before
+      transition width .15s ease-in
+      width 50%
     p
+      transition-delay 0
       color #fff
 
+    .vue-mastery-wrapper::before
+      width 100vw
+      transition width .15s ease-in .10s
+
   &.hide
     height: 0
 
@@ -25,6 +42,19 @@
     background #4fc08d
     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
       + .close
@@ -37,12 +67,15 @@
     margin-top: -1px
     margin-left 125px
     position relative
+    z-index 2
 
   p
     margin -3px 50px 0 20px
     font-size 1.17rem
     font-weight 600
     color #2c3e50
+    position relative
+    transition-delay .15s
 
   span
     font-size 1rem
@@ -76,10 +109,8 @@
       transform rotate(45deg)
 
     &:hover
-      background closeBgHoverColor
       &:before,
       &:after
-        background-color closeBarBgHoverColor
         transform rotate(180deg)
 
 .vuemastery-weekend-promo

From 8fdde11f23715f6c2e50961f75bdeb32b827e3f4 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 13 Feb 2019 16:06:07 -0200
Subject: [PATCH 05/20] Fix platinium sponsor sidebar with vuemastery banner

---
 themes/vue/source/css/_vue-mastery-promo.styl | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/themes/vue/source/css/_vue-mastery-promo.styl b/themes/vue/source/css/_vue-mastery-promo.styl
index 37dd3f49f2..871adfa7c0 100644
--- a/themes/vue/source/css/_vue-mastery-promo.styl
+++ b/themes/vue/source/css/_vue-mastery-promo.styl
@@ -135,8 +135,12 @@
   .vuemastery-weekend-promo
     &.docs:not(.fixed)
       #main.fix-sidebar .sidebar
+        position absolute
         top 141px
+      
+      #sidebar-sponsors-platinum-right
         position absolute
+        top: 170px;
     
     &.fixed.docs
       .vue-mastery-promo

From b725f678f90f54125a7ea69713dea3f0bc30ef38 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 13 Feb 2019 17:52:58 -0200
Subject: [PATCH 06/20] Fix double line

---
 themes/vue/layout/partials/vue_mastery_promo.ejs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/themes/vue/layout/partials/vue_mastery_promo.ejs b/themes/vue/layout/partials/vue_mastery_promo.ejs
index b877614bfa..4ef545cd47 100644
--- a/themes/vue/layout/partials/vue_mastery_promo.ejs
+++ b/themes/vue/layout/partials/vue_mastery_promo.ejs
@@ -23,7 +23,6 @@
       mobileBar = document.getElementById('mobile-bar');
       vuemasteryPromo = document.getElementById('vue-mastery-promo');
       close = document.getElementById('close-vue-mastery-promo');
-      close = document.getElementById('close-vue-mastery-promo');
       wrapper = document.getElementsByTagName("body")[0];
 
       // Add class to wrapper

From f02194230369d21d613f2087ad4ade14237897b7 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 13 Feb 2019 17:55:51 -0200
Subject: [PATCH 07/20] Remove banner animation and timeout

---
 themes/vue/layout/partials/vue_mastery_promo.ejs | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/themes/vue/layout/partials/vue_mastery_promo.ejs b/themes/vue/layout/partials/vue_mastery_promo.ejs
index 4ef545cd47..97159303e8 100644
--- a/themes/vue/layout/partials/vue_mastery_promo.ejs
+++ b/themes/vue/layout/partials/vue_mastery_promo.ejs
@@ -32,11 +32,8 @@
       // Init close button action
       close.onclick = closeBanner
 
-      // Wait for the end of animation before getting position
-      setTimeout(function () {
-        // Get position of the menu bar
-        menuTop = vuemasteryPromo.clientHeight;
-      }, 500)
+      // Get position of the menu bar
+      menuTop = vuemasteryPromo.clientHeight;
     }
 
     // Remove the banner once the user click on the cross

From 5fd5baa0231b47f59446d3ce138f65e3f2d0d998 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 13 Feb 2019 18:22:55 -0200
Subject: [PATCH 08/20] Add javascript after HTML content

---
 .../vue/layout/partials/vue_mastery_promo.ejs | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/themes/vue/layout/partials/vue_mastery_promo.ejs b/themes/vue/layout/partials/vue_mastery_promo.ejs
index 97159303e8..01e34a8e6e 100644
--- a/themes/vue/layout/partials/vue_mastery_promo.ejs
+++ b/themes/vue/layout/partials/vue_mastery_promo.ejs
@@ -1,3 +1,13 @@
+<div id="vue-mastery-promo" class="vue-mastery-promo hide" role="banner">
+  <a href="https://www.vuemastery.com/free-weekend" target="_blank">
+    <img class="vue-mastery-logo" src="/images/logo-vuemastery.svg" alt="vue-mastery" />
+    <div class="vue-mastery-wrapper">
+      <p>Free Vue Courses on Vue Mastery Feb 22 - Feb 24.<span>Sign up today to get access.</span></p>
+    </div>
+    <div id="close-vue-mastery-promo" class="close"></div>
+  </a>
+</div>
+
 <script>
   (function () {
     var mobileBar, vuemasteryPromo, menuTop, close, wrapper;
@@ -61,13 +71,3 @@
     }
   })()
 </script>
-
-<div id="vue-mastery-promo" class="vue-mastery-promo hide" role="banner">
-  <a href="https://www.vuemastery.com/free-weekend" target="_blank">
-    <img class="vue-mastery-logo" src="/images/logo-vuemastery.svg" alt="vue-mastery" />
-    <div class="vue-mastery-wrapper">
-      <p>Free Vue Courses on Vue Mastery Feb 22 - Feb 24.<span>Sign up today to get access.</span></p>
-    </div>
-    <div id="close-vue-mastery-promo" class="close"></div>
-  </a>
-</div>
\ No newline at end of file

From a07fc45770681dc9e5cba24a423bd0aed766f67e Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 11:58:45 -0200
Subject: [PATCH 09/20] Optimise code on scroll with vue mastery banner

---
 .../vue/layout/partials/vue_mastery_promo.ejs   | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/themes/vue/layout/partials/vue_mastery_promo.ejs b/themes/vue/layout/partials/vue_mastery_promo.ejs
index 01e34a8e6e..b1540310b1 100644
--- a/themes/vue/layout/partials/vue_mastery_promo.ejs
+++ b/themes/vue/layout/partials/vue_mastery_promo.ejs
@@ -10,16 +10,20 @@
 
 <script>
   (function () {
-    var mobileBar, vuemasteryPromo, menuTop, close, wrapper;
+    var mobileBar, vuemasteryPromo, menuTop, close, wrapper, isMenuFixed;
 
     // This allow the mobile menu to scroll once the banner is not visible
     var fixMenuAfterBanner = function() {
       if (window.pageYOffset > menuTop) {
-        // The menu will be fixed
-        wrapper.classList.add('fixed');
-      } else {
+        if (!isMenuFixed) {
+          // The menu will be fixed
+          wrapper.classList.add('fixed');
+          isMenuFixed = true;
+        }
+      } else if(isMenuFixed) {
         // The menu stay under the banner
         wrapper.classList.remove('fixed');
+        isMenuFixed = false;
       }
     }
 
@@ -41,9 +45,12 @@
       vuemasteryPromo.classList.remove('hide');
       // Init close button action
       close.onclick = closeBanner
-
+      
       // Get position of the menu bar
       menuTop = vuemasteryPromo.clientHeight;
+      // Check initial position
+      isMenuFixed = window.pageYOffset > menuTop
+      if (isMenuFixed) wrapper.classList.add('fixed');
     }
 
     // Remove the banner once the user click on the cross

From 8eaa956d59f211bc4f6e8f93a77c7ade4b5584ca Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 12:07:31 -0200
Subject: [PATCH 10/20] Rename variable for better understanding

---
 .../vue/layout/partials/vue_mastery_promo.ejs | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/themes/vue/layout/partials/vue_mastery_promo.ejs b/themes/vue/layout/partials/vue_mastery_promo.ejs
index b1540310b1..aba761254e 100644
--- a/themes/vue/layout/partials/vue_mastery_promo.ejs
+++ b/themes/vue/layout/partials/vue_mastery_promo.ejs
@@ -10,47 +10,47 @@
 
 <script>
   (function () {
-    var mobileBar, vuemasteryPromo, menuTop, close, wrapper, isMenuFixed;
+    var elBody, elMenu, elBanner, elClose, posMenu, isMenuFixed;
 
     // This allow the mobile menu to scroll once the banner is not visible
     var fixMenuAfterBanner = function() {
-      if (window.pageYOffset > menuTop) {
+      if (window.pageYOffset > posMenu) {
         if (!isMenuFixed) {
           // The menu will be fixed
-          wrapper.classList.add('fixed');
+          elBody.classList.add('fixed');
           isMenuFixed = true;
         }
       } else if(isMenuFixed) {
         // The menu stay under the banner
-        wrapper.classList.remove('fixed');
+        elBody.classList.remove('fixed');
         isMenuFixed = false;
       }
     }
 
     // Get position of the menu when the windows is resized
     var getMenuPosition = function() {
-      menuTop = vuemasteryPromo.clientHeight;
+      posMenu = elBanner.clientHeight;
     }
 
     var initBanner = function () {
       // Get elements
-      mobileBar = document.getElementById('mobile-bar');
-      vuemasteryPromo = document.getElementById('vue-mastery-promo');
-      close = document.getElementById('close-vue-mastery-promo');
-      wrapper = document.getElementsByTagName("body")[0];
+      elMenu = document.getElementById('mobile-bar');
+      elBanner = document.getElementById('vue-mastery-promo');
+      elClose = document.getElementById('close-vue-mastery-promo');
+      elBody = document.getElementsByTagName("body")[0];
 
-      // Add class to wrapper
-      wrapper.classList.add('vuemastery-weekend-promo');
+      // Add class to the body
+      elBody.classList.add('vuemastery-weekend-promo');
       // Initialize the banner
-      vuemasteryPromo.classList.remove('hide');
+      elBanner.classList.remove('hide');
       // Init close button action
-      close.onclick = closeBanner
+      elClose.onclick = closeBanner
       
       // Get position of the menu bar
-      menuTop = vuemasteryPromo.clientHeight;
+      posMenu = elBanner.clientHeight;
       // Check initial position
-      isMenuFixed = window.pageYOffset > menuTop
-      if (isMenuFixed) wrapper.classList.add('fixed');
+      isMenuFixed = window.pageYOffset > posMenu
+      if (isMenuFixed) elBody.classList.add('fixed');
     }
 
     // Remove the banner once the user click on the cross
@@ -60,12 +60,12 @@
       // Save action in the local storage
       localStorage.setItem('hideVuemasteryBanner', true);
       // Hide the banner
-      vuemasteryPromo.classList.add('hide');
+      elBanner.classList.add('hide');
       // Remove events
       window.removeEventListener('resize', getMenuPosition)
       window.removeEventListener('scroll', fixMenuAfterBanner)
       // Remove css
-      wrapper.classList.remove('vuemastery-weekend-promo');
+      elBody.classList.remove('vuemastery-weekend-promo');
     }
     
     // Check if user already removed the banner

From b19ad3e0681c7253138d32bcdd6640436258690d Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 12:39:45 -0200
Subject: [PATCH 11/20] Rename vuemastery variables

---
 themes/vue/layout/layout.ejs                  |   2 +-
 ...astery_promo.ejs => vuemastery_banner.ejs} |  59 ++++----
 ...ery-promo.styl => _vuemastery-banner.styl} | 140 +++++++++---------
 .../{_vue-mastery.styl => _vuemastery.styl}   |   0
 themes/vue/source/css/index.styl              |   2 +-
 themes/vue/source/css/page.styl               |   4 +-
 6 files changed, 104 insertions(+), 103 deletions(-)
 rename themes/vue/layout/partials/{vue_mastery_promo.ejs => vuemastery_banner.ejs} (83%)
 rename themes/vue/source/css/{_vue-mastery-promo.styl => _vuemastery-banner.styl} (61%)
 rename themes/vue/source/css/{_vue-mastery.styl => _vuemastery.styl} (100%)

diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
index 0071b7de5c..c046e4c4fa 100644
--- a/themes/vue/layout/layout.ejs
+++ b/themes/vue/layout/layout.ejs
@@ -78,7 +78,7 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
-    <%- partial('partials/vue_mastery_promo.ejs') %>
+    <%- partial('partials/vuemastery_banner.ejs') %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>
diff --git a/themes/vue/layout/partials/vue_mastery_promo.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
similarity index 83%
rename from themes/vue/layout/partials/vue_mastery_promo.ejs
rename to themes/vue/layout/partials/vuemastery_banner.ejs
index aba761254e..eebff7ef78 100644
--- a/themes/vue/layout/partials/vue_mastery_promo.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -1,43 +1,23 @@
-<div id="vue-mastery-promo" class="vue-mastery-promo hide" role="banner">
+<div id="vm-banner" class="vuemastery-banner hide" role="banner">
   <a href="https://www.vuemastery.com/free-weekend" target="_blank">
-    <img class="vue-mastery-logo" src="/images/logo-vuemastery.svg" alt="vue-mastery" />
-    <div class="vue-mastery-wrapper">
+    <img class="vuemastery-banner--logo" src="/images/logo-vuemastery.svg" alt="vuemastery" />
+    <div class="vuemastery-banner--wrapper">
       <p>Free Vue Courses on Vue Mastery Feb 22 - Feb 24.<span>Sign up today to get access.</span></p>
     </div>
-    <div id="close-vue-mastery-promo" class="close"></div>
+    <div id="vm-close" class="vuemastery-banner--close"></div>
   </a>
 </div>
 
 <script>
   (function () {
-    var elBody, elMenu, elBanner, elClose, posMenu, isMenuFixed;
-
-    // This allow the mobile menu to scroll once the banner is not visible
-    var fixMenuAfterBanner = function() {
-      if (window.pageYOffset > posMenu) {
-        if (!isMenuFixed) {
-          // The menu will be fixed
-          elBody.classList.add('fixed');
-          isMenuFixed = true;
-        }
-      } else if(isMenuFixed) {
-        // The menu stay under the banner
-        elBody.classList.remove('fixed');
-        isMenuFixed = false;
-      }
-    }
-
-    // Get position of the menu when the windows is resized
-    var getMenuPosition = function() {
-      posMenu = elBanner.clientHeight;
-    }
+    var elBody, elBanner, elClose, elMenu, posMenu, isMenuFixed;
 
     var initBanner = function () {
       // Get elements
-      elMenu = document.getElementById('mobile-bar');
-      elBanner = document.getElementById('vue-mastery-promo');
-      elClose = document.getElementById('close-vue-mastery-promo');
       elBody = document.getElementsByTagName("body")[0];
+      elBanner = document.getElementById('vm-banner');
+      elClose = document.getElementById('vm-close');
+      elMenu = document.getElementById('mobile-bar');
 
       // Add class to the body
       elBody.classList.add('vuemastery-weekend-promo');
@@ -53,6 +33,26 @@
       if (isMenuFixed) elBody.classList.add('fixed');
     }
 
+    // Get position of the menu when the windows is resized
+    var getMenuPosition = function() {
+      posMenu = elBanner.clientHeight;
+    }
+
+    // This allow the mobile menu to scroll once the banner is not visible
+    var fixMenuAfterBanner = function() {
+      if (window.pageYOffset > posMenu) {
+        if (!isMenuFixed) {
+          // The menu will be fixed
+          elBody.classList.add('fixed');
+          isMenuFixed = true;
+        }
+      } else if(isMenuFixed) {
+        // The menu stay under the banner
+        elBody.classList.remove('fixed');
+        isMenuFixed = false;
+      }
+    }
+
     // Remove the banner once the user click on the cross
     var closeBanner = function(e) {
       // Prevent redirection to vuemastery if click on the close button
@@ -67,7 +67,8 @@
       // Remove css
       elBody.classList.remove('vuemastery-weekend-promo');
     }
-    
+
+    // LOAD COMPONENT
     // Check if user already removed the banner
     if(!localStorage.getItem('hideVuemasteryBanner')) {
       // Add event listeners
diff --git a/themes/vue/source/css/_vue-mastery-promo.styl b/themes/vue/source/css/_vuemastery-banner.styl
similarity index 61%
rename from themes/vue/source/css/_vue-mastery-promo.styl
rename to themes/vue/source/css/_vuemastery-banner.styl
index 871adfa7c0..68f6d00322 100644
--- a/themes/vue/source/css/_vue-mastery-promo.styl
+++ b/themes/vue/source/css/_vuemastery-banner.styl
@@ -1,4 +1,4 @@
-.vue-mastery-promo
+.vuemastery-banner
   background #4fc08d
   background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
   overflow hidden
@@ -23,7 +23,7 @@
       transition-delay 0
       color #fff
 
-    .vue-mastery-wrapper::before
+    .vuemastery-banner--wrapper::before
       width 100vw
       transition width .15s ease-in .10s
 
@@ -35,40 +35,33 @@
     height 80px
     justify-content center
   
-  .vue-mastery-wrapper
-    display flex
-    height 100%
-    align-items center
-    background #4fc08d
-    margin-left -50px
-    padding-left 50px
-    position relative
+.vuemastery-banner--wrapper
+  display flex
+  height 100%
+  align-items center
+  background #4fc08d
+  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
-      + .close
-        &:before,
-        &:after
-          transform-origin 100%
-
-  .vue-mastery-logo
-    height 102%
-    margin-top: -1px
-    margin-left 125px
-    position relative
-    z-index 2
+  &: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
+    + .vuemastery-banner--close
+      &:before,
+      &:after
+        transform-origin 100%
+  
   p
     margin -3px 50px 0 20px
     font-size 1.17rem
@@ -81,37 +74,44 @@
     font-size 1rem
     display block
     color #fff
+
+.vuemastery-banner--logo
+  height 102%
+  margin-top: -1px
+  margin-left 125px
+  position relative
+  z-index 2
   
-  .close
+.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 20px
-    right 25px
-    height 40px
-    width 40px
-    -webkit-tap-highlight-color transparent
-    border-radius 50%
-    cursor pointer
+    top 19px
+    left 14px
+    width 25px
+    height 2px
+    background-color #fff
+    transform-origin 50%
+    transform rotate(-45deg)
+    transition all .2s ease-out
 
-    &: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)
 
+  &:hover
+    &:before,
     &:after
-      transform rotate(45deg)
-
-    &:hover
-      &:before,
-      &:after
-        transform rotate(180deg)
+      transform rotate(180deg)
 
 .vuemastery-weekend-promo
   #mobile-bar,
@@ -143,27 +143,27 @@
         top: 170px;
     
     &.fixed.docs
-      .vue-mastery-promo
+      .vuemastery-banner
         margin-bottom 0
 
 @media screen and (max-width: 900px)
-  .vue-mastery-promo
-    .vue-mastery-logo
+  .vuemastery-banner
+    .vuemastery-banner--logo
       margin-left 0
 
   .vuemastery-weekend-promo
     &.fixed
-      .vue-mastery-promo
+      .vuemastery-banner
         margin-bottom 40px
 
 
 @media screen and (max-width: 700px)
-  .vue-mastery-promo
+  .vuemastery-banner
     a
       height 40px
       overflow hidden
 
-    .vue-mastery-logo
+    .vuemastery-banner--logo
       margin-left 0
       justify-content flex-start
 
@@ -171,7 +171,7 @@
       font-size .8rem
       color #fff
 
-    .close
+    .vuemastery-banner--close
       top 0px
       right 0px
 
@@ -183,17 +183,17 @@
         height 2px
 
 @media screen and (max-width: 425px)
-  .vue-mastery-promo
+  .vuemastery-banner
     p
       max-width 185px
     span
       display none
 
 @media screen and (max-width 286px)
-  .vue-mastery-promo p
+  .vuemastery-banner p
     font-size 0.6rem
     margin -3px 28px 0 0px
 
 @media print
-  .vue-mastery-promo
+  .vuemastery-banner
     display none
\ No newline at end of file
diff --git a/themes/vue/source/css/_vue-mastery.styl b/themes/vue/source/css/_vuemastery.styl
similarity index 100%
rename from themes/vue/source/css/_vue-mastery.styl
rename to themes/vue/source/css/_vuemastery.styl
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 4428e6cad0..aedfe80698 100644
--- a/themes/vue/source/css/index.styl
+++ b/themes/vue/source/css/index.styl
@@ -3,7 +3,7 @@
 @import "_sidebar"
 @import "_sponsors-index"
 @import "_modal"
-@import "_vue-mastery-promo"
+@import "_vuemastery-banner"
 
 $width = 900px
 $space = 40px
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index c24b2801f3..500485e8af 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -13,8 +13,8 @@
 @import "_style-guide"
 @import "_modal"
 @import "_scrimba"
-@import "_vue-mastery"
-@import "_vue-mastery-promo"
+@import "_vuemastery"
+@import "_vuemastery-banner"
 
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)

From 59ecdf1e6f2873b0f0869c1ea1aa1732bc2a7c69 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 13:08:07 -0200
Subject: [PATCH 12/20] Refactor code and remove unecessary wait for
 DOMContentLoaded

---
 themes/vue/layout/index.ejs                   | 53 +++++++++----------
 .../vue/layout/partials/vuemastery_banner.ejs | 39 ++++++++------
 themes/vue/source/css/_vuemastery-banner.styl | 14 +++--
 3 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index 199ad4401f..10eed9f2ca 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -126,37 +126,34 @@
 
 <script>
 (function () {
-  // Fix error when element not present in DOM
-  document.addEventListener("DOMContentLoaded", function() {
-    var topScrolled = false
-    var sponsors = document.getElementById('sponsors')
-    var sponsorTop = sponsors.offsetTop
-    var sponsorActive = false
+  var topScrolled = false
+  var sponsors = document.getElementById('sponsors')
+  var sponsorTop = sponsors.offsetTop
+  var sponsorActive = false
 
-    window.addEventListener('resize', function () {
-      sponsorTop = sponsors.offsetTop
-    })
+  window.addEventListener('resize', function () {
+    sponsorTop = sponsors.offsetTop
+  })
 
-    window.addEventListener('scroll', function () {
-      if (window.pageYOffset > 165 && !topScrolled) {
-        topScrolled = true
-        document.getElementById('mobile-bar').classList.remove('top')
-      } else if (window.pageYOffset <= 165 && topScrolled) {
-        topScrolled = false
-        document.getElementById('mobile-bar').classList.add('top')
+  window.addEventListener('scroll', function () {
+    if (window.pageYOffset > 165 && !topScrolled) {
+      topScrolled = true
+      document.getElementById('mobile-bar').classList.remove('top')
+    } else if (window.pageYOffset <= 165 && topScrolled) {
+      topScrolled = false
+      document.getElementById('mobile-bar').classList.add('top')
+    }
+    if (window.pageYOffset > sponsorTop - 100) {
+      if (!sponsorActive) {
+        sponsorActive = true
+        sponsors.classList.add('active')
       }
-      if (window.pageYOffset > sponsorTop - 100) {
-        if (!sponsorActive) {
-          sponsorActive = true
-          sponsors.classList.add('active')
-        }
-      } else {
-        if (sponsorActive) {
-          sponsorActive = false
-          sponsors.classList.remove('active')
-        }
+    } else {
+      if (sponsorActive) {
+        sponsorActive = false
+        sponsors.classList.remove('active')
       }
-    })
-  });
+    }
+  })
 })()
 </script>
diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index eebff7ef78..aa0e5f17ed 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -11,25 +11,28 @@
 <script>
   (function () {
     var elBody, elBanner, elClose, elMenu, posMenu, isMenuFixed;
+    var nameWrapper = 'vuemastery-weekend-promo';
+    var nameFixMenu = 'vuemastery-menu-fixed'
+    var nameStorage = 'vuemastery-banner'
 
     var initBanner = function () {
       // Get elements
-      elBody = document.getElementsByTagName("body")[0];
+      elBody = document.getElementsByTagName('body')[0];
       elBanner = document.getElementById('vm-banner');
       elClose = document.getElementById('vm-close');
       elMenu = document.getElementById('mobile-bar');
 
       // Add class to the body
-      elBody.classList.add('vuemastery-weekend-promo');
+      elBody.classList.add(nameWrapper);
       // Initialize the banner
-      elBanner.classList.remove('hide');
+      elBanner.style.display = 'block';
       // Init close button action
-      elClose.onclick = closeBanner
+      elClose.onclick = closeBanner;
       
       // Get position of the menu bar
       posMenu = elBanner.clientHeight;
       // Check initial position
-      isMenuFixed = window.pageYOffset > posMenu
+      isMenuFixed = window.pageYOffset > posMenu;
       if (isMenuFixed) elBody.classList.add('fixed');
     }
 
@@ -43,39 +46,43 @@
       if (window.pageYOffset > posMenu) {
         if (!isMenuFixed) {
           // The menu will be fixed
-          elBody.classList.add('fixed');
+          elBody.classList.add(nameFixMenu);
           isMenuFixed = true;
         }
       } else if(isMenuFixed) {
         // The menu stay under the banner
-        elBody.classList.remove('fixed');
+        elBody.classList.remove(nameFixMenu);
         isMenuFixed = false;
       }
     }
 
+    var toggleBannerEvents = function (on) {
+      var method = on ? 'addEventListener' : 'removeEventListener'
+      window[method]('resize', getMenuPosition);
+      window[method]('scroll', fixMenuAfterBanner);
+    }
+
     // Remove the banner once the user click on the cross
     var closeBanner = function(e) {
       // Prevent redirection to vuemastery if click on the close button
       e.preventDefault();
       // Save action in the local storage
-      localStorage.setItem('hideVuemasteryBanner', true);
+      localStorage.setItem(nameStorage, true);
       // Hide the banner
-      elBanner.classList.add('hide');
+      elBanner.style.display = 'none';
       // Remove events
-      window.removeEventListener('resize', getMenuPosition)
-      window.removeEventListener('scroll', fixMenuAfterBanner)
+      toggleBannerEvents(false);
       // Remove css
-      elBody.classList.remove('vuemastery-weekend-promo');
+      elBody.classList.remove(nameWrapper);
     }
 
     // LOAD COMPONENT
     // Check if user already removed the banner
-    if(!localStorage.getItem('hideVuemasteryBanner')) {
+    if(!localStorage.getItem(nameStorage)) {
       // Add event listeners
-      window.addEventListener('resize', getMenuPosition)
-      window.addEventListener('scroll', fixMenuAfterBanner)
+      toggleBannerEvents(true);
       // Wait for the DOM to be ready
-      document.addEventListener("DOMContentLoaded", initBanner);
+      initBanner();
     }
   })()
 </script>
diff --git a/themes/vue/source/css/_vuemastery-banner.styl b/themes/vue/source/css/_vuemastery-banner.styl
index 68f6d00322..e330217d11 100644
--- a/themes/vue/source/css/_vuemastery-banner.styl
+++ b/themes/vue/source/css/_vuemastery-banner.styl
@@ -1,4 +1,5 @@
 .vuemastery-banner
+  display none
   background #4fc08d
   background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
   overflow hidden
@@ -27,9 +28,6 @@
       width 100vw
       transition width .15s ease-in .10s
 
-  &.hide
-    height: 0
-
   a
     display flex
     height 80px
@@ -119,7 +117,7 @@
     position relative
     background-color #fff
   
-  &.docs:not(.fixed)
+  &.docs:not(.vuemastery-menu-fixed)
     padding-top 0
     #header
       position relative
@@ -127,13 +125,13 @@
     #nav
       position absolute
 
-  &.fixed
+  &.vuemastery-menu-fixed
     #mobile-bar
       position fixed
 
 @media screen and (min-width: 901px)
   .vuemastery-weekend-promo
-    &.docs:not(.fixed)
+    &.docs:not(.vuemastery-menu-fixed)
       #main.fix-sidebar .sidebar
         position absolute
         top 141px
@@ -142,7 +140,7 @@
         position absolute
         top: 170px;
     
-    &.fixed.docs
+    &.vuemastery-menu-fixed.docs
       .vuemastery-banner
         margin-bottom 0
 
@@ -152,7 +150,7 @@
       margin-left 0
 
   .vuemastery-weekend-promo
-    &.fixed
+    &.vuemastery-menu-fixed
       .vuemastery-banner
         margin-bottom 40px
 

From 1febd2fd318df4ca92b28520360857b78b4b49d7 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 13:20:45 -0200
Subject: [PATCH 13/20] Lint code

---
 themes/vue/layout/partials/vuemastery_banner.ejs | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index aa0e5f17ed..aee139fbdf 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -12,8 +12,8 @@
   (function () {
     var elBody, elBanner, elClose, elMenu, posMenu, isMenuFixed;
     var nameWrapper = 'vuemastery-weekend-promo';
-    var nameFixMenu = 'vuemastery-menu-fixed'
-    var nameStorage = 'vuemastery-banner'
+    var nameFixMenu = 'vuemastery-menu-fixed';
+    var nameStorage = 'vuemastery-banner';
 
     var initBanner = function () {
       // Get elements
@@ -49,7 +49,7 @@
           elBody.classList.add(nameFixMenu);
           isMenuFixed = true;
         }
-      } else if(isMenuFixed) {
+      } else if (isMenuFixed) {
         // The menu stay under the banner
         elBody.classList.remove(nameFixMenu);
         isMenuFixed = false;
@@ -57,7 +57,7 @@
     }
 
     var toggleBannerEvents = function (on) {
-      var method = on ? 'addEventListener' : 'removeEventListener'
+      var method = on ? 'addEventListener' : 'removeEventListener';
       window[method]('resize', getMenuPosition);
       window[method]('scroll', fixMenuAfterBanner);
     }
@@ -76,12 +76,11 @@
       elBody.classList.remove(nameWrapper);
     }
 
-    // LOAD COMPONENT
     // Check if user already removed the banner
     if(!localStorage.getItem(nameStorage)) {
       // Add event listeners
       toggleBannerEvents(true);
-      // Wait for the DOM to be ready
+      // Load component
       initBanner();
     }
   })()

From 2f3ff4a6f89a329e81c294f28921919c3828e63b Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 13:38:19 -0200
Subject: [PATCH 14/20] Refactor, clean and lint code

---
 .../vue/layout/partials/vuemastery_banner.ejs | 48 +++++++++----------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index aee139fbdf..4ceba15980 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -10,32 +10,41 @@
 
 <script>
   (function () {
-    var elBody, elBanner, elClose, elMenu, posMenu, isMenuFixed;
+    var elBody = document.getElementsByTagName('body')[0];
+    var elBanner = document.getElementById('vm-banner');
+    var elClose = document.getElementById('vm-close');
+    var elMenu = document.getElementById('mobile-bar');
     var nameWrapper = 'vuemastery-weekend-promo';
     var nameFixMenu = 'vuemastery-menu-fixed';
     var nameStorage = 'vuemastery-banner';
+    var posMenu = elBanner.clientHeight;
+    var isMenuFixed = window.pageYOffset > posMenu;
 
+    // Initialise banner after checking user preference
     var initBanner = function () {
-      // Get elements
-      elBody = document.getElementsByTagName('body')[0];
-      elBanner = document.getElementById('vm-banner');
-      elClose = document.getElementById('vm-close');
-      elMenu = document.getElementById('mobile-bar');
-
       // Add class to the body
       elBody.classList.add(nameWrapper);
       // Initialize the banner
       elBanner.style.display = 'block';
       // Init close button action
       elClose.onclick = closeBanner;
-      
-      // Get position of the menu bar
-      posMenu = elBanner.clientHeight;
-      // Check initial position
-      isMenuFixed = window.pageYOffset > posMenu;
       if (isMenuFixed) elBody.classList.add('fixed');
     }
 
+    // Remove the banner once the user click on the cross
+    var closeBanner = function(e) {
+      // Prevent redirection to vuemastery if click on the close button
+      e.preventDefault();
+      // Save action in the local storage
+      localStorage.setItem(nameStorage, true);
+      // Hide the banner
+      elBanner.style.display = 'none';
+      // Remove events
+      toggleBannerEvents(false);
+      // Remove css
+      elBody.classList.remove(nameWrapper);
+    }
+
     // Get position of the menu when the windows is resized
     var getMenuPosition = function() {
       posMenu = elBanner.clientHeight;
@@ -56,26 +65,13 @@
       }
     }
 
+    // Add or remove event listerners attached to the DOM
     var toggleBannerEvents = function (on) {
       var method = on ? 'addEventListener' : 'removeEventListener';
       window[method]('resize', getMenuPosition);
       window[method]('scroll', fixMenuAfterBanner);
     }
 
-    // Remove the banner once the user click on the cross
-    var closeBanner = function(e) {
-      // Prevent redirection to vuemastery if click on the close button
-      e.preventDefault();
-      // Save action in the local storage
-      localStorage.setItem(nameStorage, true);
-      // Hide the banner
-      elBanner.style.display = 'none';
-      // Remove events
-      toggleBannerEvents(false);
-      // Remove css
-      elBody.classList.remove(nameWrapper);
-    }
-
     // Check if user already removed the banner
     if(!localStorage.getItem(nameStorage)) {
       // Add event listeners

From 9711645c94b26c6caf623defa70d45cf6921fedc Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 13:41:21 -0200
Subject: [PATCH 15/20] Fix menu position initialization

---
 themes/vue/layout/partials/vuemastery_banner.ejs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index 4ceba15980..6f8091abd6 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -17,8 +17,8 @@
     var nameWrapper = 'vuemastery-weekend-promo';
     var nameFixMenu = 'vuemastery-menu-fixed';
     var nameStorage = 'vuemastery-banner';
-    var posMenu = elBanner.clientHeight;
     var isMenuFixed = window.pageYOffset > posMenu;
+    var posMenu = 80;
 
     // Initialise banner after checking user preference
     var initBanner = function () {
@@ -26,6 +26,8 @@
       elBody.classList.add(nameWrapper);
       // Initialize the banner
       elBanner.style.display = 'block';
+      // Get menu position
+      posMenu = elBanner.clientHeight;
       // Init close button action
       elClose.onclick = closeBanner;
       if (isMenuFixed) elBody.classList.add('fixed');

From abbb038f173b8d74a09e7ef6616ba709c4e0088b Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 13:42:16 -0200
Subject: [PATCH 16/20] Remove unuecessary hardcoded position

---
 themes/vue/layout/partials/vuemastery_banner.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index 6f8091abd6..f43cac092c 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -18,7 +18,7 @@
     var nameFixMenu = 'vuemastery-menu-fixed';
     var nameStorage = 'vuemastery-banner';
     var isMenuFixed = window.pageYOffset > posMenu;
-    var posMenu = 80;
+    var posMenu;
 
     // Initialise banner after checking user preference
     var initBanner = function () {

From 4dda4d1da8fd3eab77dbf68e370e61efd35ac1a8 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 13:44:11 -0200
Subject: [PATCH 17/20] Fix menu initialization

---
 themes/vue/layout/partials/vuemastery_banner.ejs | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index f43cac092c..05a86d81dc 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -17,8 +17,7 @@
     var nameWrapper = 'vuemastery-weekend-promo';
     var nameFixMenu = 'vuemastery-menu-fixed';
     var nameStorage = 'vuemastery-banner';
-    var isMenuFixed = window.pageYOffset > posMenu;
-    var posMenu;
+    var isMenuFixed, posMenu;
 
     // Initialise banner after checking user preference
     var initBanner = function () {
@@ -30,6 +29,9 @@
       posMenu = elBanner.clientHeight;
       // Init close button action
       elClose.onclick = closeBanner;
+      // Check current page scroll position
+      isMenuFixed = window.pageYOffset > posMenu;
+      // And fixc menu accordingly
       if (isMenuFixed) elBody.classList.add('fixed');
     }
 

From 0f97377100b38bfdca92ceeabaa99535207bb052 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 14 Feb 2019 14:06:00 -0200
Subject: [PATCH 18/20] Clean code and comment

---
 .../vue/layout/partials/vuemastery_banner.ejs | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index 05a86d81dc..b4585ee7d7 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -21,42 +21,45 @@
 
     // Initialise banner after checking user preference
     var initBanner = function () {
-      // Add class to the body
+      // Add class to the body to push fixed elements
       elBody.classList.add(nameWrapper);
-      // Initialize the banner
+      // Display the banner
       elBanner.style.display = 'block';
-      // Get menu position
-      posMenu = elBanner.clientHeight;
-      // Init close button action
-      elClose.onclick = closeBanner;
-      // Check current page scroll position
-      isMenuFixed = window.pageYOffset > posMenu;
-      // And fixc menu accordingly
+      // Get the menu position
+      getMenuPosition();
+      // Check current page offset position
+      isMenuFixed = isUnderBanner();
+      // And position menu accordingly
       if (isMenuFixed) elBody.classList.add('fixed');
     }
 
-    // Remove the banner once the user click on the cross
+    // Remove the banner once the user decide to close
     var closeBanner = function(e) {
-      // Prevent redirection to vuemastery if click on the close button
+      // Prevent bubbling event that redirect to vuemastery.com
       e.preventDefault();
-      // Save action in the local storage
-      localStorage.setItem(nameStorage, true);
-      // Hide the banner
-      elBanner.style.display = 'none';
       // Remove events
       toggleBannerEvents(false);
-      // Remove css
+      // Hide the banner
+      elBanner.style.display = 'none';
+      // Remove class to the body that push fixed elements
       elBody.classList.remove(nameWrapper);
+      // Save action in the local storage
+      localStorage.setItem(nameStorage, true);
     }
 
-    // Get position of the menu when the windows is resized
+    // Get position of the menu
     var getMenuPosition = function() {
       posMenu = elBanner.clientHeight;
     }
 
+    // Check if menu should be fixed
+    var isUnderBanner = function() {
+      return window.pageYOffset > posMenu;
+    }
+
     // This allow the mobile menu to scroll once the banner is not visible
     var fixMenuAfterBanner = function() {
-      if (window.pageYOffset > posMenu) {
+      if (isUnderBanner()) {
         if (!isMenuFixed) {
           // The menu will be fixed
           elBody.classList.add(nameFixMenu);

From fd6d3f24bf0b1a472c071f2863bb771ea7096815 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Fri, 15 Feb 2019 10:22:40 -0200
Subject: [PATCH 19/20] Final refactor and fix closing button

---
 .../vue/layout/partials/vuemastery_banner.ejs | 67 +++++++++++--------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index b4585ee7d7..384f71a89c 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -10,80 +10,89 @@
 
 <script>
   (function () {
-    var elBody = document.getElementsByTagName('body')[0];
-    var elBanner = document.getElementById('vm-banner');
-    var elClose = document.getElementById('vm-close');
-    var elMenu = document.getElementById('mobile-bar');
-    var nameWrapper = 'vuemastery-weekend-promo';
-    var nameFixMenu = 'vuemastery-menu-fixed';
-    var nameStorage = 'vuemastery-banner';
-    var isMenuFixed, posMenu;
+    // Get elements
+    var elBody = document.getElementsByTagName("body")[0];
+    var elBanner = document.getElementById("vm-banner");
+    var elClose = document.getElementById("vm-close");
+    var elMenu = document.getElementById("mobile-bar");
+
+    // Variable names
+    var nameWrapper = "vuemastery-weekend-promo";
+    var nameFixMenu = "vuemastery-menu-fixed";
+    var nameStorage = "vuemastery-banner";
+
+    // Defaults values
+    var isMenuFixed = false;
+    var posMenu = 80;
 
-    // Initialise banner after checking user preference
     var initBanner = function () {
+      // Add event listeners
+      toggleBannerEvents(true);
       // Add class to the body to push fixed elements
       elBody.classList.add(nameWrapper);
       // Display the banner
-      elBanner.style.display = 'block';
+      elBanner.style.display = "block";
+      // Init close button action
+      elClose.onclick = closeBanner;
       // Get the menu position
       getMenuPosition();
       // Check current page offset position
       isMenuFixed = isUnderBanner();
       // And position menu accordingly
-      if (isMenuFixed) elBody.classList.add('fixed');
+      if (isMenuFixed) {
+        elBody.classList.add("fixed");
+      }
     }
 
-    // Remove the banner once the user decide to close
     var closeBanner = function(e) {
       // Prevent bubbling event that redirect to vuemastery.com
       e.preventDefault();
       // Remove events
       toggleBannerEvents(false);
       // Hide the banner
-      elBanner.style.display = 'none';
+      elBanner.style.display = "none";
       // Remove class to the body that push fixed elements
       elBody.classList.remove(nameWrapper);
       // Save action in the local storage
       localStorage.setItem(nameStorage, true);
     }
 
-    // Get position of the menu
     var getMenuPosition = function() {
       posMenu = elBanner.clientHeight;
     }
 
-    // Check if menu should be fixed
     var isUnderBanner = function() {
       return window.pageYOffset > posMenu;
     }
 
-    // This allow the mobile menu to scroll once the banner is not visible
     var fixMenuAfterBanner = function() {
       if (isUnderBanner()) {
         if (!isMenuFixed) {
           // The menu will be fixed
-          elBody.classList.add(nameFixMenu);
-          isMenuFixed = true;
+          toggleFixedPosition(true);
         }
       } else if (isMenuFixed) {
         // The menu stay under the banner
-        elBody.classList.remove(nameFixMenu);
-        isMenuFixed = false;
+        toggleFixedPosition(false);
       }
     }
 
-    // Add or remove event listerners attached to the DOM
     var toggleBannerEvents = function (on) {
-      var method = on ? 'addEventListener' : 'removeEventListener';
-      window[method]('resize', getMenuPosition);
-      window[method]('scroll', fixMenuAfterBanner);
+      // Add or remove event listerners attached to the DOM
+      var method = on ? "addEventListener" : "removeEventListener";
+      window[method]("resize", getMenuPosition);
+      window[method]("scroll", fixMenuAfterBanner);
     }
 
-    // Check if user already removed the banner
-    if(!localStorage.getItem(nameStorage)) {
-      // Add event listeners
-      toggleBannerEvents(true);
-      // Load component
+    var toggleFixedPosition = function (on) {
+      // Switch between relative and fixed position
+      var method = on ? "add" : "remove";
+      elBody.classList[method](nameFixMenu);
+      isMenuFixed = on;
+    }
+
+    // Load component according to user preferences
+    if (!localStorage.getItem(nameStorage)) {
       initBanner();
     }
   })()

From 0e57cfb7fe7efaad184fac66584f119165a44f57 Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Wed, 4 Mar 2020 11:53:04 +0800
Subject: [PATCH 20/20] Add vue mastery new banner

---
 themes/vue/layout/partials/vuemastery_banner.ejs | 2 +-
 themes/vue/source/css/_vuemastery-banner.styl    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
index 384f71a89c..69afb3fceb 100644
--- a/themes/vue/layout/partials/vuemastery_banner.ejs
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -2,7 +2,7 @@
   <a href="https://www.vuemastery.com/free-weekend" target="_blank">
     <img class="vuemastery-banner--logo" src="/images/logo-vuemastery.svg" alt="vuemastery" />
     <div class="vuemastery-banner--wrapper">
-      <p>Free Vue Courses on Vue Mastery Feb 22 - Feb 24.<span>Sign up today to get access.</span></p>
+      <p>Free Vue Courses on Vue Mastery March 13 - March 15.<span>Sign up today to get access.</span></p>
     </div>
     <div id="vm-close" class="vuemastery-banner--close"></div>
   </a>
diff --git a/themes/vue/source/css/_vuemastery-banner.styl b/themes/vue/source/css/_vuemastery-banner.styl
index e330217d11..49494ca5d2 100644
--- a/themes/vue/source/css/_vuemastery-banner.styl
+++ b/themes/vue/source/css/_vuemastery-banner.styl
@@ -180,17 +180,18 @@
         width 15px
         height 2px
 
-@media screen and (max-width: 425px)
+@media screen and (max-width: 465px)
   .vuemastery-banner
     p
       max-width 185px
     span
       display none
 
-@media screen and (max-width 286px)
+@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