From 40eb353487fa5b13ef2a7043da42688427f73193 Mon Sep 17 00:00:00 2001
From: Martin Konicek <mkonicek@fb.com>
Date: Tue, 4 Apr 2017 12:36:05 -0700
Subject: [PATCH] Minor adjustments to the mobile site

Summary:
I noticed the mobile website did not look as great, specifically the hero and the showcase had some issues.

Before:

![screen shot 2017-04-04 at 11 08 41 am](https://cloud.githubusercontent.com/assets/165856/24671655/2fb45660-1927-11e7-8ee7-bf933f459550.png)
![screen shot 2017-04-04 at 11 08 48 am](https://cloud.githubusercontent.com/assets/165856/24671656/2fb44bc0-1927-11e7-9b2e-eb944e61d778.png)

After:
![screen shot 2017-04-04 at 11 08 54 am](https://cloud.githubusercontent.com/assets/165856/24671666/36de3942-1927-11e7-81ff-eeda74d8e748.png)
![screen shot 2017-04-04 at 11 08 59 am](https://cloud.githubusercontent.com/assets/165856/24671665/36d0be70-1927-11e7-9035-382a0a09b701.png)
Closes https://github.com/facebook/react-native/pull/13298

Differential Revision: D4828679

Pulled By: hramos

fbshipit-source-id: 478ab1c5eefa5292cb2f99a9a91e18d86b3e6192
---
 docs/GettingStarted.md                        |  1 +
 website/src/react-native/css/react-native.css | 30 +++++++++++++------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md
index ba8d1e380..c560dda63 100644
--- a/docs/GettingStarted.md
+++ b/docs/GettingStarted.md
@@ -47,6 +47,7 @@ one to start with, since the setup is a bit different.
   <span>Mobile OS:</span>
   <a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
   <a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
+  <br />
   <span>Development OS:</span>
   <a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
   <a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index 7ff24fb0a..e65b0ad02 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -1048,7 +1048,7 @@ h2 {
   display: table-cell; }
 
 p {
-  margin: 10px 0; }
+  margin: 16px 0; }
 
 .highlight {
   padding: 10px;
@@ -1668,6 +1668,14 @@ input#algolia-doc-search:focus {
   font-size: 24px;
   text-align: center; }
 
+@media only screen and (max-width: 680px) {
+  .hero .text {
+    font-size: 200%;
+    text-align: center; }
+  .hero .minitext {
+    font-size: 18px;
+    text-align: center; } }
+
 .buttons-unit {
   margin-top: 40px;
   text-align: center; }
@@ -1676,10 +1684,14 @@ input#algolia-doc-search:focus {
   color: #FA6900; }
 
 .buttons-unit .button {
-  font-size: 24px;
   background: #05A5D1;
   color: #fafafa; }
 
+@media screen and (min-width: 600px) {
+  .buttons-unit .button {
+    font-size: 24px; }
+}
+
 .buttons-unit .button:active {
   background: #0485A9; }
 
@@ -1712,15 +1724,11 @@ input#algolia-doc-search:focus {
 
 .showcase {
   margin: 30px auto 30px auto;
-  width: 100%;
+  width: 50%;
   display: inline-block;
   text-align: center;
   vertical-align: top; }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-  .showcase {
-    width: 50%; } }
-
 @media only screen and (min-device-width: 1024px) {
   .showcase {
     width: 25%; } }
@@ -1832,6 +1840,10 @@ input#algolia-doc-search:focus {
   display: block;
   text-align: left; }
 
+@media screen and (max-width: 768px) {
+  .entry-share {
+    display: none; } }
+
 .entry-excerpt {
   min-width: 320px;
   max-width: 640px;
@@ -1903,7 +1915,7 @@ article li {
 
 .posted-on {
   font-size: 12px;
-  color: rgba(102, 99, 122, 0.29);
+  color: #9d9b9b;
   margin-bottom: 0;
   margin-top: 15px; }
 
@@ -1918,7 +1930,7 @@ article li {
   color: #5A6B77; }
 
 .name-title .title {
-  color: rgba(102, 99, 122, 0.44); }
+  color: #9d9b9b; }
 
 .btn {
   background: 0 0;