Switch contribute for blog and add OC CTA

phated · phated · commit 1ec17c91c65e · 2018-12-06T15:26:32.000-07:00
diff --git a/website/i18n/en.json b/website/i18n/en.json
@@ -102,7 +102,7 @@
       "API": "API",
       "Plugins": "Plugins",
       "Twitter": "Twitter",
-      "Contribute": "Contribute"
+      "Blog": "Blog"
     },
     "categories": {
       "Getting Started": "Getting Started",
diff --git a/website/siteConfig.js b/website/siteConfig.js
@@ -9,12 +9,12 @@ const siteConfig = {
   organizationName: 'gulpjs',
   projectName: 'gulpjs.github.io',
   headerLinks: [
-    {doc: 'getting-started/quick-start', label: 'Getting Started'},
-    {doc: 'api/concepts', label: 'API'},
-    {href: 'https://gulpjs.com/plugins', label: 'Plugins'},
-    {href: 'https://twitter.com/gulpjs', label: 'Twitter'},
-    {href: 'https://github.com/gulpjs/gulp/blob/master/CONTRIBUTING.md', label: 'Contribute'},
-    {search: true},
+    { doc: 'getting-started/quick-start', label: 'Getting Started' },
+    { doc: 'api/concepts', label: 'API' },
+    { href: 'https://gulpjs.com/plugins', label: 'Plugins' },
+    { href: 'https://twitter.com/gulpjs', label: 'Twitter' },
+    { href: 'https://medium.com/gulpjs', label: 'Blog' },
+    { search: true },
   ],
   headerIcon: 'img/gulp.svg',
   footerIcon: 'img/gulp.svg',
diff --git a/website/static/css/homepage.css b/website/static/css/homepage.css
@@ -299,10 +299,10 @@ p.paragraph {
   overflow: hidden;
 }
 .header .heading {
-  margin: 120px 0 0 0;
+  margin: 40px 0 0 0;
 }
 .header .centerdevices {
-  margin: 60px 0 60px;
+  margin: 40px 0 60px;
 }
 @media (max-width: 900px) {
   .header .heading {
@@ -632,6 +632,7 @@ p.paragraph {
   100% {transform: translate(27px, -50%); opacity: 0;}
 }
 
+
 .tidelift-cta {
   /* From ctas-button */
   display: inline-block;
@@ -649,7 +650,7 @@ p.paragraph {
   line-height: 18px;
   padding: 6px 8px;
   width: 100%;
-  max-width: 411px;
+  max-width: 362px;
   text-align: center;
 }
 .tidelift-logo {
@@ -659,8 +660,38 @@ p.paragraph {
   margin-right: 5px;
   height: 14px;
 }
+.opencollective-cta {
+  /* From ctas-button */
+  display: inline-block;
+  border-radius: 3px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .3px;
+  text-decoration: none;
+  /* Custom for Open Collective */
+  background: #fff;
+  color: rgb(51, 133, 255);
+  border-color: #fff;
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  padding: 6px 8px;
+  width: 100%;
+  max-width: 362px;
+  text-align: center;
+  margin-top: 6px;
+}
+.opencollective-logo {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  margin-right: 5px;
+  height: 18px;
+}
+
 @media (max-width: 350px) {
-  .tidelift-cta {
+  .tidelift-cta,
+  .opencollective-cta {
     font-size: 11px;
   }
 }
diff --git a/website/static/img/opencollective.svg b/website/static/img/opencollective.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" transform="translate(0.000000, -1.000000)">
+            <g id="::-icon">
+                <path d="M32.7788917,20.921123 C32.7788917,23.4441232 32.0461424,25.8619985 30.7900009,27.8593737 L35.9192454,33.0104992 C38.4315285,29.6464989 40.0017054,25.4414984 40.0017054,20.921123 C40.0017054,16.4007475 38.4315285,12.1957471 35.9192454,8.83174675 L30.7900009,13.9828723 C32.0461424,15.9802475 32.7788917,18.2929977 32.7788917,20.921123 L32.7788917,20.921123 Z" id="Shape" fill="#B8D3F4"></path>
+                <path d="M20.0135858,33.7463743 C13.000129,33.7463743 7.2428137,27.9644987 7.2428137,20.921123 C7.2428137,13.8777473 13.000129,8.09587168 20.0135858,8.09587168 C22.6305473,8.09587168 24.9334734,8.83174675 26.9223641,10.1983719 L32.0516087,5.04724637 C28.7018979,2.52424611 24.5147596,0.947370956 20.0135858,0.947370956 C9.02234752,0.947370956 0.0199999809,9.88299686 0.0199999809,21.026248 C0.0199999809,32.1694991 9.02234752,41 20.0135858,41 C24.619438,41 28.8065764,39.4231248 32.1562871,36.9001246 L27.0270426,31.7489991 C25.0381519,33.0104992 22.6305473,33.7463743 20.0135858,33.7463743 L20.0135858,33.7463743 Z" id="Shape" fill="#3385FF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/website/static/index.html b/website/static/index.html
@@ -31,7 +31,7 @@
           <a class="nav-link" href="/docs/en/api/concepts">API</a>
           <a class="nav-link" href="https://gulpjs.com/plugins">Plugins</a>
           <a class="nav-link" href="https://twitter.com/gulpjs">Twitter</a>
-          <a class="nav-link" href="https://github.com/gulpjs/gulp/blob/master/CONTRIBUTING.md">Contribute</a>
+          <a class="nav-link" href="https://medium.com/gulpjs">Blog</a>
         </nav>
       </div>
     </div>
@@ -43,6 +43,14 @@
         </a>
       </div>
     </div>
+    <div class="container-lrg">
+      <div class="col-12 mobile-col-12 right">
+        <a class="ctas-button opencollective-cta" href="https://opencollective.com/gulpjs">
+          <img class="opencollective-logo" src="img/opencollective.svg" alt="Open Collective logo" />
+          <span>Back us on Open Collective</span>
+        </a>
+      </div>
+    </div>
 
     <div class="container-lrg">
       <div class="col-12">
