Merge branch 'skillshare'

src/components/Topbar.vue

@@ -1,6 +1,17 @@
 <template>
   <header class="header" v-once>
-    <Logo class="header__logo" width="130" height="30"/>
+    <div class="header__branding">
+      <Logo class="header__logo"/>
+      <a href="#" target="_blank" class="sponsor" @click="goToSkillshare()">
+        <Plus class="sponsor__add"/>
+        <Skillshare class="sponsor__logo"/>
+        <div class="sponsor__cta">
+          <p class="sponsor__byline">Get 2 months free</p>
+          <Arrow class="sponsor__arrow"/>
+        </div>
+      </a>
+    </div>
+
     <ul class="social header__social">
       <li>
         <a
@@ -25,20 +36,29 @@
 </template>
 
 <script>
+import Plus from '../assets/plus.svg';
+import Arrow from '../assets/arrow.svg';
 import Logo from '../assets/logo.svg';
 import Facebook from '../assets/facebook.svg';
 import Twitter from '../assets/twitter.svg';
 import Github from '../assets/github.svg';
+import Skillshare from '../assets/skillshare.svg';
 
 export default {
   name: 'topbar',
   components: {
+    Arrow,
+    Plus,
     Logo,
     Facebook,
     Twitter,
     Github,
+    Skillshare,
   },
   methods: {
+    goToSkillshare() {
+      this.$ga.event('sponsor', 'click', 'Skillshare');
+    },
     goToGithub() {
       this.$ga.event('social', 'click', 'github');
     },

src/stylesheets/app.scss

@@ -21,4 +21,62 @@
 @import 'modules/shortlist';
 @import 'modules/palette';
 @import 'modules/modal';
-@import 'modules/codeblock';
+@import 'modules/codeblock';
+
+
+.sponsor {
+  align-items: center;
+  text-decoration: none;
+  display: none;
+
+  @include respond-to(sponsor) {
+    display: flex;
+  }
+
+  &:hover {
+    .sponsor__cta {
+      transform: translate3d(3px,0,0)
+    }
+  }
+
+  &__add {
+    width: 14px;
+    height: 14px;
+    margin: 0 8px 0 8px;
+  }
+
+  &__logo {
+    width: 120px;
+    height: 15px;
+    fill: #48A4AB;
+  }
+
+  &__cta {
+    display: flex;
+    align-items: center;
+    transition: transform 0.3s ease-in-out;
+    will-change: transform;
+
+    background-color: #e2e2e2;
+    height: 24px;
+    border-radius: 50px;
+    padding: 0 2px;
+    margin-left: 10px;
+  }
+
+  &__byline {
+    font-size: 12px;
+    margin-left: 8px;
+    color: #656565;
+    text-decoration: none;
+  }
+
+  &__arrow {
+    transform: rotate(-90deg);
+    width: 21px;
+    height: 21px;
+    margin-left: -4px;
+    margin-top: 2px;
+    fill: #656565;
+  }
+}

src/stylesheets/base/_breakpoints.scss

@@ -3,7 +3,8 @@
  * @type map
  */
 $breakpoints: (
-  'small'  : 620px,
-  'medium' : 700px,
-  'large'  : 1096px
+  'small'    : 620px,
+  'medium'   : 700px,
+  'sponsor'  : 840px,
+  'large'    : 1096px
 );

src/stylesheets/modules/_header.scss

@@ -16,9 +16,15 @@
     justify-content: space-between;
   }
 
+  &__branding {
+    display: flex;
+    align-items: center;
+  }
+
   &__logo {
     width: 130px;
     height: 30px;
+    margin-top: -4px;
   }
 
   &__social {