Add Projects and Incubate header links (#48)

* Add links to header and replace some with images

* Build

* Update header links and images on other pages

dist/css/main.css

@@ -276,7 +276,16 @@ a.logo {
   display: flex;
   -ms-flex-align: center;
   align-items: center;
-  padding: 10px 15px 15px; }
+  padding: 10px 15px 0 15px; }
+
+.nav .nav__item-wrapper .nav__sub-menu {
+  opacity: 0;
+  transition: opacity .25s ease-in-out; }
+  .nav .nav__item-wrapper .nav__sub-menu .nav__sub-menu-item {
+    padding-top: 0; }
+
+.nav .nav__item-wrapper:hover .nav__sub-menu {
+  opacity: 1; }
 
 .header .nav a {
   color: white; }
@@ -346,8 +355,8 @@ a.logo {
   background-image: url(../img/new-site/u38.jpg); }
 
 .shares {
-  width: 260px;
-  height: 50px; }
+  height: 50px;
+  padding-left: 15px; }
 
 .social-links {
   display: -ms-flexbox;
@@ -399,6 +408,10 @@ li.social-link a {
   background-color: #FF4501;
   background-image: url(../img/new-site/icon_rd.svg); }
 
+.social-link.social-link--md a {
+  background-color: #12100E;
+  background-image: url(../img/new-site/icon_md.svg); }
+
 .social-link:hover a {
   -ms-transform: scale(1.06);
   transform: scale(1.06); }
@@ -456,6 +469,10 @@ li.social-link a {
   .header .social-link.social-link--fb {
     display: none; } }
 
+@media (max-width: 550px) {
+  .header .social-link.social-link--tw {
+    display: none; } }
+
 .the-iphone {
   position: relative;
   width: 292px;

dist/img/new-site/icon_md.svg

@@ -0,0 +1 @@
+<svg width="195" height="195" viewBox="0 0 195 195" xmlns="http://www.w3.org/2000/svg"><title>Monogram</title><g fill-rule="nonzero" fill="none"><path fill="#12100E" d="M0 0h195v195H0z"/><path d="M46.534 65.216a5.074 5.074 0 0 0-1.651-4.28L32.65 46.2V44h37.98l29.355 64.381L125.795 44H162v2.201l-10.458 10.027a3.057 3.057 0 0 0-1.162 2.935v73.674a3.057 3.057 0 0 0 1.162 2.935l10.213 10.027V148h-51.372v-2.201l10.58-10.272c1.04-1.04 1.04-1.345 1.04-2.934V73.042l-29.417 74.713H88.61L54.362 73.042v50.074a6.908 6.908 0 0 0 1.896 5.747l13.76 16.691v2.201H31v-2.2l13.76-16.692a6.663 6.663 0 0 0 1.774-5.747v-57.9z" fill="#FFF"/></g></svg>

es.html

@@ -35,17 +35,25 @@
                     </div>
                   </a>
                   <div class="nav">
-                    <a class="nav__item nav__item--blog" target="_blank" href="https://medium.com/status-es">Blog</a>
                     <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                    <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                     <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                     <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                    <div class="nav__item-wrapper" >
+                      <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                      <ul class="nav__sub-menu">
+                        <li class="nav__sub-menu-item-wrapper">
+                          <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                        </li>
+                      </ul>
+                    </div>
                   </div>
                   <div class="shares">
                     <ul class="social-links">
                       <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                       <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                       <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                      <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                      <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                     </ul>
                   </div>
                 </div>

fr.html

@@ -41,11 +41,17 @@
                   </a>
 
                   <div class="nav">
-                    <a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
                     <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                    <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                     <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                     <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                    <div class="nav__item-wrapper" >
+                      <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                      <ul class="nav__sub-menu">
+                        <li class="nav__sub-menu-item-wrapper">
+                          <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                        </li>
+                      </ul>
+                    </div>
                   </div>
 
                   <div class="shares">
@@ -53,6 +59,8 @@
                       <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                       <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                       <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                      <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                      <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                     </ul>
                   </div>
                 </div>

index.html

@@ -41,11 +41,17 @@
                     </a>
 
                     <div class="nav">
-                      <a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
                       <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                      <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                       <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                       <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                      <div class="nav__item-wrapper" >
+                        <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                        <ul class="nav__sub-menu">
+                          <li class="nav__sub-menu-item-wrapper">
+                            <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
 
                     <div class="shares">
@@ -53,6 +59,8 @@
                         <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                        <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                        <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                       </ul>
                   </div>
                 </div>

jobs.html

@@ -39,11 +39,17 @@
                     </a>
 
                     <div class="nav">
-                      <a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
                       <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                      <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                       <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                       <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                      <div class="nav__item-wrapper" >
+                        <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                        <ul class="nav__sub-menu">
+                          <li class="nav__sub-menu-item-wrapper">
+                            <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
 
                     <div class="shares">
@@ -51,6 +57,8 @@
                         <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                        <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                        <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                       </ul>
                   </div>
                 </div>

join-riot.html

@@ -38,11 +38,17 @@
                     </a>
 
                     <div class="nav">
-                      <a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
                       <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                      <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                       <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                       <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                      <div class="nav__item-wrapper" >
+                        <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                        <ul class="nav__sub-menu">
+                          <li class="nav__sub-menu-item-wrapper">
+                            <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
 
                     <div class="shares">
@@ -50,6 +56,8 @@
                         <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                        <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                        <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                       </ul>
                   </div>
                 </div>

ko.html

@@ -40,11 +40,17 @@
                   </a>
 
                   <div class="nav">
-                    <a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
                     <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                    <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                     <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                     <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                    <div class="nav__item-wrapper" >
+                      <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                      <ul class="nav__sub-menu">
+                        <li class="nav__sub-menu-item-wrapper">
+                          <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                        </li>
+                      </ul>
+                    </div>
                   </div>
 
                   <div class="shares">
@@ -52,6 +58,8 @@
                       <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                       <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                       <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                      <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                      <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                     </ul>
                   </div>
                 </div>

lgpl.html

@@ -38,11 +38,17 @@
                     </a>
 
                     <div class="nav">
-                      <a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
                       <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                      <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                       <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                       <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                      <div class="nav__item-wrapper" >
+                        <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                        <ul class="nav__sub-menu">
+                          <li class="nav__sub-menu-item-wrapper">
+                            <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
 
                     <div class="shares">
@@ -50,6 +56,8 @@
                         <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                        <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                        <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                       </ul>
                   </div>
                 </div>

open-positions.html

@@ -36,17 +36,25 @@
                 </div>
               </a>
               <div class="nav">
-                <a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
                 <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                 <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                 <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                <div class="nav__item-wrapper" >
+                  <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                  <ul class="nav__sub-menu">
+                    <li class="nav__sub-menu-item-wrapper">
+                      <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                    </li>
+                  </ul>
+                </div>
               </div>
               <div class="shares">
                 <ul class="social-links">
                   <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                   <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                   <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                  <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                  <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                 </ul>
               </div>
             </div>

privacy-policy.html

@@ -38,11 +38,17 @@
                     </a>
 
                     <div class="nav">
-                      <a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
                       <a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
-                      <a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
                       <a class="nav__item" target="_blank" href="https://hardwallet.status.im/">Hardwallet</a>
                       <a class="nav__item" target="_blank" href="https://openbounty.status.im/">Open Bounty</a>
+                      <div class="nav__item-wrapper" >
+                        <a class="nav__item" target="_blank" href="https://status.im/projects">Projects</a>
+                        <ul class="nav__sub-menu">
+                          <li class="nav__sub-menu-item-wrapper">
+                            <a class="nav__item nav__sub-menu-item" target="_blank" href="https://status.im/incubate">Incubator</a>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
 
                     <div class="shares">
@@ -50,6 +56,8 @@
                         <li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
                         <li class="social-link social-link--ri"><a href="https://chat.status.im/#/register" target="_blank"></a></li>
+                        <li class="social-link social-link--gh"><a href="https://github.com/status-im" target="_blank"></a></li>
+                        <li class="social-link social-link--md"><a href="https://blog.status.im/" target="_blank"></a></li>
                       </ul>
                   </div>
                 </div>

src/img/new-site/icon_md.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="195px" height="195px" viewBox="0 0 195 195" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Monogram</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Monogram" fill-rule="nonzero">
+            <rect id="Rectangle-path" fill="#12100E" x="0" y="0" width="195" height="195"></rect>
+            <path d="M46.5340803,65.2157554 C46.6968378,63.6076572 46.0836,62.018231 44.8828198,60.93592 L32.6512605,46.2010582 L32.6512605,44 L70.6302521,44 L99.9859944,108.380952 L125.794585,44 L162,44 L162,46.2010582 L151.542017,56.2281011 C150.640424,56.9153477 150.193188,58.0448862 150.380019,59.1628454 L150.380019,132.837155 C150.193188,133.955114 150.640424,135.084652 151.542017,135.771899 L161.755369,145.798942 L161.755369,148 L110.38282,148 L110.38282,145.798942 L120.963119,135.527337 C122.002801,134.487948 122.002801,134.182246 122.002801,132.592593 L122.002801,73.0417402 L92.585901,147.755438 L88.6106443,147.755438 L54.3622782,73.0417402 L54.3622782,123.115814 C54.0767278,125.221069 54.7759199,127.3406 56.2581699,128.863022 L70.0186741,145.55438 L70.0186741,147.755438 L31,147.755438 L31,145.55438 L44.7605042,128.863022 C46.2319621,127.338076 46.8903838,125.204485 46.5340803,123.115814 L46.5340803,65.2157554 Z" id="Shape" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>

src/scss/header.scss

@@ -74,7 +74,22 @@ a.logo {
   font-size: 15px;
   display: flex;
   align-items: center;
-  padding: 10px 15px 15px;
+  padding: 10px 15px 0 15px;
+}
+
+.nav .nav__item-wrapper {
+  .nav__sub-menu {
+    opacity: 0;
+    transition: opacity .25s ease-in-out;
+
+    .nav__sub-menu-item {
+      padding-top: 0;
+    }
+  }
+
+  &:hover .nav__sub-menu {
+    opacity: 1;
+  }
 }
 
 .header .nav a {
@@ -159,8 +174,8 @@ a.logo {
 
 
 .shares {
-  width: 260px;
   height: 50px;
+  padding-left: 15px;
 }
 
 .social-links {
@@ -220,6 +235,11 @@ li.social-link a {
   background-image: url(../img/new-site/icon_rd.svg);
 }
 
+.social-link.social-link--md a {
+  background-color: #12100E;
+  background-image: url(../img/new-site/icon_md.svg);
+}
+
 .social-link:hover a {
   transform: scale(1.06)
 }
@@ -305,3 +325,9 @@ li.social-link a {
     display: none;
   }
 }
+
+@media (max-width: 550px) {
+  .header .social-link.social-link--tw {
+    display: none;
+  }
+}