From d07469220d6e88bf515f25963f4877d405312f1a Mon Sep 17 00:00:00 2001
From: Fienny Angelina <angelinaf@angelinaf-mac.local>
Date: Sat, 1 Sep 2018 10:36:47 +0800
Subject: [PATCH 1/3] Fix nav to take full width in the docs page

Fix #911
---
 lib/core/DocsLayout.js  |  4 ++--
 lib/static/css/main.css | 18 +++++++++++++++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
index d859e6b3532e..a7522c83e2f8 100644
--- a/lib/core/DocsLayout.js
+++ b/lib/core/DocsLayout.js
@@ -66,7 +66,7 @@ class DocsLayout extends React.Component {
         metadata={metadata}>
         <div className="docMainWrapper wrapper">
           <DocsSidebar metadata={metadata} />
-          <Container className="mainContainer">
+          <Container className="mainContainer docMainContainer">
             <DocComponent
               metadata={metadata}
               content={content}
@@ -116,7 +116,7 @@ class DocsLayout extends React.Component {
               )}
           </Container>
           {hasOnPageNav && (
-            <nav className="onPageNav">
+            <nav className="onPageNav docOnPageNav">
               <OnPageNav rawContent={content} />
             </nav>
           )}
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 322673ebd2af..c53678a1e211 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -712,6 +712,11 @@ blockquote {
   .mainContainer .wrapper .posts .post {
     width: 100%;
   }
+
+  .docMainContainer {
+    flex-basis: 920px !important;
+    flex-grow: 0 !important;
+  }
 }
 /* End of Main Container */
 
@@ -1489,7 +1494,8 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .docMainWrapper {
-    width: 100%;
+    max-width:100% !important ;
+    margin: 0;
   }
 
   .docMainWrapper > * {
@@ -1564,7 +1570,9 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .docsNavContainer {
-    flex: 0 0 240px;
+    flex: 1 0 240px;
+    display: flex;
+    justify-content: flex-end;
     height: calc(100vh - 50px);
     position: -webkit-sticky;
     position: sticky;
@@ -1607,7 +1615,7 @@ input::placeholder {
   }
 
   .separateOnPageNav .docsNavContainer {
-    flex: 0 0 240px;
+    flex: 1 0 240px;
   }
 }
 
@@ -1969,6 +1977,10 @@ input::placeholder {
       top: 90px;
     }
 
+    .docOnPageNav {
+      flex: 1 0 240px;
+    }
+
     .onPageNav > .toc-headings {
       border-left: 1px solid #e0e0e0;
       padding: 10px 0 2px 15px;

From bd66e65f65b08d6c16eb23aa93dee873c1a26920 Mon Sep 17 00:00:00 2001
From: Fienny Angelina <angelinaf@angelinaf-mac.local>
Date: Thu, 6 Sep 2018 13:25:42 +0800
Subject: [PATCH 2/3] Remove using important in css

---
 lib/static/css/main.css | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index c53678a1e211..0764a9b01f5e 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -712,11 +712,6 @@ blockquote {
   .mainContainer .wrapper .posts .post {
     width: 100%;
   }
-
-  .docMainContainer {
-    flex-basis: 920px !important;
-    flex-grow: 0 !important;
-  }
 }
 /* End of Main Container */
 
@@ -1992,6 +1987,14 @@ input::placeholder {
   }
 }
 
+
+@media only screen and (min-width: 1024px) {
+  .separateOnPageNav.sideNavVisible .navPusher .docMainContainer {
+    flex-basis: 920px;
+    flex-grow: 0;
+  }
+}
+
 /* Blog */
 .blog .wrapper {
   max-width: 1100px;

From ef884ae93721640cc63735ef3dcc16c399a74f2f Mon Sep 17 00:00:00 2001
From: Fienny Angelina <fifi.angelina@yahoo.com>
Date: Sat, 8 Sep 2018 12:38:32 +0800
Subject: [PATCH 3/3] Make Getting started flushed together with icon

---
 lib/static/css/main.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 0764a9b01f5e..0285279d35f7 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1955,6 +1955,11 @@ input::placeholder {
       width: auto;
     }
 
+    .docsNavContainer > :first-child {
+      width: 240px;
+      max-width: 240px;
+    }
+
     .separateOnPageNav.sideNavVisible .navPusher .mainContainer {
       flex: 1 auto;
       max-width: 100%;
@@ -1990,7 +1995,7 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .separateOnPageNav.sideNavVisible .navPusher .docMainContainer {
-    flex-basis: 920px;
+    flex-basis: 784px;
     flex-grow: 0;
   }
 }