Responsify

Reviewed By: danielbuechele

Differential Revision: D6998697

fbshipit-source-id: ea15f1b1ce3f518c194dc66169413a92e0d870bc

website/src/components/DocsSidebar.css

@@ -7,7 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
- .DocsSidebar {
+.DocsSidebar {
   height: 100%;
   width: 450px;
   padding: 36px;
@@ -24,3 +24,14 @@
   margin-top: 10px;
   margin-bottom: 5px;
 }
+
+@media only screen and (max-width: 1200px) {
+  .DocsSidebar {
+    width: 100%;
+    padding: 20px;
+    padding-top: 0px;
+    border: none;
+  }
+}
+
+

website/src/components/Padded.css

@@ -7,10 +7,16 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
- .Padded {
+.Padded {
   width: 100%;
   max-width: 1200px;
   padding: 0 50px;
   margin-left: auto;
   margin-right: auto;
 }
+
+@media only screen and (max-width: 576px) {
+  .Padded {
+    padding: 0 20px;
+  }
+}

website/src/components/Toolbar.css

@@ -42,3 +42,18 @@
 .Toolbar .ToolbarToggle i {
   margin-right: 5px;
 }
+
+@media only screen and (max-width: 576px) {
+  .Toolbar {
+    padding: 10px 5px;
+  }
+
+  .Toolbar a {
+    margin: 0 10px;
+    font-size: 12px;
+  }
+
+  .Toolbar .ToolbarToggle {
+    font-size: 12px;
+  }
+}

website/src/pages/docs/index.css

@@ -47,4 +47,29 @@
 .category a:hover {
   color: #6BCEBB;
   text-decoration: underline;
-}
+}
+
+@media only screen and (max-width: 576px) {
+  .docs-landing .heading {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  .docs-landing h1 {
+    font-size: 32px;
+    font-weight: 400;
+  }
+
+  .docs-landing p {
+    line-height: 160%;
+    font-size: 14px;
+  }
+
+  .category {
+    margin-bottom: 20px;
+  }
+
+  .category a {
+    line-height: 200%;
+  }
+}

website/src/pages/index.css

@@ -7,7 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
- .landing-page .hero {
+.landing-page .hero {
   padding-top: 100px;
   padding-bottom: 100px;
   display: flex;
@@ -145,6 +145,7 @@
   font-size: 14px;
   font-weight: 600;
   margin-top: 20px;
+  text-align: center;
 }
 
 footer {
@@ -164,3 +165,60 @@ footer a {
 footer a:hover {
   color: #6BCEBB;
 }
+
+@media only screen and (max-width: 576px) {
+   .landing-page .hero {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  .landing-page .hero h3 {
+    font-size: 14px;
+  }
+
+  .landing-page .hero h1 {
+    font-size: 32px;
+    font-weight: 400;
+  }
+
+  .landing-page .hero p {
+    line-height: 160%;
+    font-size: 14px;
+  }
+
+  .landing-page .about-section {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+
+  .landing-page .about-section h1 {
+    font-size: 24px;
+    line-height: 120%;
+  }
+
+  .landing-page .about-section h3 {
+    font-size: 14px;
+    margin-top: 20px;
+  }
+
+  .landing-page .about-section p {
+    line-height: 160%;
+    font-size: 14px;
+  }
+
+  .landing-page .logo-group .logo {
+    width: 33%;
+    padding: 20px;
+    margin-right: 0px;
+  }
+
+  .landing-page .logo-group img {
+    height: auto;
+    width: 100%;
+  }
+
+  .landing-page .logo-group .logo h3 {
+    font-size: 10px;
+    margin-top: 10px;
+  }
+}

website/src/templates/index.css

@@ -77,4 +77,66 @@
   border-radius: 3px;
   padding-left: 3px;
   padding-right: 3px;
-}
+}
+
+@media only screen and (max-width: 1200px) {
+  .playground .Playground {
+    display: none;
+  }
+
+  .playground controls {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 576px) {
+  .no-playground .markdown {
+    padding-top: 15px;
+  }
+
+  .doc-block .markdown {
+    padding-bottom: 10px;
+  }
+
+  .doc-block .overview {
+    font-size: 12px;
+    font-weight: 600;
+    padding-bottom: 10px;
+  }
+
+  .doc-block h1 {
+    font-size: 32px;
+    font-weight: 400;
+  }
+
+  .doc-block h2 {
+    font-size: 24px;
+    margin-top: 20px;
+  }
+
+  .doc-block h3 {
+    font-size: 16px;
+  }
+
+  .doc-block p {
+    line-height: 160%;
+    font-size: 14px;
+  }
+
+  .doc-block li {
+    font-size: 14px;
+    margin-bottom: 5px;
+  }
+
+  .doc-block .prop {
+    margin-bottom: 10px;
+  }
+
+  .doc-block pre {
+    padding: 5px !important;
+  }
+
+  .doc-block code {
+    font-size: 12px;
+  }
+}