vuejs · yyx990803 · Mar 22, 2021 · Mar 18, 2021
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
@@ -163,10 +163,11 @@
   })
 
   window.addEventListener('scroll', function () {
-    if (window.pageYOffset > 165 && !topScrolled) {
+    var offset = 20
+    if (window.pageYOffset > offset && !topScrolled) {
       topScrolled = true
       document.getElementById('mobile-bar').classList.remove('top')
-    } else if (window.pageYOffset <= 165 && topScrolled) {
+    } else if (window.pageYOffset <= offset && topScrolled) {
       topScrolled = false
       document.getElementById('mobile-bar').classList.add('top')
     }

diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -1,5 +1,6 @@
 <% var isIndex = page.path === 'index.html' %>
 <% var isThemes = page.path === 'resources/themes.html' %>
+<% var hasVueSchoolBanner = true %>
 
 <!DOCTYPE html>
 <html lang="en" class="with-v3-banner">
@@ -54,7 +55,7 @@
     <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
     <link href="https://maxcdn.bootstrapcdn.com" rel="preconnect" crossorigin>
 
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto|Roboto Mono&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Dosis:500&text=Vue.js&display=swap" rel="stylesheet">
 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@@ -90,6 +91,11 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
+
+    <% if (hasVueSchoolBanner) { %>
+      <%- partial('partials/vueschool_banner') %>
+    <% } %>
+
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>

diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs
@@ -0,0 +1,26 @@
+<a id="vs" class="vs-hidden" href="https://vueschool.io/free-weekend?friend=vuejs" target="_blank" rel="noreferrer">
+  <div class="vs-iso">
+    <img src="/images/banners/vs-iso.svg">
+  </div>
+  <div class="vs-logo">
+    <img src="/images/banners/vs-logo.svg">
+  </div>
+  <div class="vs-core">
+    <div class="vs-slogan">
+      <div class="vs-slogan-up">
+         VUE 3 MASTERCLASS - FREE WEEKEND
+      </div>
+      <div class="vs-slogan-down">
+        Register at <strong>vueschool.io/free-weekend</strong>
+      </div>
+    </div>
+    <div class="vs-button">
+      <div class="vs-button-inside">
+        <img src="/images/banners/free-access.svg" alt="Free Access">
+      </div>
+    </div>
+  </div>
+  <div id="vs-close" class="vs-close">
+    <img src="/images/banners/close.svg" alt="Close">
+  </div>
+</a>
diff --git 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,10 +13,12 @@ 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
+  display: flex
+  justify-content: space-between
+  box-sizing: border-box
 
 #v3-banner
   background-color: $green
@@ -40,18 +43,11 @@ body.docs
     position: fixed
     width: 100%
     top: 0
-  #nav
-    position: fixed
-    top: $heading-padding-vertical
 
 #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
@@ -147,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/_sidebar.styl b/themes/vue/source/css/_sidebar.styl
@@ -67,7 +67,7 @@
     position: fixed
     background-color: #f9f9f9
     height: 100%
-    top: 0
+    top: 40px
     left: 0
     box-shadow: 0 0 10px rgba(0,0,0,.2)
     transition: all .4s cubic-bezier(0.4, 0, 0, 1)

diff --git a/themes/vue/source/css/_vueschool.styl 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
diff --git 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
@@ -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
diff --git a/themes/vue/source/images/banners/free-access.svg b/themes/vue/source/images/banners/free-access.svg
diff --git a/themes/vue/source/images/banners/vs-iso.svg b/themes/vue/source/images/banners/vs-iso.svg