Simple job link (#100)

_src/_assets/images/icon-suitcase.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="22" viewBox="0 0 25 22">
+  <g transform="translate(1 1)">
+    <path d="M23 7C23 5.35 21.65 4 20 4L3 4C1.35 4 0 5.35 0 7L0 17C0 18.65 1.35 20 3 20L20 20C21.65 20 23 18.65 23 17L23 7 23 7zM8 4L8 2C8 .9 8.9 0 10 0L13 0C14.1 0 15 .9 15 2L15 4M19 4L19 20M16 4L16 20M7 4L7 20M4 4L4 20"/>
+  </g>
+</svg>

_src/_assets/styles/bigchain/_menus.scss

@@ -62,9 +62,11 @@
     display: block;
     box-shadow: none;
     padding-top: $spacer;
+    vertical-align: middle;
 
     @media ($screen-md) {
         padding-top: 0;
+        display: inline-block;
     }
 
     svg {
@@ -72,6 +74,12 @@
         opacity: .8;
         margin-left: auto;
         margin-right: auto;
+
+        @media ($screen-md) {
+            display: inline-block;
+            margin-left: 0;
+            margin-right: 0;
+        }
     }
 
     &:hover,
@@ -82,6 +90,36 @@
     }
 }
 
+.menu__hiring {
+    color: lighten($brand-main-green, 15%);
+    box-shadow: none;
+    padding: $spacer ($spacer / 4);
+    display: inline-block;
+
+    @media ($screen-md) {
+        margin-left: $spacer;
+    }
+
+    &:hover,
+    &:focus {
+        background: transparent;
+        color: $link-hover-bg;
+
+        .icon {
+            stroke: $link-hover-bg;
+        }
+    }
+
+    .icon {
+        @extend .transition;
+        width: 1rem;
+        height: 1rem;
+        stroke: lighten($brand-main-green, 15%);
+        stroke-width: 1.5;
+        margin-bottom: -1px;
+    }
+}
+
 
 //
 // Main menu overlaying a dark background image

_src/_includes/menu-main.html

@@ -2,16 +2,20 @@
     <div class="row row--wide">
 
         <div class="grid grid--full grid-medium--columns grid--center">
-            <div class="grid__col grid__col--1">
+            <div class="grid__col grid__col--2">
                 <a class="menu__logo" href="/">
                     <svg class="logo logo--sm logo--white--green" aria-labelledby="title">
                         <title>Logo</title>
                         <use xlink:href="/assets/img/sprite.svg#logo"></use>
                     </svg>
                 </a>
+                <a class="menu__hiring" href="https://github.com/bigchaindb/org/blob/master/engjob.md" rel="external">
+                    <svg class="icon icon--suitcase"><use xlink:href="/assets/img/sprite.svg#icon-suitcase"></use></svg>
+                    We're hiring!
+                </a>
             </div>
 
-            <div class="grid__col grid__col--5">
+            <div class="grid__col grid__col--4">
 
                 <div class="menu-overflow">
                     {% for link in site.data.menus.main %}

package.json

@@ -14,13 +14,13 @@
     "build": "gulp build --production"
   },
   "dependencies": {
+    "is-in-viewport": "^2.3.0",
     "jquery": "^2.1.4",
     "normalize-css": ">=2.3.1",
     "normalize-opentype.css": ">=0.2.4",
     "parsleyjs": "^2.0.7",
     "svg4everybody": "^2.0.0",
-    "vivus": "^0.2.2",
-    "is-in-viewport": "^2.3.0"
+    "vivus": "^0.2.2"
   },
   "devDependencies": {
     "browser-sync": ">=2.10.0",