Updated docs for 0.27

css/react-native.css

@@ -481,6 +481,92 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   border-bottom: 0;
 }
 
+@media screen and (max-device-width: 960px) {
+  .nav-docs {
+    position: fixed;
+    z-index: 90;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 53px 0 0 0;
+    background: #3B3738;
+    /* Transition these properties */
+    transition: opacity 0.3s, visibility 0.3s;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .nav-docs-viewport {
+    border-top: 1px solid rgb(5, 165, 209);
+    height: 100%;
+    padding: 25px;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+    top: -30px;
+    position: relative;
+    transition: top 0.3s;
+  }
+
+  /* Active state */
+  .nav-docs.in {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .nav-docs.in .nav-docs-viewport {
+    top: 0;
+  }
+
+  .nav-docs * {
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .nav-docs-section + .nav-docs-section {
+    margin-top: 50px;
+  }
+
+  .nav-docs-section li {
+    margin: 5px 0;
+  }
+
+  .nav-docs-section h3,
+  .nav-docs-section a {
+    color: white;
+  }
+
+  .nav-docs-section h3 {
+    border-bottom: 1px solid white;
+    margin-bottom: 10px;
+    opacity: 0.3;
+  }
+
+  .nav-docs-section a {
+    margin-right: 25px;
+    font-size: 120%;
+    padding: 5px 0;
+  }
+
+  .nav-docs-section a.active {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    color: rgb(5, 165, 209);
+  }
+}
+
+@media screen and (min-device-width: 641px) and (max-device-width: 1024px) {
+  .nav-docs-section ul {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  /* Display 2 columns on tablet */
+  .nav-docs-section li {
+    width: 50%;
+  }
+}
+
 .nav-blog li {
   margin-bottom: 5px;
 }
@@ -670,7 +756,7 @@ h2 {
 .documentationContent blockquote {
   padding: 15px 30px 15px 15px;
   margin: 20px 0;
-  background-color: rgba(204, 122, 111, 0.1);
+  background-color: rgba(248, 245, 236, 0.1);
   border-left: 5px solid rgba(191, 87, 73, 0.2);
 }
 
@@ -999,13 +1085,13 @@ small code, li code, p code {
   outline: none;
 }
 
-@media screen and (max-width: 960px) {
-  .nav-main {
-    position: static;
+@media screen and (max-width: 680px) {
+  .container {
+    padding-top: 100px;
   }
 
-  .container {
-    padding-top: 0;
+  .nav-docs {
+    padding-top: 103px;
   }
 }
 
@@ -1345,15 +1431,6 @@ div[data-twttr-id] iframe {
     border: none;
     padding: 0;
   }
-  .nav-docs h3 {
-    margin: 0;
-  }
-  .nav-docs {
-    float: none;
-    width: auto;
-    margin-top: -8px;
-    margin-bottom: 20px;
-  }
   h1 {
     font-size: 30px;
     line-height: 30px;