From 3a121a621fc22a2d98fe063aedce332a830d3d19 Mon Sep 17 00:00:00 2001
From: Jesus Rodriguez <Foxandxss@gmail.com>
Date: Tue, 6 Jun 2017 13:41:30 +0200
Subject: [PATCH] build(aio): migrate contribute page to html

---
 aio/content/marketing/contribute.html         | 34 +++++++++++++++++
 aio/content/marketing/contribute.md           | 37 -------------------
 .../styles/1-layouts/_marketing-layout.scss   |  6 +--
 aio/src/styles/2-modules/_contribute.scss     | 14 +++++++
 aio/src/styles/2-modules/_modules-dir.scss    |  1 +
 5 files changed, 52 insertions(+), 40 deletions(-)
 create mode 100644 aio/content/marketing/contribute.html
 delete mode 100644 aio/content/marketing/contribute.md
 create mode 100644 aio/src/styles/2-modules/_contribute.scss

diff --git a/aio/content/marketing/contribute.html b/aio/content/marketing/contribute.html
new file mode 100644
index 0000000000..f092806f22
--- /dev/null
+++ b/aio/content/marketing/contribute.html
@@ -0,0 +1,34 @@
+<header class="marketing-banner">
+  <div class="banner-headline no-toc">Contribute to Angular</div>
+</header>
+
+<article class="contribute-container">
+  <h2>Angular Projects</h2>
+
+  <p>We'd love for you to contribute to our source code and to make Angular projects even better.</p>
+
+  <div class="l-sub-section">
+    <h3>Angular</h3>
+
+    Angular is a next generation mobile and desktop application development platform.
+
+    <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular</a>
+  </div>
+
+  <div class="l-sub-section">
+    <h3>Angular Material</h3>
+
+    Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs).
+
+    <a href="https://github.com/angular/material2/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular Material</a>
+  </div>
+
+  <div class="l-sub-section">
+    <h3>AngularFire</h3>
+
+    AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers to build your Angular app.
+
+    <a href="https://github.com/angular/angularfire2" class="button" md-button> Contribute to AngularFire</a>
+  </div>
+
+</article>
diff --git a/aio/content/marketing/contribute.md b/aio/content/marketing/contribute.md
deleted file mode 100644
index c4bbd62054..0000000000
--- a/aio/content/marketing/contribute.md
+++ /dev/null
@@ -1,37 +0,0 @@
-<h1 class="no-toc">Contribute to Angular</h1>
-
-Help us build the framework of the future!
-
-## Angular Projects
-
-We'd love for you to contribute to our source code and to make Angular projects even better.
-
-~~~ {.l-sub-section}
-
-### Angular
-
-Angular is a next generation mobile and desktop application development platform.
-
-<a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular</a>
-
-~~~
-
-~~~ {.l-sub-section}
-
-### Angular Material
-
-Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs).
-
-<a href="https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md" class="button" md-button>Contribute to Angular Material</a>
-
-~~~
-
-~~~ {.l-sub-section}
-
-### AngularFire
-
-AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers to build your Angular app.
-
-<a href="https://github.com/firebase/angularFire" class="button" md-button> Contribute to AngularFire</a>
-
-~~~
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index 3e065aeff4..060f32f31d 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -263,7 +263,7 @@ button.hero-cta {
 }
 
 aio-shell {
-  &.page-resources, &.page-events {
+  &.page-resources, &.page-events, &.page-contribute {
     section {
       padding: 0rem 0rem 3rem;
     }
@@ -275,7 +275,7 @@ aio-shell {
     }
   }
 
-  &.page-home, &.page-resources, &.page-events {
+  &.page-home, &.page-resources, &.page-events, &.page-contribute {
     article {
       padding: 32px;
 
@@ -455,4 +455,4 @@ header.bckground-sky.l-relative {
       display: none;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/_contribute.scss b/aio/src/styles/2-modules/_contribute.scss
new file mode 100644
index 0000000000..642b9b8586
--- /dev/null
+++ b/aio/src/styles/2-modules/_contribute.scss
@@ -0,0 +1,14 @@
+.contribute-container {
+  h2 {
+    margin: 0;
+  }
+
+  .l-sub-section {
+    width: 90%;
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index fa1ad0b637..e75eeff395 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -10,6 +10,7 @@
    @import 'callout';
    @import 'card';
    @import 'code';
+   @import 'contribute';
    @import 'contributor';
    @import 'edit-page-cta';
    @import 'features';