Add footer

Summary:
Add footer to all pages in the website.

Preview:
![screencapture-localhost-8079-react-native-docs-network-html-1474655915887](https://cloud.githubusercontent.com/assets/165856/18797357/76a92e48-8182-11e6-8db7-74f241a9fa2c.png)
Closes https://github.com/facebook/react-native/pull/10075

Differential Revision: D3917827

Pulled By: lacker

fbshipit-source-id: f8a38feed616c4a05c29c9efef31d40ce93b5fd5

website/core/Site.js

@@ -128,8 +128,45 @@ var Site = React.createClass({
 
             {this.props.children}
 
-            <footer className="wrap">
-              <div className="center">© {currentYear} Facebook Inc.</div>
+            <footer>
+              <section className="sitemap">
+                <a href="/react-native" className="nav-home">
+                  <img src="img/header_logo.png" alt="React Native" width="66" height="58" />
+                </a>
+                <div>
+                  <h5><a href="docs/">Docs</a></h5>
+                  <a href="docs/getting-started.html">Getting Started</a>
+                  <a href="docs/tutorial.html">Tutorial</a>
+                  <a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a>
+                  <a href="docs/more-resources.html">More Resources</a>
+                </div>
+                <div>
+                <h5><a href="/react-native/support.html">Community</a></h5>
+                  <a href="/react-native/showcase.html">Showcase</a>
+                  <a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a>
+                  <a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a>
+                  <a href="https://twitter.com/reactnative" target="_blank">Twitter</a>
+                </div>
+                <div>
+                  <h5><a href="/react-native/support.html">Help</a></h5>
+                  <a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a>
+                  <a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a>
+                  <a href="/react-native/versions.html" target="_blank">Latest Releases</a>
+                  <a href="https://productpains.com/product/react-native/" target="_blank">Feature Requests</a>
+                </div>
+                <div>
+                  <h5>More</h5>
+                  <a href="/react-native/blog">Blog</a>
+                  <a href="https://github.com/facebook/react-native" target="_blank">GitHub</a>
+                  <a href="http://facebook.github.io/react/" target="_blank">React</a>
+                </div>
+              </section>
+              <a href="https://code.facebook.com/projects/" target="_blank" className="fbOpenSource">
+                <img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
+              </a>
+              <section className="copyright">
+                Copyright © {currentYear} Facebook Inc.
+              </section>
             </footer>
           </div>
 

website/src/react-native/css/react-native.css

@@ -792,6 +792,7 @@ section.black content {
 .documentationContent {
   *zoom: 1;
   padding-top: 20px;
+  padding-bottom: 80px;
 }
 
 .documentationContent:before, .documentationContent:after {
@@ -1848,3 +1849,92 @@ article li {
   padding: 16px 0;
   border-top: 1px solid #f1eff0;
 }
+
+/** Footer **/
+
+footer {
+  box-sizing: border-box;
+  border: none;
+  font-weight: 300;
+  color: #202020;
+  font-size: 15px;
+  line-height: 24px;
+  background: #2D2D2D;
+  box-shadow: inset 0 10px 10px -5px #0d1116;
+  padding-top: 2em;
+  padding-bottom: 2em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+footer .sitemap {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1080px;
+  margin: 0 auto 3em;
+}
+footer .sitemap div {
+  flex: 1;
+}
+footer .sitemap .nav-home {
+  display: table;
+  margin: -12px 20px 0 0;
+  padding: 10px;
+  width: 50px;
+  height: 50px;
+  opacity: 0.4;
+  transition: opacity 0.15s ease-in-out;
+}
+footer .sitemap .nav-home:hover,
+footer .sitemap .nav-home:focus {
+  opacity: 1.0;
+}
+@media screen and (max-width: 740px) {
+  footer .sitemap {
+    display: none;
+  }
+}
+
+footer .sitemap a {
+  color: white;
+  display: table;
+  margin: 2px -10px;
+  padding: 3px 10px;
+}
+footer .sitemap a:hover,
+footer .sitemap a:focus {
+  color: #05A5D1;
+  text-decoration: none;
+}
+footer .sitemap h5 > a:hover,
+footer .sitemap h5 > a:focus {
+  color: white;
+  text-decoration: none;
+}
+footer .sitemap h5,
+footer .sitemap h6 {
+  margin: 0 0 10px;
+}
+footer .sitemap h5,
+footer .sitemap h6,
+footer .sitemap h5 > a,
+footer .sitemap h6 > a {
+  color: #05A5D1;
+}
+footer .sitemap h5 > a,
+footer .sitemap h6 > a {
+  margin: 0 -10px;
+}
+footer .fbOpenSource {
+  display: block;
+  margin: 1em auto;
+  opacity: 0.4;
+  transition: opacity 0.15s ease-in-out;
+  width: 170px;
+}
+footer .fbOpenSource:hover {
+  opacity: 1.0;
+}
+footer .copyright {
+  color: rgba(255, 255, 255, 0.4);
+  text-align: center;
+}