Added join button to header

WWDCScholars · May 18, 2018 · 140af85 · 140af85
1 parent 8269497
commit 140af85
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/Frontend/src/app/App.vue b/Frontend/src/app/App.vue
@@ -12,6 +12,7 @@
       router-link(:to="{ name: 'store' }", :class="routeClass('store')").color-blue1: span Store
       //- router-link(:to="{ name: 'team' }", :class="routeClass('team')").color-red2: span Team
       //- a(href="#").color-green: span My Profile
+      a(href="https://join.wwdcscholars.com").btn: span Join
 
   router-view
 </template>

diff --git a/Frontend/src/assets/sass/3-modules/_header.sass b/Frontend/src/assets/sass/3-modules/_header.sass
@@ -72,6 +72,22 @@ header
         font-weight: 500
         font-size: 1.1em
 
+      &.btn
+        &.active, &:hover
+          border-bottom: 3px solid transparent
+
+          span
+            background-color: lighten($sch-purple, 8%)
+
+        span
+          display: inline-block
+          background-color: $sch-purple
+          color: $white
+          padding: 4px 18px
+          border-radius: 32px
+          margin-top: 12px
+          transition: background-color 200ms linear
+
   @media (max-width: 850px)
     h1
       font-size: 1.5em
@@ -107,3 +123,7 @@ header
 
         &.active
           border-bottom: 2px solid $sch-gray3
+
+        &.btn
+          span
+            margin-top: 0