Increase text size, rename Tutorial, update nav...

Summary:
Several things here. See commits.
Closes https://github.com/facebook/react-native/pull/14757

Differential Revision: D5332034

Pulled By: hramos

fbshipit-source-id: 6ff9e33c0bc9d2ea3dd5b1a4752621ce7e83f9bb

docs/Tutorial.md

@@ -1,6 +1,6 @@
 ---
 id: tutorial
-title: Tutorial
+title: Learn the Basics
 layout: docs
 category: The Basics
 permalink: docs/tutorial.html

website/core/HeaderLinks.js

@@ -17,7 +17,6 @@ var HeaderLinks = React.createClass({
   linksInternal: [
     {section: 'docs', href: 'docs/getting-started.html', text: 'Docs', target: '.nav-docs'},
     {section: 'support', href: '/react-native/support.html', text: 'Help'},
-    {section: 'showcase', href: '/react-native/showcase.html', text: 'Showcase'},
     {section: 'blog', href: '/react-native/blog/', text: 'Blog'},
   ],
   linksExternal: [

website/core/Site.js

@@ -204,11 +204,11 @@ var Site = React.createClass({
                   <a href="docs/getting-started.html">
                     Getting Started
                   </a>
-                  <a href="docs/tutorial.html">Tutorial</a>
+                  <a href="docs/tutorial.html">Learn the Basics</a>
                   <a
-                    href="docs/integration-with-existing-apps.html"
+                    href="docs/components-and-apis.html"
                   >
-                    Integration With Existing Apps
+                    Components and APIs
                   </a>
                   <a href="docs/more-resources.html">
                     More Resources
@@ -221,13 +221,13 @@ var Site = React.createClass({
                     </a>
                   </h5>
                   <a href="/react-native/showcase.html">
-                    Showcase
+                    Who's using React Native?
                   </a>
                   <a
                     href="http://www.meetup.com/topics/react-native/"
                     target="_blank"
                   >
-                    Upcoming Events
+                    Meetups
                   </a>
                   <a
                     href="https://www.facebook.com/groups/react.native.community"
@@ -275,18 +275,31 @@ var Site = React.createClass({
                 <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>
+                  <a
+                    href="https://github.com/facebook/react-native"
+                    target="_blank"
+                  >
+                    GitHub
+                  </a>
+                  <div className="githubButton">
+                    <a
+                      className="github-button"
+                      href="https://github.com/facebook/react-native"
+                      data-icon="octicon-star"
+                      data-count-href="/facebook/react-native/stargazers"
+                      data-count-api="/repos/facebook/react-native#stargazers_count"
+                      data-count-aria-label="# stargazers on GitHub"
+                      aria-label="Star facebook/react-native on GitHub"
+                    >
+                      Star
+                    </a>
+                  </div>
                 </div>
               </section>
               <section className="newsletter">
@@ -405,6 +418,11 @@ var Site = React.createClass({
             type="text/javascript"
             src="https://snack.expo.io/embed.js"
           />
+          <script
+            async
+            defer
+            src="https://buttons.github.io/buttons.js"
+          />
         </body>
       </html>
     );

website/layout/BlogPostLayout.js

@@ -31,7 +31,6 @@ var BlogPostLayout = React.createClass({
         authorTwitter={this.props.metadata.authorTwitter}
         image={this.props.metadata.hero ? 'https://facebook.github.io' + this.props.metadata.hero : 'https://facebook.github.io/react-native/img/opengraph.png' }
         >
-        <Hero title="React Native Blog" subtitle="Stay up-to-date with the latest React Native news and events." />
         <section className="content wrap documentationContent">
           <BlogPost
             post={this.props.metadata}

website/layout/DocsLayout.js

@@ -48,8 +48,8 @@ var DocsLayout = React.createClass({
             {(metadata.banner === 'ejected') ? <EjectBanner/> : null}
             <Marked>{content}</Marked>
             <div className="docs-prevnext">
-              {metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
+              {metadata.previous && <a className="docs-prev btn" href={'docs/' + metadata.previous + '.html#content'}>&larr; Previous</a>}
-              {metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
+              {metadata.next && <a className="docs-next btn" href={'docs/' + metadata.next + '.html#content'}>Continue Reading &rarr;</a>}
             </div>
             <Footer path={'docs/' + metadata.filename} />
           </div>

website/showcase.json

@@ -73,7 +73,7 @@
     "icon": "http://is5.mzstatic.com/image/thumb/Purple111/v4/5f/e9/00/5fe90072-c9ce-87c3-bdfe-8611f9325f0e/source/175x175bb.jpg",
     "infoLink": "https://eng.uber.com/ubereats-react-native/",
     "infoTitle": "Powering UberEATS with React Native and Uber Engineering",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Baidu Mobile (手机百度)",
@@ -82,7 +82,7 @@
     "linkAppStore": "https://itunes.apple.com/us/app/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6-%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%B0%B1%E5%BE%97%E5%88%B0/id382201985?mt=8",
     "infoLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K",
     "infoTitle": "Baidu Mobile is a search engine used by over 600 million people in China",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Bloomberg",
@@ -91,7 +91,7 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en",
     "infoLink": "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/",
     "infoTitle": "How Bloomberg Used React Native to Develop its new Consumer App",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Vogue",
@@ -99,7 +99,7 @@
     "linkAppStore": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8",
     "infoLink": "http://www.vogue.com/app",
     "infoTitle": "",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "li.st",
@@ -107,7 +107,7 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=st.li.listapp",
     "infoLink": "https://www.youtube.com/watch?v=cI9bDvDEsYE",
     "infoTitle": "Building li.st for Android with React Native",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Discord",
@@ -115,7 +115,7 @@
     "linkAppStore": "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8",
     "infoLink": "https://blog.discordapp.com/using-react-native-one-year-later-91fd5e949933",
     "infoTitle": "Using React Native: One Year Later",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Gyroscope",
@@ -123,7 +123,7 @@
     "linkAppStore": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8",
     "infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253",
     "infoTitle": "Building a visualization experience with React Native",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Townske",
@@ -131,7 +131,7 @@
     "linkAppStore": "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8",
     "infoLink": "https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c",
     "infoTitle": "The experience of a web developer building an app using React Native",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "SoundCloud Pulse",

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

@@ -443,7 +443,7 @@ h1, h2, h3, h4 {
   line-height: 40px; }
 
 h1 {
-  font-size: 39px; }
+  font-size: 40px; }
 
 h2 {
   font-size: 31px; }
@@ -506,6 +506,9 @@ html * {
   color-profile: sRGB;
   rendering-intent: auto; }
 
+.content {
+  font-size: 18px;
+}
 .subHeader {
   font-size: 21px;
   font-weight: 300;
@@ -605,7 +608,9 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   text-decoration: none; }
 
 .nav-main .nav-site-wrapper {
-  display: inline; }
+  display: inline;
+  float: right;
+}
 
 .nav-main .nav-site-internal {
   margin: 0 0 0 20px; }
@@ -719,7 +724,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   padding-bottom: 0; }
   .nav-docs-section h3 {
     color: white;
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 400;
     line-height: 20px;
     margin-top: 0;
@@ -928,7 +933,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   margin-bottom: 60px; }
 
 .docs-nextprev {
-  *zoom: 1; }
+  *zoom: 1;
+}
 
 .docs-nextprev:before, .docs-nextprev:after {
   content: " ";
@@ -1002,7 +1008,7 @@ h2 {
 .docs-prevnext {
   min-width: 320px;
   max-width: 640px;
-  margin: 0 auto 40px;
+  margin: 40px auto;
   padding-bottom: 20px; }
 
 .button {
@@ -1534,7 +1540,7 @@ table.versions {
 
 .edit-page-block {
   padding: 5px;
-  margin-bottom: 40px;
+  margin: 40px auto;
   font-size: 12px;
   color: #887766;
   text-align: center;
@@ -1987,7 +1993,7 @@ article li {
   padding: 9px 18px;
   border-radius: 4px;
   text-align: center;
-  font-size: 12px; }
+}
 
 .btn a {
   text-decoration: none !important; }
@@ -2019,7 +2025,7 @@ article li {
 footer.nav-footer {
   box-sizing: border-box;
   border: none;
-  font-weight: 300;
+  font-weight: normal;
   color: #202020;
   font-size: 15px;
   line-height: 24px;
@@ -2085,7 +2091,8 @@ footer .sitemap h6,
 footer .sitemap h5 > a,
 footer .sitemap h6 > a {
   color: #05A5D1;
-  font-weight: 900; }
+  font-size: 15px;
+}
 
 footer .sitemap h5 > a,
 footer .sitemap h6 > a {

website/src/react-native/index.js

@@ -47,7 +47,7 @@ const index = React.createClass({
         <Hero title="React Native" subtitle="Learn once, write anywhere: Build mobile apps with React">
           <div className="buttons-unit">
             <a href="docs/getting-started.html" className="button">Get Started</a>
-            <a href="docs/tutorial.html" className="button">Take the Tutorial</a>
+            <a href="docs/tutorial.html" className="button">Learn the Basics</a>
           </div>
         </Hero>
 
@@ -117,7 +117,7 @@ class AwkwardScrollingImageWithText extends Component {
 
             <h2>Don't waste time recompiling</h2>
             <p>
-              React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
+              React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With <a href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Hot Reloading</a>, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
             </p>
             <br />
             <img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" />
@@ -160,9 +160,6 @@ class SomethingFast extends Component {
               Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!
             </p>
             <AppList apps={pinnedApps} />
-            <p className="footnote">
-              Some of these are hybrid native/React Native apps.
-            </p>
             <div className="buttons-unit">
               <a href="/react-native/showcase.html" className="button">More React Native apps</a>
             </div>

website/src/react-native/support.js

@@ -141,7 +141,7 @@ var support = React.createClass({
               >
                 open source
               </a>
-              ! If you want to contribute, take a look at the
+              ! If you want to contribute, read the <a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">contributor guidelines</a>, then take a look at the
               {' '}
               <a
                 href="https://github.com/facebook/react-native/wiki/Roadmap"