status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Martin Konicek 2017-04-04 12:36:05 -07:00 committed by Facebook Github Bot
parent 77c19ccf73
commit 40eb353487
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/GettingStarted.md
View File

@ -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>

30
website/src/react-native/css/react-native.css
View File

@ -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;