From 39d84fe59bfa860e3366189226a2d9ec6e5fec7b Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 10 Jun 2018 16:40:20 -0700
Subject: [PATCH 1/8] Improve CSS code

---
 docs/api-doc-markdown.md         |    6 +-
 examples/basics/pages/en/help.js |    2 +-
 lib/core/BlogPost.js             |    2 +-
 lib/core/Doc.js                  |    4 +-
 lib/core/nav/SideNav.js          |   17 +-
 lib/static/css/main.css          | 1495 +++++++++++++++++++-----------
 website/core/Footer.js           |   41 +-
 website/pages/en/help.js         |   38 +-
 website/pages/en/index.js        |  220 +++--
 website/pages/en/users.js        |    2 +-
 10 files changed, 1113 insertions(+), 714 deletions(-)

diff --git a/docs/api-doc-markdown.md b/docs/api-doc-markdown.md
index 3c2d0920e8a2..c0087f84dea0 100644
--- a/docs/api-doc-markdown.md
+++ b/docs/api-doc-markdown.md
@@ -3,6 +3,8 @@ id: doc-markdown
 title: Markdown Features
 ---
 
+Find out more about Docusaurus-specific fields when writing Markdown.
+
 ## Markdown Headers
 
 ### Documents
@@ -124,8 +126,8 @@ Text describing my function
 will lead to a table of contents of the functions:
 
 ```md
-* `docusaurus.function(a, b)`
-* `docdoc(file)`
+- `docusaurus.function(a, b)`
+- `docdoc(file)`
 ```
 
 and each function will link to their corresponding sections in the page.
diff --git a/examples/basics/pages/en/help.js b/examples/basics/pages/en/help.js
index baff8e747e56..6434d7793716 100755
--- a/examples/basics/pages/en/help.js
+++ b/examples/basics/pages/en/help.js
@@ -43,7 +43,7 @@ class Help extends React.Component {
         <Container className="mainContainer documentContainer postContainer">
           <div className="post">
             <header className="postHeader">
-              <h2>Need help?</h2>
+              <h1>Need help?</h1>
             </header>
             <p>This project is maintained by a dedicated group of people.</p>
             <GridBlock contents={supportLinks} layout="threeColumn" />
diff --git a/lib/core/BlogPost.js b/lib/core/BlogPost.js
index 19126dcb94b0..0bec4ae973ee 100644
--- a/lib/core/BlogPost.js
+++ b/lib/core/BlogPost.js
@@ -77,7 +77,7 @@ class BlogPost extends React.Component {
   renderTitle() {
     const post = this.props.post;
     return (
-      <h1>
+      <h1 className="postHeaderTitle">
         <a
           href={
             this.props.config.baseUrl +
diff --git a/lib/core/Doc.js b/lib/core/Doc.js
index 95aebe34f207..941078f88cd4 100644
--- a/lib/core/Doc.js
+++ b/lib/core/Doc.js
@@ -65,7 +65,9 @@ class Doc extends React.Component {
       <div className="post">
         <header className="postHeader">
           {editLink}
-          {!this.props.hideTitle && <h1>{this.props.title}</h1>}
+          {!this.props.hideTitle && (
+            <h1 className="postHeaderTitle">{this.props.title}</h1>
+          )}
         </header>
         <article>
           <MarkdownBlock>{this.props.content}</MarkdownBlock>
diff --git a/lib/core/nav/SideNav.js b/lib/core/nav/SideNav.js
index d00de0d09d98..a915ed86d0e8 100644
--- a/lib/core/nav/SideNav.js
+++ b/lib/core/nav/SideNav.js
@@ -70,14 +70,18 @@ class SideNav extends React.Component {
       </nav>
     );
   }
+
   renderCategory(category) {
     return (
-      <div className="navGroup navGroupActive" key={category.name}>
-        <h3>{this.getLocalizedCategoryString(category.name)}</h3>
+      <div className="navGroup" key={category.name}>
+        <h3 className="navGroupCategoryTitle">
+          {this.getLocalizedCategoryString(category.name)}
+        </h3>
         <ul>{category.links.map(this.renderItemLink, this)}</ul>
       </div>
     );
   }
+
   // return appropriately translated category string
   getLocalizedCategoryString(category) {
     let categoryString = translation[this.props.language]
@@ -86,6 +90,7 @@ class SideNav extends React.Component {
       : category;
     return categoryString;
   }
+
   // return appropriately translated label to use for doc/blog in sidebar
   getLocalizedString(metadata) {
     let localizedString;
@@ -123,23 +128,23 @@ class SideNav extends React.Component {
     }
     return null;
   }
+
   renderItemLink(link) {
     const itemClasses = classNames('navListItem', {
       navListItemActive: link.id === this.props.current.id,
     });
-    const linkClasses = classNames('navItem', {
-      navItemActive: link.id === this.props.current.id,
-    });
     return (
       <li className={itemClasses} key={link.id}>
-        <a className={linkClasses} href={this.getLink(link)}>
+        <a className="navItem" href={this.getLink(link)}>
           {this.getLocalizedString(link)}
         </a>
       </li>
     );
   }
 }
+
 SideNav.defaultProps = {
   contents: [],
 };
+
 module.exports = SideNav;
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 9c6c65a85c1e..627370f360a5 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -6,85 +6,398 @@
  */
 
 /* Reset */
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   border: 0;
-  font-size: 100%;
   font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
   vertical-align: baseline;
 }
 
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
+/* Base scaffolding taken from Markswatch theme */
 body {
-  line-height: 1;
+  color: #24292e;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-size: 16px;
+  line-height: 1.5;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-wrap: break-word;
 }
-ol, ul {
-  list-style: none;
+
+* {
+  box-sizing: border-box;
 }
-blockquote, q {
-  quotes: none;
+
+strong {
+  font-weight: 600;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
+
+[type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+a {
+  color: $primaryColor;
+  text-decoration: none;
+}
+
+a:hover {
+  color: $primaryColor;
+  text-decoration: none;
+}
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+p {
+  margin-bottom: 1em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: inherit;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 1.5em;
+}
+
+h1 {
+  font-size: 32px;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+h4 {
+  font-size: 16px;
 }
+
+h5 {
+  font-size: 14px;
+}
+
+h6 {
+  font-size: 13.6px;
+}
+
+ul,
+ol {
+  margin-bottom: 1em;
+  margin-top: 0;
+  padding-left: 2em;
+}
+
+ol ol,
+ul ol {
+  list-style-type: lower-roman;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+ul ul ol,
+ul ol ol,
+ol ul ol,
+ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+li {
+  word-wrap: break-all;
+}
+
+li > p {
+  margin-top: 1em;
+}
+
+li + li {
+  margin-top: 0.25em;
+}
+
+img {
+  border-style: none;
+  box-sizing: content-box;
+  max-width: 100%;
+}
+
+img[align='right'] {
+  padding-left: 1.25em;
+}
+
+img[align='left'] {
+  padding-right: 1.25em;
+}
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
+  display: block;
+  margin-bottom: 16px;
+  margin-top: 0;
+  overflow: auto;
+  width: 100%;
 }
 
-/* Base */
+table tr {
+  background-color: transparent;
+  border-top: 1px solid #dfe2e5;
+}
 
-body {
-  background: #f9f9f9;
-  color: #393939;
-  font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Arial,sans-serif;
+table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+table th,
+table td {
+  border: 1px solid #dfe2e5;
+  padding: 6px 13px;
+}
+
+table th {
+  background-color: inherit;
+  color: inherit;
+  font-weight: 600;
+}
+
+table td {
+  color: inherit;
+}
+
+blockquote {
+  color: #6a737d;
   font-size: 16px;
-  line-height: 1.4em;
+  margin: 0;
+  margin-bottom: 16px;
+  padding: 0 1em;
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+code {
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  color: inherit;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 85%;
+  margin: 0;
+  padding: 3.2px 6.4px;
+}
+
+pre {
+  margin-bottom: 16px;
+}
+
+pre code {
+  background-color: transparent;
+  border: 0;
+  display: inline;
+  font-size: 85%;
+  line-height: inherit;
+  margin: 0;
+  max-width: auto;
+  overflow: visible;
+  padding: 0;
+  white-space: pre;
+  word-break: normal;
+  word-wrap: normal;
+}
+
+kbd {
+  background-color: #fafbfc;
+  border: solid 1px #d1d5da;
+  border-bottom-color: #c6cbd1;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #c6cbd1;
+  color: #444d56;
+  display: inline-block;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 68.75%;
+  line-height: 10px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+
+hr {
+  border-color: #dfe2e5;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: content-box;
+  margin: 1.5em 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+hr:before {
+  content: '';
+  display: table;
+}
+
+hr:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+/**
+ * Start of Docusaurus CSS
+ */
+
+/* Base */
+body {
   min-height: 100vh;
-  text-align: left;
   text-rendering: optimizeLegibility;
 }
 
-p {
-  line-height: 1.4;
+@media screen and (min-width: 736px) {
+  body {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
-img {
-  max-width: 100%;
-  height: auto;
+article:before {
+  content: '';
+  display: table;
 }
 
-article p img, article iframe {
-  max-width: 100%;
+article:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+article > :first-child {
+  margin-top: 0;
+}
+
+article > :last-child {
+  margin-bottom: 0;
+}
+
+article p img,
+article iframe {
   display: block;
   margin-left: auto;
   margin-right: auto;
+  max-width: 100%;
 }
 
-a {
-  color: $primaryColor;
-  text-decoration: none;
-}
-
+/* Links */
 a.anchor {
   display: block;
   position: relative;
@@ -93,9 +406,9 @@ a.anchor {
 
 a.hash-link {
   line-height: 1;
-  padding-right: 4px;
   margin-left: -20px;
   opacity: 0;
+  padding-right: 4px;
   transition: opacity 0.3s;
 }
 
@@ -108,6 +421,27 @@ a.hash-link .hash-link-icon {
   vertical-align: middle;
 }
 
+/* Buttons */
+.button {
+  border: 1px solid $primaryColor;
+  border-radius: 3px;
+  color: $primaryColor;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2em;
+  padding: 10px;
+  text-decoration: none !important;
+  text-transform: uppercase;
+  transition: background 0.3s, color 0.3s;
+}
+
+.button:hover {
+  background: $primaryColor;
+  color: #fff;
+}
+
+/* Headers */
 h1:hover .hash-link,
 h2:hover .hash-link,
 h3:hover .hash-link,
@@ -116,55 +450,44 @@ h4:hover .hash-link {
   transition: none;
 }
 
+/* Blockquotes */
 blockquote {
+  background-color: rgba(255, 229, 100, 0.3);
+  border-left: 8px solid #ffe564;
   padding: 15px 30px 15px 15px;
-  margin: 20px 0;
-  background-color: rgba(204, 122, 111, 0.1);
-  border-left: 5px solid rgba(191, 87, 73, 0.2);
 }
 
 .wrapper blockquote > p:first-child {
   padding-top: 0;
 }
 
-h1, h2, h3, h4 {
-  font-weight: 300;
-  color: $primaryColor;
-}
-
-h4 {
-  line-height: 2em;
-}
-
-header h2 {
-  color: white;
-  font-size: 20px;
-}
-
+/* Home Container */
 .homeContainer {
-  background: #fff;
-  color: $primaryColor;
   text-align: center;
 }
 
 .homeContainer .homeWrapper {
   padding: 2em 10px;
 }
+
 .homeContainer .homeWrapper .wrapper {
   margin: 0px auto;
   max-width: 900px;
   padding: 0 20px;
 }
+
 .homeContainer .homeWrapper .projectLogo img {
   height: 100px;
   margin-bottom: 0px;
 }
+
 .homeContainer .homeWrapper h1#project_title {
   font-size: 300%;
   letter-spacing: -0.08em;
   line-height: 1em;
   margin-bottom: 80px;
 }
+
 .homeContainer .homeWrapper h2#project_tagline {
   font-size: 200%;
   letter-spacing: -0.04em;
@@ -181,6 +504,7 @@ header h2 {
   display: none;
   pointer-events: none;
 }
+
 .projectLogo img {
   height: 100px;
   margin-bottom: 0px;
@@ -195,156 +519,57 @@ header h2 {
   margin-bottom: 20px;
   width: 100%;
 }
+
 .center {
   display: block;
   text-align: center;
 }
 
 .mainContainer {
-  background: #f9f9f9;
   flex: 1 1 auto;
   max-width: 100%;
-  font-size: 18px;
 }
+
 .mainContainer .wrapper {
   text-align: left;
 }
+
 .mainContainer .wrapper .allShareBlock {
   padding: 10px 0;
 }
+
 .mainContainer .wrapper .allShareBlock .pluginBlock {
   margin: 12px 0;
   padding: 0;
 }
-.mainContainer .wrapper a,
-.inner .projectIntro a {
-  text-decoration: none;
-}
-.mainContainer .wrapper a:hover,
-.mainContainer .wrapper a:focus,
-.inner .projectIntro a:hover,
-.inner .projectIntro a:focus {
-  text-decoration: underline;
-}
-.mainContainer .wrapper em, .mainContainer .wrapper i {
-  font-style: italic;
-}
-.mainContainer .wrapper strong, .mainContainer .wrapper b {
-  font-weight: bold;
-}
-.container .wrapper h1 {
-  font-size: 300%;
-  line-height: 1em;
-  margin: 0 0 10px 0;
-  padding: 1.4em 0 1em;
-  text-align: left;
-}
-.container .wrapper h2 {
-  color: $primaryColor;
-  font-size: 22px;
-  line-height: 1em;
-  margin-top: 20px;
-  text-align: left;
-  padding: 10px 0;
-}
-.container .wrapper h2.blockHeader {
-  color: white;
-  font-size: 22px;
-  margin-top: 20px;
-  padding: 10px 0;
-}
-.container .wrapper h3 {
-  color: $primaryColor;
-  font-size: 18px;
-  margin: 12px 0;
-}
-.container .wrapper h4 {
-  color: $primaryColor;
-  font-size: 16px;
-  font-weight: 300;
-  margin: 0;
-  padding: 10px 0 0;
-}
-.referenceContainer .wrapper h3 {
-  border-top: 1px solid #e0e0e0;
-}
-.referenceContainer .wrapper h3:first-of-type {
-  border: 0;
-}
-.container .wrapper h4 + p {
-  padding-top: 0;
-}
-.mainContainer .wrapper p,
-.blockElement p {
-  padding: 0.8em 0 0 0;
-}
-.mainContainer .wrapper ul {
-  list-style: disc;
-}
-.mainContainer .wrapper ol, .mainContainer .wrapper ul {
-  padding: 10px 0 0 24px;
-}
-.mainContainer .wrapper ol li, .mainContainer .wrapper ul li {
-  margin: 0 0 10px 0;
-}
-.mainContainer .wrapper p,
-.blockElement p,
-.mainContainer .wrapper ul li,
-.mainContainer .wrapper ol li {
-  line-height: 1.7;
-  max-width: 50rem;
-}
-@media (max-width: 735px) {
-  .mainContainer .wrapper p,
-  .blockElement p,
-  .mainContainer .wrapper ul li,
-  .mainContainer .wrapper ol li {
-    font-size: 16px;
-  }
-}
-.mainContainer .wrapper strong {
-  font-weight: bold;
-}
+
 .mainContainer .wrapper .post {
   position: relative;
 }
+
 .mainContainer .wrapper .post.basicPost {
   margin-top: 30px;
 }
 
-.mainContainer .wrapper .post h1 {
-  margin-top: 20px;
-  margin-bottom: 0;
-  font-size: 250%;
-  padding: 10px 0;
-}
-.mainContainer .wrapper .post h2 {
-  font-size: 130%;
-}
-.mainContainer .wrapper .post h3 {
-  font-size: 110%;
-}
-.mainContainer .wrapper .post h5 {
-  font-weight: 300;
-  font-style: italic;
+.mainContainer .wrapper .post .postHeader {
+  margin-bottom: 16px;
 }
-.mainContainer .wrapper .post h5 strong {
-  font-weight: 400;
-}
-.mainContainer .wrapper .post ol {
-  list-style: decimal outside none;
+
+@media only screen and (max-width: 1023px) {
+  .mainContainer .wrapper .post .postHeader {
+    margin-top: 48px; /* Height of mobile sidebar */
+  }
 }
-.mainContainer .wrapper .post .postHeader h1 {
-  font-size: 150%;
-  line-height: 1em;
+
+.mainContainer .wrapper .post .postHeaderTitle {
+  margin-top: 0;
   padding: 0;
 }
-.mainContainer .wrapper .post .postHeader h1 a {
-  border: none;
-}
+
 .mainContainer .wrapper .post .postSocialPlugins {
   padding-top: 1em;
 }
+
 .mainContainer .wrapper .post .docPagination {
   background: $primaryColor;
   bottom: 0px;
@@ -352,59 +577,47 @@ header h2 {
   position: absolute;
   right: 0px;
 }
+
 .mainContainer .wrapper .post .docPagination .pager {
   display: inline-block;
   width: 50%;
 }
+
 .mainContainer .wrapper .post .docPagination .pagingNext {
   float: right;
   text-align: right;
 }
+
 .mainContainer .wrapper .post .docPagination a {
   border: none;
   color: #fff;
   display: block;
   padding: 4px 12px;
 }
+
 .mainContainer .wrapper .post .docPagination a:hover {
   background-color: #f9f9f9;
   color: #393939;
 }
+
 .mainContainer .wrapper .post .docPagination a .pagerLabel {
   display: inline;
 }
+
 .mainContainer .wrapper .post .docPagination a .pagerTitle {
   display: none;
 }
 
-.mainContainer .wrapper .post h1,
-.mainContainer .wrapper .post h2,
-.mainContainer .wrapper .post h3 {
-  font-weight: 300;
-}
-
-.mainContainer .wrapper .post h4,
-.mainContainer .wrapper .post h5,
-.mainContainer .wrapper .post h6 {
-  font-weight: 400;
-}
-
-#integrations_title {
-  font-size: 250%;
-  margin: 80px 0;
-}
-
 .projectTitle {
   font-size: 250%;
   line-height: 1em;
-  font-weight: 400;
 }
 
 .projectTitle > small {
   display: block;
   font-size: 50%;
-  line-height: 1em;
   font-weight: 300;
+  line-height: 1em;
   margin: 0.7em 0 1.3em;
 }
 
@@ -423,8 +636,8 @@ header h2 {
   }
 
   .projectLogo img {
-    margin-bottom: 10px;
     height: 200px;
+    margin-bottom: 10px;
   }
 
   .homeContainer .homeWrapper {
@@ -432,39 +645,40 @@ header h2 {
     padding-right: 10px;
   }
 
-  .mainContainer .wrapper .post h2 {
-    font-size: 180%;
-  }
-  .mainContainer .wrapper .post h3 {
-    font-size: 120%;
-  }
   .mainContainer .wrapper .post .docPagination a .pagerLabel {
     display: none;
   }
+
   .mainContainer .wrapper .post .docPagination a .pagerTitle {
     display: inline;
   }
 }
+
 @media only screen and (min-width: 736px) {
   .homeContainer .homeWrapper {
     position: relative;
   }
+
   .homeContainer .homeWrapper #inner {
     box-sizing: border-box;
     max-width: 600px;
     padding-right: 40px;
   }
+
   .mainContainer .wrapper .post {
     box-sizing: border-box;
     display: block;
   }
+
   .mainContainer .wrapper .post .postHeader h1 {
     font-size: 250%;
   }
+
   .mainContainer .wrapper .posts .post {
     width: 100%;
   }
 }
+
 @media only screen and (min-width: 1200px) {
   .homeContainer .homeWrapper #inner {
     max-width: 750px;
@@ -486,6 +700,7 @@ header h2 {
     max-height: 250px;
   }
 }
+
 @media only screen and (min-width: 1500px) {
   .homeContainer .homeWrapper #inner {
     max-width: 1100px;
@@ -497,16 +712,19 @@ header h2 {
     max-width: 1400px;
   }
 }
+
+/* Navbar */
 .fixedHeaderContainer {
-  box-sizing: border-box;
   background: $primaryColor;
+  box-sizing: border-box;
   color: #fff;
   min-height: 50px;
-  padding: 9px 0;
+  padding: 8px 0;
   position: fixed;
   width: 100%;
   z-index: 9999;
 }
+
 .fixedHeaderContainer a {
   align-items: center;
   border: 0;
@@ -516,38 +734,48 @@ header h2 {
   height: 34px;
   z-index: 10000;
 }
+
 .fixedHeaderContainer header {
   display: flex;
   flex-flow: row nowrap;
   position: relative;
   text-align: left;
 }
+
 .fixedHeaderContainer header img {
   height: 100%;
   margin-right: 10px;
 }
-.fixedHeaderContainer header h2 {
+
+.fixedHeaderContainer header .headerTitleWithLogo {
   display: block;
+  font-size: 20px;
   font-weight: 400;
   line-height: 18px;
+  margin: 0;
   position: relative;
   z-index: 9999;
 }
+
 .fixedHeaderContainer header h3 {
-  text-decoration: underline;
   color: white;
-  margin-left: 10px;
   font-size: 16px;
+  margin: 0;
+  margin-left: 10px;
+  text-decoration: underline;
 }
+
 @media (max-width: 480px) {
   .headerTitle {
     font-size: 17px;
   }
+
   .headerTitleWithLogo {
     display: none !important;
   }
 }
 
+/* Promo section */
 .promoSection {
   display: flex;
   flex-flow: column wrap;
@@ -556,66 +784,52 @@ header h2 {
   position: relative;
   z-index: 99;
 }
+
 .promoSection .promoRow {
   padding: 10px 0;
 }
+
 .promoSection .promoRow .pluginWrapper {
   display: block;
 }
-.promoSection .promoRow .pluginWrapper.ghWatchWrapper, .promoSection .promoRow .pluginWrapper.ghStarWrapper {
+
+.promoSection .promoRow .pluginWrapper.ghWatchWrapper,
+.promoSection .promoRow .pluginWrapper.ghStarWrapper {
   height: 28px;
 }
+
 .promoSection .promoRow .pluginRowBlock {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 0 -2px;
 }
+
 .promoSection .promoRow .pluginRowBlock .pluginWrapper {
   padding: 0 2px;
 }
+
 .promoSection .promoRow .pluginRowBlock iframe {
   margin-left: 2px;
   margin-top: 5px;
 }
-.button {
-  margin: 4px;
-  border: 1px solid $primaryColor;
-  border-radius: 3px;
-  color: $primaryColor;
-  display: inline-block;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.2em;
-  padding: 10px;
-  text-transform: uppercase;
-  text-decoration: none !important;
-  transition: background 0.3s, color 0.3s;
-}
-.button:hover {
-  background: $primaryColor;
-  color: #fff;
-}
-
-.blockButton {
-  display: block;
-}
 
 /* Search */
-input[type="search"] {
+input[type='search'] {
   -moz-appearance: none;
   -webkit-appearance: none;
 }
 
 .navSearchWrapper {
+  align-items: center;
   align-self: center;
-  position: absolute;
-  top: 15px;
-  right: 10px;
   display: flex;
   justify-content: center;
-  align-items: center;
+  position: absolute;
+  right: 10px;
+  top: 15px;
 }
+
 .navSearchWrapper::before {
   border: 3px solid #e5e5e5;
   border-radius: 50%;
@@ -623,23 +837,25 @@ input[type="search"] {
   display: block;
   height: 6px;
   left: 15px;
-  width: 6px;
   position: absolute;
   top: 50%;
-  z-index: 1;
   transform: translateY(-58%);
+  width: 6px;
+  z-index: 1;
 }
+
 .navSearchWrapper::after {
   background: #e5e5e5;
   content: ' ';
   height: 7px;
   left: 24px;
   position: absolute;
-  transform: rotate(-45deg);
   top: 55%;
+  transform: rotate(-45deg);
   width: 3px;
   z-index: 1;
 }
+
 .navSearchWrapper .aa-dropdown-menu {
   background: #f9f9f9;
   border: 3px solid rgba(57, 57, 57, 0.25);
@@ -649,50 +865,72 @@ input[type="search"] {
   line-height: 1.2em;
   right: 0 !important;
 }
-.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header {
+
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--category-header {
   background: $primaryColor;
   color: white;
-  font-weight: 400;
   font-size: 14px;
+  font-weight: 400;
 }
-.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
+
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--category-header
+  .algolia-docsearch-suggestion--highlight {
   background-color: $primaryColor;
   color: #fff;
 }
-.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight,
-.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
+
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--title
+  .algolia-docsearch-suggestion--highlight,
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--subcategory-column
+  .algolia-docsearch-suggestion--highlight {
   color: $primaryColor;
 }
+
 .navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary,
-.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column {
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--subcategory-column {
   border-color: rgba(57, 57, 57, 0.3);
 }
+
 input#search_input_react {
-  padding-left: 25px;
-  font-size: 14px;
-  font-weight: 300;
-  line-height: 20px;
-  border-radius: 20px;
   background-color: rgba(0, 0, 0, 0.2);
   border: none;
+  border-radius: 20px;
   color: #fff;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 20px;
   outline: none;
+  padding-left: 25px;
   position: relative;
+  -webkit-transition: 0.5s width ease;
+  -moz-transition: 0.5s width ease;
+  -o-transition: 0.5s width ease;
+  transition: 0.5s width ease;
   width: 170px;
-  transition: .5s width ease;
-  -webkit-transition: .5s width ease;
-  -moz-transition: .5s width ease;
-  -o-transition: .5s width ease;
 }
-input#search_input_react:focus, input#search_input_react:active {
+
+input#search_input_react:focus,
+input#search_input_react:active {
   color: #fff;
   width: 220px;
 }
+
 @media only screen and (max-width: 735px) {
   .navSearchWrapper {
     width: 40%;
   }
 }
+
 input::-webkit-input-placeholder {
   color: #e5e5e5;
 }
@@ -704,27 +942,25 @@ input::-moz-placeholder {
 input::placeholder {
   color: #e5e5e5;
 }
-
-/* Code */
+/*
 code {
-  padding: 2px 0;
   background-color: $codeColor;
-  /* box-shadow acts as padding around inline code snippets
-   * while not adding any extra spacing between words. */
+  border-radius: 0.3em;
   box-shadow: 2px 0 $codeColor, -2px 0 $codeColor;
   color: inherit;
-  border-radius: .3em;
-  font-family: 'SFMono-Regular',source-code-pro,Menlo,Monaco,Consolas,'Roboto Mono','Droid Sans Mono','Liberation Mono',Consolas,'Courier New',Courier,monospace;
-  /* avoids scale issues on mobile */
+  font-family: 'SFMono-Regular', source-code-pro, Menlo, Monaco, Consolas,
+    'Roboto Mono', 'Droid Sans Mono', 'Liberation Mono', Consolas, 'Courier New',
+    Courier, monospace;
+  padding: 2px 0;
   word-break: break-word;
 }
 
 pre code {
   display: block;
-  margin: 20px 0;
   font-size: 13px;
+  margin: 20px 0;
   overflow-x: auto;
-}
+}*/
 
 .hljs {
   padding: 1.25rem 1.5rem;
@@ -748,78 +984,98 @@ pre code {
   margin: -5px 0;
   padding: 0;
 }
+
 .gridBlock .twoByGridBlock,
 .gridBlock .threeByGridBlock,
 .gridBlock .fourByGridBlock {
   padding: 5px 0;
 }
+
 .gridBlock .twoByGridBlock img,
 .gridBlock .threeByGridBlock img,
 .gridBlock .fourByGridBlock img {
   max-width: 100%;
 }
+
 .gridBlock .gridClear {
   clear: both;
 }
+
 .alignCenter {
   text-align: center;
 }
+
 .alignRight {
   text-align: right;
 }
+
 .imageAlignSide {
   display: flex;
   flex-flow: row wrap;
 }
+
 .blockImage {
   max-width: 730px;
 }
+
 .imageAlignSide .blockImage {
-  max-width: 500px;
   flex: 0 1 500px;
+  max-width: 500px;
 }
+
 @media only screen and (max-width: 735px) {
   .imageAlignSide .blockImage {
     display: none;
   }
 }
+
 .imageAlignSide .blockContent {
   flex: 1 1;
 }
+
 .imageAlignBottom .blockImage {
-  max-width: 730px;
   margin: 0 auto 20px;
+  max-width: 730px;
 }
+
 .imageAlignBottom.alignCenter .blockImage {
   margin-left: auto;
   margin-right: auto;
 }
+
 .imageAlignTop .blockImage {
-  max-width: 80px;
   margin-bottom: 20px;
+  max-width: 80px;
 }
+
 .imageAlignTop.alignCenter .blockImage {
   margin-left: auto;
   margin-right: auto;
 }
+
 .imageAlignRight .blockImage {
   margin-left: 40px;
 }
+
 .imageAlignLeft .blockImage {
   margin-right: 40px;
 }
+
 .container .gridBlock .blockContent p {
   padding: 0;
 }
+
 .highlightBackground {
   background: rgba(153, 66, 79, 0.7);
   color: #fff;
 }
+
 .highlightBackground a {
   border-color: white;
   color: #fff;
   font-weight: 800;
 }
+
 .container.highlightBackground .wrapper h1,
 .container.highlightBackground .wrapper h2,
 .container.highlightBackground .wrapper h3,
@@ -828,19 +1084,24 @@ pre code {
   border-color: white;
   color: white;
 }
+
 .lightBackground {
-  background: #e9e9e9;
+  background: #f7f7f7;
 }
+
 .darkBackground {
   background: #808080;
   color: #fff;
 }
+
 .darkBackground a {
   color: #d6b3b8;
 }
+
 .darkBackground code {
   color: #d6b3b8;
 }
+
 .container.darkBackground .wrapper h1,
 .container.darkBackground .wrapper h2,
 .container.darkBackground .wrapper h3,
@@ -849,41 +1110,52 @@ pre code {
   border-color: white;
   color: white;
 }
+
 .container.paddingAll {
   padding: 40px;
 }
+
 .container.paddingBottom {
   padding-bottom: 80px;
 }
+
 .container.paddingLeft {
   padding-left: 40px;
 }
+
 .container.paddingRight {
   padding-right: 40px;
 }
+
 .container.paddingTop {
   padding-top: 80px;
 }
+
 @media only screen and (max-width: 735px) {
   .container.paddingBottom {
     padding-bottom: 40px;
   }
+
   .container.paddingTop {
     padding-top: 20px;
   }
 }
+
 @media only screen and (max-width: 1023px) {
   .responsiveList .blockContent {
     position: relative;
   }
+
   .responsiveList .blockContent > div {
     padding-left: 20px;
   }
+
   .responsiveList .blockContent::before {
     content: '\2022';
     position: absolute;
   }
 }
+
 @media only screen and (min-width: 736px) {
   .gridBlock {
     display: flex;
@@ -891,16 +1163,19 @@ pre code {
     flex-wrap: wrap;
     margin: -10px;
   }
+
   .gridBlock .twoByGridBlock {
     box-sizing: border-box;
     flex: 1 0 40%;
     padding: 10px;
   }
+
   .gridBlock .threeByGridBlock {
     box-sizing: border-box;
     flex: 1 0 26%;
     padding: 10px;
   }
+
   .gridBlock .fourByGridBlock {
     box-sizing: border-box;
     flex: 1 0 20%;
@@ -911,6 +1186,7 @@ pre code {
     padding-top: 20px;
   }
 }
+
 @media only screen and (min-width: 1400px) {
   .gridBlock {
     display: flex;
@@ -918,22 +1194,27 @@ pre code {
     flex-wrap: wrap;
     margin: -10px;
   }
+
   .gridBlock .twoByGridBlock {
     box-sizing: border-box;
     flex: 1 0 40%;
     padding: 10px 20px;
   }
+
   .gridBlock .threeByGridBlock {
     box-sizing: border-box;
     flex: 1 0 26%;
     padding: 10px;
   }
+
   .gridBlock .fourByGridBlock {
     box-sizing: border-box;
     flex: 1 0 20%;
     padding: 10px 20px;
   }
 }
+
+/* Navigation Slider */
 .navigationSlider .navSlideout {
   cursor: pointer;
   padding-top: 4px;
@@ -943,78 +1224,88 @@ pre code {
   transition: top 0.3s;
   z-index: 101;
 }
+
 .navigationSlider .slidingNav {
+  bottom: auto;
   box-sizing: border-box;
-  position: fixed;
   left: 0;
+  position: fixed;
   right: 0;
   top: 0;
-  bottom: auto;
 }
+
 .navigationSlider .slidingNav.slidingNavActive {
   height: auto;
   padding-top: 42px;
   width: 300px;
 }
+
 .navigationSlider .slidingNav ul {
+  background: $secondaryColor;
   box-sizing: border-box;
+  color: #fff;
   display: flex;
   flex-wrap: nowrap;
   list-style: none;
   margin-top: 50px;
-  width: 100%;
   padding: 0;
-  background: $secondaryColor;
-  color: #fff;
+  width: 100%;
 }
+
 .navigationSlider .slidingNav.slidingNavActive ul {
   display: block;
 }
+
 .navigationSlider .slidingNav ul li {
   flex: 1 1 auto;
+  margin: 0;
   text-align: center;
   white-space: nowrap;
-  margin: 0;
 }
+
 .navigationSlider .slidingNav ul li a {
+  align-items: center;
+  box-sizing: border-box;
   color: $primaryColor;
+  color: inherit;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
+  font-size: 0.9em;
   height: auto;
-  color: inherit;
-  transition: background-color 0.3s;
   height: 50px;
+  justify-content: center;
+  margin: 0;
   padding: 10px;
-  box-sizing: border-box;
-  font-size: 0.9em;
+  transition: background-color 0.3s;
 }
+
 .navigationSlider .slidingNav ul li a:focus,
 .navigationSlider .slidingNav ul li a:hover,
 .navigationSlider .slidingNav ul li.siteNavItemActive a,
-  .navigationSlider .slidingNav ul li.siteNavGroupActive a {
+.navigationSlider .slidingNav ul li.siteNavGroupActive a {
   background: $primaryColor;
 }
 
 .languages-icon {
   width: 20px;
 }
+
 #languages-dropdown {
-  position: absolute;
-  width:100%;
   /* positioning can block the main menu on mobile */
   pointer-events: none;
+  position: absolute;
+  width: 100%;
 }
+
 #languages-dropdown.visible {
   display: flex;
 }
 #languages-dropdown.hide {
   display: none;
 }
+
 ul#languages-dropdown-items {
-  display: flex;
   background-color: $primaryColor;
+  display: flex;
   flex-direction: column;
   min-width: 120px;
   pointer-events: all;
@@ -1025,23 +1316,24 @@ ul#languages li {
 }
 
 .navPusher {
+  left: 0;
+  min-height: 100%;
   padding-top: 100px;
   position: relative;
-  left: 0;
   z-index: 99;
-  min-height: 100%;
 }
+
 .navPusher::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 0;
-  height: 0;
   background: rgba(0, 0, 0, 0.4);
   content: '';
+  height: 0;
   opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
   -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
   transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+  width: 0;
 }
 
 @media only screen and (min-width: 736px) {
@@ -1049,90 +1341,105 @@ ul#languages li {
     padding-top: 50px;
   }
 }
+
 .sliderActive .navPusher::after {
-  width: 100%;
   height: 100%;
   opacity: 1;
   -webkit-transition: opacity 0.5s;
   transition: opacity 0.5s;
+  width: 100%;
   z-index: 100;
 }
+
 @media only screen and (max-width: 735px) {
   .reactNavSearchWrapper::before {
     left: 6px;
   }
+
   .reactNavSearchWrapper::after {
     left: 15px;
   }
+
   .reactNavSearchWrapper input#search_input_react {
-    box-sizing: border-box;
-    padding-left: 25px;
-    font-size: 14px;
-    line-height: 20px;
-    border-radius: 20px;
     background-color: rgba(242, 196, 178, 0.25);
     border: none;
+    border-radius: 20px;
+    box-sizing: border-box;
     color: #393939;
+    font-size: 14px;
+    line-height: 20px;
     outline: none;
+    padding-left: 25px;
     position: relative;
-    transition: background-color 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), width 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color 0.2s ease;
+    transition: background-color 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55),
+      width 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color 0.2s ease;
     width: 100%;
   }
-  .reactNavSearchWrapper input#search_input_react:focus, .reactNavSearchWrapper input#search_input_react:active {
+
+  .reactNavSearchWrapper input#search_input_react:focus,
+  .reactNavSearchWrapper input#search_input_react:active {
     background-color: $primaryColor;
     color: #fff;
   }
+
   .reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline {
     display: none;
   }
+
   .reactNavSearchWrapper > span {
     width: 100%;
   }
+
   .reactNavSearchWrapper .aa-dropdown-menu {
     background: #f9f9f9;
     border: 0px solid #f9f9f9;
+    border-radius: 0;
     color: #393939;
     font-size: 12px;
     line-height: 2em;
     max-height: 140px;
     min-width: auto;
-    overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
     padding: 0;
-    border-radius: 0;
     position: relative !important;
     width: 100%;
   }
 
   #languages-dropdown {
-    top: 50px;
     left: 0px;
+    top: 50px;
   }
 
   ul#languages-dropdown-items {
-    display: flex;
     background-color: $primaryColor;
+    display: flex;
     flex-direction: row;
   }
 }
+
 @media only screen and (min-width: 736px) {
   .navSearchWrapper {
+    padding-left: 10px;
     position: relative;
-    top: auto;
     right: auto;
-    padding-left: 10px;
+    top: auto;
   }
+
   .navSearchWrapper .algolia-autocomplete {
     display: block;
   }
+
   .navigationSlider {
     height: 34px;
     margin-left: auto;
     position: relative;
   }
+
   .navigationSlider .navSlideout {
-    display:none;
+    display: none;
   }
+
   .navigationSlider nav.slidingNav {
     background: none;
     height: auto;
@@ -1141,27 +1448,30 @@ ul#languages li {
     top: auto;
     width: auto;
   }
+
   .navigationSlider .slidingNav ul {
+    background: none;
     display: flex;
     flex-flow: row nowrap;
     margin: 0 -10px;
     padding: 0;
-    background: none;
     width: auto;
   }
+
   .navigationSlider .slidingNav ul li a {
     border: 0;
     color: rgba(255, 255, 255, 0.8);
     display: flex;
-    margin: 0;
-    padding: 0;
     font-size: 16px;
+    font-size: 1em;
     font-weight: 300;
+    height: 32px;
     line-height: 1.2em;
+    margin: 0;
+    padding: 0;
     padding: 6px 10px;
-    height: 32px;
-    font-size: 1em;
   }
+
   .navigationSlider .slidingNav ul li a:hover,
   .navigationSlider .slidingNav ul li.siteNavItemActive a,
   .navigationSlider .slidingNav ul li.siteNavGroupActive a {
@@ -1173,18 +1483,37 @@ ul#languages li {
   .navigationSlider .slidingNav ul {
     overflow-x: auto;
   }
+  .navigationSlider .slidingNav ul::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Docs */
+@media only screen and (min-width: 1024px) {
+  .docMainWrapper {
+    padding-top: 40px;
+  }
+}
+
+.docMainWrapper .wrapper {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 10px;
 }
 
 /* Docs Navigation */
 .docs-prevnext {
   margin: 20px 0;
 }
+
 .docs-next {
   float: right;
 }
+
 .docs-prev {
   float: left;
 }
+
 @media only screen and (max-width: 735px) {
   .docs-prevnext {
     height: 40px;
@@ -1203,23 +1532,18 @@ ul#languages li {
   width: 100%;
   z-index: 100;
 }
-.docMainWrapper .wrapper {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 10px;
-}
 
 .docsSliderActive.docsNavContainer {
   box-sizing: border-box;
   height: 100%;
-  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  padding-bottom: 50px;
+  overflow-y: auto;
   overscroll-behavior: contain;
+  padding-bottom: 50px;
 }
 
-.docsNavContainer nav.toc .navBreadcrumb {
-  background-color: #fff;
+.docsNavContainer .toc .navBreadcrumb {
+  background-color: #f1f1f1;
   box-sizing: border-box;
   display: flex;
   flex-flow: row nowrap;
@@ -1228,32 +1552,62 @@ ul#languages li {
   overflow: hidden;
   padding: 8px 20px;
 }
+
+.docsNavContainer .toc .navWrapper {
+  padding: 0;
+}
+
+@media only screen and (min-width: 1024px) {
+  .docsNavContainer {
+    background: none;
+    box-sizing: border-box;
+    height: auto;
+    overflow-y: auto;
+    position: relative;
+    width: 300px;
+  }
+
+  .docsNavContainer .toc .navBreadcrumb {
+    display: none;
+  }
+
+  .navBreadcrumb h2 {
+    padding: 0 10px;
+  }
+
+  .doc.separateOnPageNav .docsNavContainer {
+    flex: 0 0 240px;
+  }
+}
+
 .navBreadcrumb a,
 .navBreadcrumb span {
   border: 0;
   color: #393939;
 }
-nav.toc section {
+
+.toc section {
   padding: 0;
   position: relative;
 }
+
 @media only screen and (max-width: 735px) {
   a.anchor {
     top: -144px;
   }
 }
-.docsNavContainer nav.toc .navWrapper {
-  padding: 0;
-}
-nav.toc section .navGroups {
+
+.toc section .navGroups {
   display: none;
   padding: 48px 20px 60px;
 }
-nav.toc .toggleNav {
+
+.toc .toggleNav {
   color: #393939;
   position: relative;
 }
-nav.toc .toggleNav .navToggle {
+
+.toc .toggleNav .navToggle {
   cursor: pointer;
   height: 32px;
   margin-right: 10px;
@@ -1261,87 +1615,110 @@ nav.toc .toggleNav .navToggle {
   text-align: left;
   width: 18px;
 }
-nav.toc .toggleNav .navToggle::before,
-nav.toc .toggleNav .navToggle::after {
+
+.toc .toggleNav .navToggle:before,
+.toc .toggleNav .navToggle:after {
+  border: 5px solid #393939;
+  border-width: 5px 0;
   content: '';
-  position: absolute;
-  top: 50%;
+  height: 6px;
   left: 0;
   left: 8px;
-  width: 3px;
-  height: 6px;
-  border: 5px solid #393939;
-  border-width: 5px 0;
   margin-top: -8px;
+  position: absolute;
+  top: 50%;
   transform: rotate(45deg);
+  width: 3px;
   z-index: 1;
 }
-nav.toc .toggleNav .navToggle::after {
+
+.toc .toggleNav .navToggle::after {
   transform: rotate(-45deg);
 }
-nav.toc .toggleNav .navToggle i::before,
-nav.toc .toggleNav .navToggle i::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 2px;
+
+.toc .toggleNav .navToggle i:before,
+.toc .toggleNav .navToggle i:after {
   background: transparent;
-  border-width: 0 5px 5px;
-  border-style: solid;
   border-color: transparent #393939;
+  border-style: solid;
+  border-width: 0 5px 5px;
+  content: '';
   height: 0;
+  left: 2px;
   margin-top: -7px;
   opacity: 1;
+  position: absolute;
+  top: 50%;
   width: 5px;
   z-index: 10;
 }
+
 .toggleNav h2 i {
   padding: 0 4px;
 }
-nav.toc .toggleNav .navToggle i::after {
+
+.toc .toggleNav .navToggle i:after {
   border-width: 5px 5px 0;
   margin-top: 2px;
 }
-.docsSliderActive nav.toc .toggleNav .navToggle::before,
-.docsSliderActive nav.toc .toggleNav .navToggle::after {
+
+.docsSliderActive .toc .toggleNav .navToggle::before,
+.docsSliderActive .toc .toggleNav .navToggle::after {
   border-width: 8px 0;
   height: 0;
   margin-top: -8px;
 }
-.docsSliderActive nav.toc .toggleNav .navToggle i {
+
+.docsSliderActive .toc .toggleNav .navToggle i {
   opacity: 0;
 }
+
 .docsSliderActive .tocToggler {
   visibility: hidden;
 }
-nav.toc .toggleNav .navGroup {
-  margin-bottom: 20px;
+
+.toc .toggleNav .navGroup {
+  margin-bottom: 16px;
 }
-nav.toc .toggleNav .navGroup h3 {
+
+.toc .toggleNav .navGroup .navGroupCategoryTitle {
   color: #393939;
   font-size: 18px;
   font-weight: 500;
   line-height: 1.2em;
   margin-bottom: 8px;
+  margin-top: 0;
 }
-nav.toc .toggleNav .navGroup h3 i:not(:empty) {
-  width: 16px;
-  height: 16px;
-  display: inline-block;
+
+.toc .toggleNav .navGroup .navListItem {
+  margin: 0;
+}
+
+.toc .toggleNav .navGroup h3 i:not(:empty) {
   box-sizing: border-box;
-  text-align: center;
   color: rgba(57, 57, 57, 0.5);
+  display: inline-block;
+  height: 16px;
   margin-right: 10px;
+  text-align: center;
   transition: color 0.2s;
+  width: 16px;
 }
-nav.toc .toggleNav ul {
+
+.toc .toggleNav ul {
   padding-left: 8px;
 }
-nav.toc .toggleNav ul li {
+
+.docsSliderActive .toc .toggleNav ul {
+  padding-left: 0; /* Remove indentation on mobile */
+}
+
+.toc .toggleNav ul li {
   list-style-type: none;
   padding: 0;
 }
-nav.toc .toggleNav ul li a {
+
+.toc .toggleNav ul li a {
   border: none;
   color: #717171;
   display: block;
@@ -1349,99 +1726,113 @@ nav.toc .toggleNav ul li a {
   padding: 4px 0;
   transition: color 0.3s;
 }
-nav.toc .toggleNav ul li a:hover,
-nav.toc .toggleNav ul li a:focus {
+
+.toc .toggleNav ul li a:hover,
+.toc .toggleNav ul li a:focus {
   color: $primaryColor;
 }
-nav.toc .toggleNav ul li a.navItemActive {
+
+.toc .toggleNav ul li.navListItemActive a {
   color: $primaryColor;
 }
-.docsSliderActive nav.toc .navBreadcrumb,
+
+.docsSliderActive .toc .navBreadcrumb,
 .tocActive .navBreadcrumb {
   border-bottom: 1px solid #ccc;
   margin-bottom: 20px;
   position: fixed;
   width: 100%;
 }
-nav.toc .toggleNav .navBreadcrumb h2 {
+
+.toc .toggleNav .navBreadcrumb h2 {
   border: 0;
-  font-weight: 600;
+  flex-grow: 1;
   font-size: 16px;
+  font-weight: 600;
   line-height: 32px;
   margin: 0;
   padding: 0;
-  flex-grow: 1;
 }
-.docsSliderActive nav.toc section .navGroups {
+
+.docsSliderActive .toc section .navGroups {
   display: block;
+  padding-top: 60px;
 }
+
 .tocToggler {
+  cursor: pointer;
   height: 32px;
-  padding: 0 10px;
-  margin-right: -10px;
   line-height: 32px;
-  cursor: pointer;
+  margin-right: -10px;
+  padding: 0 10px;
 }
+
 .icon-toc {
   box-sizing: border-box;
-  position: relative;
   display: inline-block;
-  vertical-align: middle;
   line-height: normal;
+  position: relative;
   top: -1px;
+  vertical-align: middle;
 }
+
 .icon-toc,
 .icon-toc::before,
 .icon-toc::after {
-  width: 4px;
-  height: 4px;
-  border: 1px solid currentColor;
   background-color: currentColor;
+  border: 1px solid currentColor;
   border-radius: 50%;
   box-sizing: border-box;
+  height: 4px;
+  width: 4px;
 }
+
 .icon-toc::before,
 .icon-toc::after {
-  content: "";
+  content: '';
   position: absolute;
 }
+
 .icon-toc::before {
-  top: -7px;
   left: -1px;
+  top: -7px;
 }
+
 .icon-toc::after {
-  top: 5px;
   left: -1px;
+  top: 5px;
 }
+
 .tocActive .icon-toc {
+  border-radius: 0;
+  height: 16px;
   transform: rotate(45deg);
   width: 3px;
-  height: 16px;
-  border-radius: 0;
 }
+
 .tocActive .icon-toc::before {
-  top: 50%;
-  left: 50%;
-  height: 3px;
-  width: 16px;
   border-radius: 0;
+  height: 3px;
+  left: 50%;
+  top: 50%;
   transform: translate(-50%, -50%);
+  width: 16px;
 }
+
 .tocActive .icon-toc::after {
   content: '';
 }
 
 @media only screen and (min-width: 736px) {
   .doc.separateOnPageNav .navPusher .mainContainer {
-    padding-top: 0;
     max-width: 70%;
+    padding-top: 0;
   }
 
   .docMainWrapper {
     display: flex;
     flex-flow: row nowrap;
     margin-bottom: 50px;
-    /*margin-bottom: -90px*/
   }
   .docMainWrapper .wrapper {
     padding-left: 0;
@@ -1452,9 +1843,11 @@ nav.toc .toggleNav .navBreadcrumb h2 {
   }
 }
 
+/* Inner page navigation */
 .onPageNav {
   display: none;
 }
+
 .onPageNav::-webkit-scrollbar {
   display: none;
 }
@@ -1463,10 +1856,14 @@ nav.toc .toggleNav .navBreadcrumb h2 {
   color: #717171;
 }
 
+.onPageNav ul {
+  list-style: none;
+}
+
 .onPageNav ul li {
   font-size: 12px;
-  line-height: 17px;
-  padding-bottom: 9px;
+  line-height: 16px;
+  padding-bottom: 8px;
 }
 
 .onPageNav ul ul {
@@ -1478,44 +1875,35 @@ nav.toc .toggleNav .navBreadcrumb h2 {
 }
 
 @media only screen and (min-width: 1024px) {
-  nav.toc {
+  .toc {
     width: 240px;
   }
-  nav.toc section .navGroups {
+
+  .toc section .navGroups {
     display: block;
     padding: 0px;
+    padding-top: 8px;
   }
-  .docsNavContainer {
-    background: none;
-    box-sizing: border-box;
-    height: auto;
-    margin: 40px 40px 0 0;
-    overflow-y: auto;
-    position: relative;
-    width: 300px;
-  }
-  .docsNavContainer nav.toc .navBreadcrumb {
-    display: none;
-  }
+
   .navBreadcrumb h2 {
     padding: 0 10px;
   }
 }
 
-@supports ((position: -webkit-sticky) or (position: sticky))  {
+@supports ((position: -webkit-sticky) or (position: sticky)) {
   @media only screen and (max-width: 735px) {
     .tocActive .onPageNav {
-      display: block;
-      position: fixed;
-      top: 148px;
       background: #fff;
-      left: 0;
-      right: 0;
       bottom: 0;
-      z-index: 10;
-      padding: 0 20px;
+      display: block;
+      left: 0;
       overflow-y: auto;
       overscroll-behavior: contain;
+      padding: 0 20px;
+      position: fixed;
+      right: 0;
+      top: 148px;
+      z-index: 10;
     }
 
     .tocActive .navToggle,
@@ -1534,26 +1922,26 @@ nav.toc .toggleNav .navBreadcrumb h2 {
       max-width: 1400px;
     }
 
-    .doc.separateOnPageNav nav.toc {
+    .doc.separateOnPageNav .toc {
       width: auto;
     }
 
     .doc.separateOnPageNav.sideNavVisible .navPusher .mainContainer {
-      max-width: 100%;
       flex: 1 auto;
-      padding: 0 40px 50px;
+      max-width: 100%;
       min-width: 0;
+      padding: 0 40px 50px;
     }
 
     .onPageNav {
+      align-self: flex-start;
       display: block;
-      position: -webkit-sticky;
-      position: sticky;
-      top: 110px;
       flex: 0 0 240px;
+      max-height: calc(100vh - 90px); /* Sync with top */
       overflow-y: auto;
-      max-height: calc(100vh - 110px);
-      align-self: flex-start;
+      position: -webkit-sticky;
+      position: sticky;
+      top: 90px;
     }
 
     .onPageNav > .toc-headings {
@@ -1565,74 +1953,9 @@ nav.toc .toggleNav .navBreadcrumb h2 {
       display: none;
     }
   }
-
-  @media only screen and (min-width: 1024px) {
-    .doc.separateOnPageNav .docsNavContainer {
-      flex: 0 0 240px;
-      margin: 55px 0 0;
-    }
-  }
-}
-
-/* Table */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  display: table;
-  font-size: 14px;
-  margin: 20px 0;
-}
-
-table thead {
-  border-color: inherit;
-  display: table-header-group;
-  vertical-align: middle;
-}
-
-table tbody {
-  display: table-row-group;
-  vertical-align: middle;
-}
-
-table th,
-table td {
-  border: 1px solid #dbdbdb;
-  padding: .5em .75em;
-  vertical-align: top;
-}
-
-table tr {
-  border-color: inherit;
-  display: table-row;
-  vertical-align: inherit;
-}
-
-table tr:nth-child(2n) {
-  background: #f5f5f5;
-}
-
-table tr th {
-  font-weight: bold;
-}
-
-.table tbody tr:last-child th,
-.table tbody tr:last-child td {
-  border-bottom-width: 0;
-}
-
-table th code,
-table td code {
-  color: #2db04b;
-  display: inline-block;
-  font-size: 12px;
 }
 
 /* Blog */
-.mainContainer:not(.blogContainer) .wrapper .post,
-.blogContainer .posts,
-.blogContainer .lonePost {
-  padding-top: 40px;
-}
 .blogContainer .posts .post {
   border-bottom: 1px solid #e0e0e0;
   border-radius: 3px;
@@ -1643,17 +1966,24 @@ table td code {
 .blogContainer .postHeader {
   margin-bottom: 10px;
 }
+
+.blogContainer .postHeaderTitle {
+  margin-top: 0;
+}
+
 .blogContainer .postHeader a {
   text-decoration: none;
 }
+
 .blogContainer .postHeader p.post-meta {
-  padding: 0;
   margin-bottom: 10px;
+  padding: 0;
 }
 
 .blogContainer .postHeader .authorBlock {
   display: flex;
 }
+
 .blogContainer .postHeader .post-authorName {
   color: rgba(57, 57, 57, 0.7);
   display: flex;
@@ -1661,36 +1991,50 @@ table td code {
   font-size: 14px;
   font-weight: 400;
   justify-content: center;
-  margin-top: 0;
   margin-right: 10px;
+  margin-top: 0;
   padding: 0;
 }
+
 .blogContainer .postHeader .authorPhoto {
   border-radius: 50%;
   height: 30px;
   overflow: hidden;
   width: 30px;
 }
+
 .blogContainer .postHeader .authorPhoto.authorPhoto-big {
   height: 50px;
   width: 50px;
 }
+
 .blog-recent {
   margin: 20px 0;
 }
+
 .blog-recent > a {
   float: left;
 }
+
 @media only screen and (max-width: 735px) {
   .blog-recent {
     height: 40px;
   }
 }
 
+.blogSocialSection {
+  display: block;
+  padding: 36px 0;
+}
+
+.blogSocialSection .blogSocialSectionItem {
+  padding-bottom: 5px;
+}
+
 .header-link {
-  position: absolute;
   margin-left: 0.2em;
   opacity: 0;
+  position: absolute;
   -webkit-transition: opacity 0.2s ease-in-out 0.1s;
   -moz-transition: opacity 0.2s ease-in-out 0.1s;
   -ms-transition: opacity 0.2s ease-in-out 0.1s;
@@ -1708,17 +2052,20 @@ h6:hover .header-link {
 .container .wrapper .alignCenter h2 {
   text-align: center;
 }
+
 .container .wrapper .imageAlignSide h2 {
   text-align: left;
 }
+
 .container .wrapper .imageAlignSide p {
+  margin: 0;
   margin-bottom: 40px;
   max-width: 560px;
-  margin: 0;
 }
+
 .more-users {
-  max-width: 560px;
   margin: 0 auto;
+  max-width: 560px;
   text-align: center;
 }
 
@@ -1726,37 +2073,44 @@ h6:hover .header-link {
   padding: 0 20px 0;
   text-align: center;
 }
+
 .productShowcaseSection.paddingTop {
   padding-top: 20px;
 }
+
 .productShowcaseSection.paddingBottom {
   padding-bottom: 80px;
 }
+
 .productShowcaseSection h2 {
   color: $primaryColor;
   font-size: 30px;
   line-height: 1em;
   margin-top: 20px;
-  text-align: center;
   padding: 10px 0;
+  text-align: center;
 }
+
 .productShowcaseSection p {
-  padding: 0.8em 0;
-  max-width: 560px;
   margin: 0 auto;
+  max-width: 560px;
+  padding: 0.8em 0;
 }
+
 .productShowcaseSection .logos {
-  padding: 20px;
+  align-items: center;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
-  align-items: center;
+  padding: 20px;
 }
+
 .productShowcaseSection .logos img {
   max-height: 110px;
-  width: 110px;
   padding: 20px;
+  width: 110px;
 }
+
 @media only screen and (max-width: 735px) {
   .gridBlock .fourByGridBlock {
     box-sizing: border-box;
@@ -1765,87 +2119,92 @@ h6:hover .header-link {
   }
   .productShowcaseSection .logos img {
     max-height: 64px;
-    width: 64px;
     padding: 20px;
+    width: 64px;
   }
 }
 
 /* Showcase */
 .showcaseSection {
+  margin: 0 auto;
   max-width: 900px;
   text-align: center;
-  margin: 0 auto;
 }
+
 .showcaseSection .prose h1 {
-  color: $primaryColor;
   text-align: center;
-  padding: 1.4em 0 0.4em;
 }
+
 .showcaseSection .prose {
+  margin: 0 auto;
   max-width: 560px;
   text-align: center;
-  margin: 0 auto;
 }
+
 .showcaseSection .logos {
   align-items: center;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
 }
+
 .showcaseSection .logos img {
   max-height: 128px;
-  width: 128px;
   padding: 20px;
+  width: 128px;
 }
 
 @media only screen and (max-width: 735px) {
   .showcaseSection .logos img {
     max-height: 64px;
-    width: 64px;
     padding: 20px;
+    width: 64px;
   }
 }
 
 /* Footer */
-footer.nav-footer {
-  position: relative;
-  box-sizing: border-box;
+.nav-footer {
+  background: #20232a;
   border: none;
-  font-weight: 400;
   color: #202020;
   font-size: 15px;
-  line-height: 24px;
-  background: #808080;
-  box-shadow: inset 0 10px 10px -5px rgba(0,0,0,0.2);
-  padding-top: 2em;
-  padding-bottom: 2em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  line-height: 24px;
+  padding-bottom: 2em;
+  padding-top: 2em;
+  position: relative;
 }
-footer .sitemap {
+
+.nav-footer .sitemap {
   display: flex;
   justify-content: space-between;
-  max-width: 1080px;
   margin: 0 auto 3em;
+  max-width: 1080px;
 }
-footer .sitemap div {
+
+.nav-footer .sitemap div {
   flex: 1;
 }
-footer .sitemap .nav-home {
+
+.nav-footer .sitemap .nav-home {
   display: table;
+  height: 72px;
   margin: -12px 20px 0 0;
-  padding: 10px;
-  width: 50px;
-  height: 50px;
   opacity: 0.4;
+  padding: 10px;
   transition: opacity 0.15s ease-in-out;
+  width: 72px;
 }
-footer .sitemap .nav-home:hover,
-footer .sitemap .nav-home:focus {
-  opacity: 1.0;
+
+.nav-footer .sitemap .nav-home:hover,
+.nav-footer .sitemap .nav-home:focus {
+  opacity: 1;
 }
+
 @media screen and (max-width: 735px) {
-  footer .sitemap {
+  .nav-footer .sitemap {
     display: flex;
     flex-direction: column;
     margin: 0 2em 3em;
@@ -1853,92 +2212,94 @@ footer .sitemap .nav-home:focus {
   }
 }
 
-footer .sitemap a {
+.nav-footer .sitemap a {
   color: rgba(255, 255, 255, 0.6);
-  display: table;
+  display: block;
   margin: 2px -10px;
   padding: 3px 10px;
 }
-footer .sitemap a:hover,
-footer .sitemap a:focus {
+
+.nav-footer .sitemap a:hover,
+.nav-footer .sitemap a:focus {
   color: white;
   text-decoration: none;
 }
-footer .sitemap h5 > a:hover,
-footer .sitemap h5 > a:focus {
+
+.nav-footer .sitemap h5 > a:hover,
+.nav-footer .sitemap h5 > a:focus {
   color: white;
   text-decoration: none;
 }
-footer .sitemap h5,
-footer .sitemap h6 {
+
+.nav-footer .sitemap h5,
+.nav-footer .sitemap h6 {
   margin: 0 0 10px;
 }
-footer .sitemap h5 {
+
+.nav-footer .sitemap h5 {
   color: white;
 }
 
-footer .sitemap h6,
-footer .sitemap h5 > a,
-footer .sitemap h6 > a {
+.nav-footer .sitemap h6,
+.nav-footer .sitemap h5 > a,
+.nav-footer .sitemap h6 > a {
   color: white;
 }
-footer .sitemap h5 > a,
-footer .sitemap h6 > a {
+
+.nav-footer .sitemap h5 > a,
+.nav-footer .sitemap h6 > a {
   margin: 0 -10px;
 }
-footer .fbOpenSource {
+
+.nav-footer .fbOpenSource {
   display: block;
   margin: 1em auto;
   opacity: 0.4;
   transition: opacity 0.15s ease-in-out;
   width: 170px;
 }
-footer .fbOpenSource:hover {
-  opacity: 1.0;
+
+.nav-footer .fbOpenSource:hover {
+  opacity: 1;
 }
-footer .copyright {
+
+.nav-footer .copyright {
   color: rgba(255, 255, 255, 0.4);
   text-align: center;
 }
 
-footer .social {
+.nav-footer .social {
   padding: 5px 0;
 }
 
-.blogSocialSection {
-  padding: 36px 0;
-  display: block;
-}
-
-.blogSocialSection .blogSocialSectionItem {
-  padding-bottom: 5px;
+.nav-footer .footerSection {
+  margin-bottom: 18px;
 }
 
 @media screen and (min-width: 736px) {
-  body {
-    display: flex;
-    flex-direction: column;
-  }
   .fixedHeaderContainer {
     flex-shrink: 0;
   }
+
   .navPusher {
-    flex-grow: 1;
     display: flex;
     flex-direction: column;
-    padding-top: 50px;
+    flex-grow: 1;
     min-height: calc(100vh - 50px);
+    padding-top: 50px;
   }
+
   .docMainWrapper {
-    width: 100%;
     box-sizing: border-box;
+    width: 100%;
   }
 
   /* those make the footer sticky and work even in IE 11 */
   .navPusher > :first-child {
     flex-grow: 1;
   }
-  footer.nav-footer {
+
+  .nav-footer {
     flex-shrink: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/website/core/Footer.js b/website/core/Footer.js
index 97d0ae2fceb2..a3067f341539 100644
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -9,8 +9,8 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const SocialFooter = props => (
-  <div>
-    <h5>More</h5>
+  <div className="footerSection">
+    <h5>Social</h5>
     <div className="social">
       <a
         className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
@@ -51,7 +51,7 @@ const SocialFooter = props => (
 );
 
 SocialFooter.propTypes = {
-  config: PropTypes.object
+  config: PropTypes.object,
 };
 
 class Footer extends React.Component {
@@ -62,47 +62,52 @@ class Footer extends React.Component {
           {this.props.config.footerIcon && (
             <a href={this.props.config.baseUrl} className="nav-home">
               <img
-                src={`${this.props.config.baseUrl}${this.props.config
-                  .footerIcon}`}
+                src={`${this.props.config.baseUrl}${
+                  this.props.config.footerIcon
+                }`}
                 alt={this.props.config.title}
                 width="66"
                 height="58"
               />
             </a>
           )}
-          <div>
+          <div className="footerSection">
             <h5>Docs</h5>
             <a
               href={`
-                ${this.props.config.baseUrl}docs/${this.props.language}/installation.html`}
-            >
+                ${this.props.config.baseUrl}docs/${
+                this.props.language
+              }/installation.html`}>
               Getting Started
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}docs/${this.props.language}/versioning.html`}
-            >
+                ${this.props.config.baseUrl}docs/${
+                this.props.language
+              }/versioning.html`}>
               Versioning
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}docs/${this.props.language}/translation.html`}
-            >
+                ${this.props.config.baseUrl}docs/${
+                this.props.language
+              }/translation.html`}>
               Localization
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}docs/${this.props.language}/search.html`}
-            >
+                ${this.props.config.baseUrl}docs/${
+                this.props.language
+              }/search.html`}>
               Adding Search
             </a>
           </div>
-          <div>
+          <div className="footerSection">
             <h5>Community</h5>
             <a
-              href={`${this.props.config.baseUrl}${this.props
-                .language}/users.html`}
-            >
+              href={`${this.props.config.baseUrl}${
+                this.props.language
+              }/users.html`}>
               User Showcase
             </a>
           </div>
diff --git a/website/pages/en/help.js b/website/pages/en/help.js
index 7edd14a4f845..999b17060f6b 100755
--- a/website/pages/en/help.js
+++ b/website/pages/en/help.js
@@ -5,40 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const React = require("react");
-const CompLibrary = require("../../core/CompLibrary.js");
+const React = require('react');
+const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
-const siteConfig = require(process.cwd() + "/siteConfig.js");
-const translate = require("../../server/translate.js").translate;
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+const translate = require('../../server/translate.js').translate;
 
 class Help extends React.Component {
   render() {
     const supportLinks = [
       {
         title: <translate>Browse the docs</translate>,
-        content: (
-            `Learn more about Docusaurus using the [official documentation](${siteConfig.baseUrl}docs/${this.props.language}/installation).`
-        ),
+        content: `Learn more about Docusaurus using the [official documentation](${
+          siteConfig.baseUrl
+        }docs/${this.props.language}/installation).`,
       },
       {
         title: <translate>Discord</translate>,
-        content: (
-            "You can join the conversation on [Discord](https://discord.gg/docusaurus) on one of our two text channels: #docusaurus-users for user help and #docusaurus-dev for contributing help."
-        ),
+        content:
+          'You can join the conversation on [Discord](https://discord.gg/docusaurus) on one of our two text channels: #docusaurus-users for user help and #docusaurus-dev for contributing help.',
       },
       {
         title: <translate>Twitter</translate>,
-        content: (
-            "You can follow and contact us on [Twitter](https://twitter.com/docusaurus)."
-        ),
+        content:
+          'You can follow and contact us on [Twitter](https://twitter.com/docusaurus).',
       },
       {
         title: <translate>GitHub</translate>,
-        content: (
-            "At our [GitHub repo](https://github.com/facebook/docusaurus) Browse and submit [issues](https://github.com/facebook/Docusaurus/issues) or [pull requests](https://github.com/facebook/Docusaurus/pulls) for bugs you find or any new features you may want implemented. Be sure to also check out our [contributing information](https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md)."
-        ),
-      }
+        content:
+          'At our [GitHub repo](https://github.com/facebook/docusaurus) Browse and submit [issues](https://github.com/facebook/Docusaurus/issues) or [pull requests](https://github.com/facebook/Docusaurus/pulls) for bugs you find or any new features you may want implemented. Be sure to also check out our [contributing information](https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md).',
+      },
     ];
 
     return (
@@ -46,11 +43,14 @@ class Help extends React.Component {
         <Container className="mainContainer documentContainer postContainer">
           <div className="post">
             <header className="postHeader">
-              <h2><translate>Need help?</translate></h2>
+              <h1>
+                <translate>Need help?</translate>
+              </h1>
             </header>
             <p>
               <translate desc="statement made to reader">
-                If you need help with Docusaurus, you can try one of the mechanisms below.
+                If you need help with Docusaurus, you can try one of the
+                mechanisms below.
               </translate>
             </p>
             <GridBlock contents={supportLinks} layout="fourColumn" />
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 0450d565e5e0..24c6700b895e 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const React = require("react");
-const CompLibrary = require("../../core/CompLibrary.js");
+const React = require('react');
+const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
-const siteConfig = require(process.cwd() + "/siteConfig.js");
-const translate = require("../../server/translate.js").translate;
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+const translate = require('../../server/translate.js').translate;
 
 class Button extends React.Component {
   render() {
@@ -26,7 +26,7 @@ class Button extends React.Component {
 }
 
 Button.defaultProps = {
-  target: "_self"
+  target: '_self',
 };
 
 class HomeSplash extends React.Component {
@@ -36,23 +36,28 @@ class HomeSplash extends React.Component {
         <div className="homeSplashFade">
           <div className="wrapper homeWrapper">
             <div className="projectLogo">
-              <img src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`} alt="Docusaurus with Keytar"/>
+              <img
+                src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`}
+                alt="Docusaurus with Keytar"
+              />
             </div>
             <div className="inner">
-              <h2 className="projectTitle">
+              <h1 className="projectTitle">
                 {siteConfig.title}
                 <small>{siteConfig.tagline}</small>
-              </h2>
+              </h1>
               <div className="section promoSection">
                 <div className="promoRow">
                   <div className="pluginRowBlock">
                     <Button
                       href={`
-                        ${siteConfig.baseUrl}docs/${this.props.language}/installation
+                        ${siteConfig.baseUrl}docs/${
+                        this.props.language
+                      }/installation
                         `}>
                       <translate>Get Started</translate>
                     </Button>
-                    <Button href='https://github.com/facebook/Docusaurus'>
+                    <Button href="https://github.com/facebook/Docusaurus">
                       <translate>GitHub</translate>
                     </Button>
                   </div>
@@ -68,7 +73,7 @@ class HomeSplash extends React.Component {
 
 class Index extends React.Component {
   render() {
-    let language = this.props.language || "en";
+    let language = this.props.language || 'en';
     const showcase = siteConfig.users
       .filter(user => {
         return user.pinned;
@@ -85,44 +90,44 @@ class Index extends React.Component {
       <div>
         <HomeSplash language={language} />
         <div className="mainContainer">
-          <Container padding={["bottom", "top"]}>
+          <Container padding={['bottom', 'top']}>
             <GridBlock
               align="center"
               contents={[
                 {
-                  content: (
-                    `Save time and focus on your project's documentation. Simply
-                    write docs and blog posts with [Markdown](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown)
+                  content: `Save time and focus on your project's documentation. Simply
+                    write docs and blog posts with [Markdown](${
+                      siteConfig.baseUrl
+                    }docs/${this.props.language}/doc-markdown)
                     and Docusaurus will publish a set of static html files ready
-                    to serve.`
-                  ),
+                    to serve.`,
                   image: `${siteConfig.baseUrl}img/markdown.png`,
-                  imageAlign: "top",
-                  imageAlt: "Markdown",
-                  title: <translate>Powered by Markdown</translate>
+                  imageAlign: 'top',
+                  imageAlt: 'Markdown',
+                  title: <translate>Powered by Markdown</translate>,
                 },
                 {
-                  content: (
-                    `[Extend or customize](${siteConfig.baseUrl}docs/${this.props.language}/api-pages)
+                  content: `[Extend or customize](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/api-pages)
                     your project's layout by reusing React. Docusaurus can be
-                    extended while reusing the same header and footer.`
-                  ),
+                    extended while reusing the same header and footer.`,
                   image: `${siteConfig.baseUrl}img/react.svg`,
-                  imageAlign: "top",
-                  imageAlt: "React",
-                  title: <translate>Built Using React</translate>
+                  imageAlign: 'top',
+                  imageAlt: 'React',
+                  title: <translate>Built Using React</translate>,
                 },
                 {
-                  content: (
-                    `[Localization](${siteConfig.baseUrl}docs/${this.props.language}/translation)
+                  content: `[Localization](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/translation)
                     comes pre-configured. Use [Crowdin](https://crowdin.com/) to translate your docs
-                    into over 70 languages.`
-                  ),
+                    into over 70 languages.`,
                   image: `${siteConfig.baseUrl}img/translation.svg`,
-                  imageAlign: "top",
-                  imageAlt: "Translation",
-                  title: <translate>Ready for Translations</translate>
-                }
+                  imageAlign: 'top',
+                  imageAlt: 'Translation',
+                  title: <translate>Ready for Translations</translate>,
+                },
               ]}
               layout="threeColumn"
             />
@@ -132,93 +137,109 @@ class Index extends React.Component {
               align="center"
               contents={[
                 {
-                  content: (
-                    `Support users on all versions of your project. Document
-                    [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning)
-                    helps you keep documentation in sync with project releases.`
-                  ),
+                  content: `Support users on all versions of your project. Document
+                    [versioning](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/versioning)
+                    helps you keep documentation in sync with project releases.`,
                   image: `${siteConfig.baseUrl}img/versioning.svg`,
-                  imageAlign: "top",
-                  imageAlt: "Document Versioning",
-                  title: <translate>Document Versioning</translate>
+                  imageAlign: 'top',
+                  imageAlt: 'Document Versioning',
+                  title: <translate>Document Versioning</translate>,
                 },
                 {
-                  content: (
-                    `Make it easy for your community to [find](${siteConfig.baseUrl}docs/${this.props.language}/search) what they need in your documentation.
-                    We proudly support [Algolia documentation search](https://www.algolia.com/).`
-                  ),
+                  content: `Make it easy for your community to [find](${
+                    siteConfig.baseUrl
+                  }docs/${
+                    this.props.language
+                  }/search) what they need in your documentation.
+                    We proudly support [Algolia documentation search](https://www.algolia.com/).`,
                   image: `${siteConfig.baseUrl}img/search.svg`,
-                  imageAlign: "top",
-                  imageAlt: "Document Search",
-                  title: <translate>Document Search</translate>
-                }
+                  imageAlign: 'top',
+                  imageAlt: 'Document Search',
+                  title: <translate>Document Search</translate>,
+                },
               ]}
               layout="twoColumn"
             />
           </Container>
-          <Container padding={["bottom", "top"]} background="light">
+          <Container padding={['bottom', 'top']} background="light">
             <GridBlock
               contents={[
                 {
-                  content: (
-                    `Get [up and running](${siteConfig.baseUrl}docs/${this.props.language}/site-creation)
-                    quickly without having to worry about site design.`
-                  ),
-                  imageAlign: "right",
+                  content: `Get [up and running](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/site-creation)
+                    quickly without having to worry about site design.`,
+                  imageAlign: 'right',
                   image: `${siteConfig.baseUrl}img/docusaurus_speed.svg`,
-                  imageAlt: "Docusaurus on a Scooter",
-                  title: <translate>Quick Setup</translate>
-                }
+                  imageAlt: 'Docusaurus on a Scooter',
+                  title: <translate>Quick Setup</translate>,
+                },
               ]}
               layout="twoColumn"
             />
           </Container>
-          <Container padding={["bottom", "top"]}>
+          <Container padding={['bottom', 'top']}>
             <GridBlock
               contents={[
                 {
-                  content: (
-                    `Make design and documentation changes by using the included
-                    [live server](${siteConfig.baseUrl}docs/${this.props.language}/site-preparation#verifying-installation).
-                    [Publish](${siteConfig.baseUrl}docs/${this.props.language}/publishing)
+                  content: `Make design and documentation changes by using the included
+                    [live server](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/site-preparation#verifying-installation).
+                    [Publish](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/publishing)
                     your site to GitHub pages or other static file hosts
                     manually, using a script, or with continuous integration
-                    like CircleCI.`
-                  ),
-                  imageAlign: "left",
+                    like CircleCI.`,
+                  imageAlign: 'left',
                   image: `${siteConfig.baseUrl}img/docusaurus_live.gif`,
-                  imageAlt: "Docusaurus Demo",
-                  title: <translate>Develop and Deploy</translate>
-                }
+                  imageAlt: 'Docusaurus Demo',
+                  title: <translate>Develop and Deploy</translate>,
+                },
               ]}
               layout="twoColumn"
             />
           </Container>
-          <Container padding={["bottom", "top"]} background="light">
+          <Container padding={['bottom', 'top']} background="light">
             <GridBlock
               contents={[
                 {
-                  content: (
-                    `Docusaurus currently provides support to help your website
-                    use [translations](${siteConfig.baseUrl}docs/${this.props.language}/translation),
-                    [search](${siteConfig.baseUrl}docs/${this.props.language}/search),
-                    and [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning),
-                    along with some other special [documentation markdown features](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown).
+                  content: `Docusaurus currently provides support to help your website
+                    use [translations](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/translation),
+                    [search](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/search),
+                    and [versioning](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/versioning),
+                    along with some other special [documentation markdown features](${
+                      siteConfig.baseUrl
+                    }docs/${this.props.language}/doc-markdown).
                     If you have ideas for useful features, feel free to
-                    contribute on [GitHub](https://github.com/facebook/docusaurus)!`
-                  ),
-                  imageAlign: "right",
+                    contribute on [GitHub](https://github.com/facebook/docusaurus)!`,
+                  imageAlign: 'right',
                   image: `${siteConfig.baseUrl}img/docusaurus_monochrome.svg`,
-                  imageAlt: "Monochromatic Docusaurus",
-                  title: <translate>Website Features</translate>
-                }
+                  imageAlt: 'Monochromatic Docusaurus',
+                  title: <translate>Website Features</translate>,
+                },
               ]}
               layout="twoColumn"
             />
           </Container>
           <div className="productShowcaseSection paddingBottom">
-            <h2><translate>Who's Using Docusaurus?</translate></h2>
-            <p><translate>Docusaurus is building websites for these projects...</translate></p>
+            <h2>
+              <translate>Who's Using Docusaurus?</translate>
+            </h2>
+            <p>
+              <translate>
+                Docusaurus is building websites for these projects...
+              </translate>
+            </p>
             <div className="logos">{showcase}</div>
             <div className="more-users">
               <a
@@ -229,7 +250,7 @@ class Index extends React.Component {
             </div>
           </div>
           <div className="testimonials">
-            <Container padding={["bottom", "top"]}>
+            <Container padding={['bottom', 'top']}>
               <GridBlock
                 align="center"
                 contents={[
@@ -237,26 +258,29 @@ class Index extends React.Component {
                     content:
                       "*I've helped open source many projects at Facebook and every one needed a website. They all had very similar constraints: the documentation should be written in markdown and be deployed via GitHub pages. None of the existing solutions were great, so I hacked my own and then forked it whenever we needed a new website. I’m so glad that Docusaurus now exists so that I don’t have to spend a week each time spinning up a new one.*",
                     image: `${siteConfig.baseUrl}img/christopher-chedeau.jpg`,
-                    imageAlign: "top",
+                    imageAlign: 'top',
                     imageAlt: 'Christopher "vjeux" Chedeau',
-                    title: 'Christopher "vjeux" Chedeau <br/><font size="2">Lead Prettier Developer</font>'
+                    title:
+                      'Christopher "vjeux" Chedeau <br/><font size="2">Lead Prettier Developer</font>',
                   },
                   {
                     content:
-                      "*Open source contributions to the React Native docs have skyrocketed after our move to Docusaurus. The docs are now hosted on a small repo in plain markdown, with none of the clutter that a typical static site generator would require. Thanks Slash!*",
+                      '*Open source contributions to the React Native docs have skyrocketed after our move to Docusaurus. The docs are now hosted on a small repo in plain markdown, with none of the clutter that a typical static site generator would require. Thanks Slash!*',
                     image: `${siteConfig.baseUrl}img/hector-ramos.png`,
-                    imageAlign: "top",
-                    imageAlt: "Hector Ramos",
-                    title: 'Hector Ramos <br/><font size="2">Lead React Native Advocate</font>'
+                    imageAlign: 'top',
+                    imageAlt: 'Hector Ramos',
+                    title:
+                      'Hector Ramos <br/><font size="2">Lead React Native Advocate</font>',
                   },
                   {
                     content:
-                      "*Docusaurus has been a great choice for the ReasonML family of projects. It makes our documentation consistent, i18n-friendly, easy to maintain, and friendly for new contributors.*",
+                      '*Docusaurus has been a great choice for the ReasonML family of projects. It makes our documentation consistent, i18n-friendly, easy to maintain, and friendly for new contributors.*',
                     image: `${siteConfig.baseUrl}img/ricky-vetter.jpg`,
-                    imageAlign: "top",
-                    imageAlt: "Ricky Vetter",
-                    title: 'Ricky Vetter <br/><font size="2">ReasonReact Developer</font>'
-                  }
+                    imageAlign: 'top',
+                    imageAlt: 'Ricky Vetter',
+                    title:
+                      'Ricky Vetter <br/><font size="2">ReasonReact Developer</font>',
+                  },
                 ]}
                 layout="threeColumn"
               />
diff --git a/website/pages/en/users.js b/website/pages/en/users.js
index c0ed68e4122a..edee6dc8d1df 100644
--- a/website/pages/en/users.js
+++ b/website/pages/en/users.js
@@ -31,7 +31,7 @@ class Users extends React.Component {
 
     return (
       <div className="mainContainer">
-        <Container padding={['bottom', 'top']}>
+        <Container padding={['bottom']}>
           <div className="showcaseSection">
             <div className="prose">
               <h1>

From 814647640642cc87a480291c70a9eea0136a8cc4 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 10 Jun 2018 17:04:44 -0700
Subject: [PATCH 2/8] Fix blog layout

---
 lib/core/BlogPageLayout.js |   1 +
 lib/core/BlogPost.js       |   2 +-
 lib/core/Site.js           |   2 +-
 lib/static/css/main.css    | 178 +++++++++++++++++--------------------
 4 files changed, 86 insertions(+), 97 deletions(-)

diff --git a/lib/core/BlogPageLayout.js b/lib/core/BlogPageLayout.js
index e3a815f4e713..f4ac6bbcd79d 100644
--- a/lib/core/BlogPageLayout.js
+++ b/lib/core/BlogPageLayout.js
@@ -31,6 +31,7 @@ class BlogPageLayout extends React.Component {
         title="Blog"
         language="en"
         config={this.props.config}
+        className="blog"
         metadata={{blog: true, blogListing: true}}>
         <div className="docMainWrapper wrapper">
           <BlogSidebar
diff --git a/lib/core/BlogPost.js b/lib/core/BlogPost.js
index 0bec4ae973ee..2ced66df9b2b 100644
--- a/lib/core/BlogPost.js
+++ b/lib/core/BlogPost.js
@@ -45,7 +45,7 @@ class BlogPost extends React.Component {
     const post = this.props.post;
     const className =
       'authorPhoto' +
-      (post.author && post.authorTitle ? ' authorPhoto-big' : '');
+      (post.author && post.authorTitle ? ' authorPhotoBig' : '');
     if (post.authorFBID) {
       return (
         <div className={className}>
diff --git a/lib/core/Site.js b/lib/core/Site.js
index 211245ee520c..99c14fd98422 100644
--- a/lib/core/Site.js
+++ b/lib/core/Site.js
@@ -65,7 +65,7 @@ class Site extends React.Component {
         <body
           className={classNames({
             [className]: className,
-            separateOnPageNav: this.props.config.onPageNav == 'separate',
+            separateOnPageNav: this.props.config.onPageNav === 'separate',
           })}>
           <HeaderNav
             config={this.props.config}
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 627370f360a5..5c302c564eec 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -981,16 +981,9 @@ pre code {
 
 /* GridBlock */
 .gridBlock {
-  margin: -5px 0;
   padding: 0;
 }
 
-.gridBlock .twoByGridBlock,
-.gridBlock .threeByGridBlock,
-.gridBlock .fourByGridBlock {
-  padding: 5px 0;
-}
-
 .gridBlock .twoByGridBlock img,
 .gridBlock .threeByGridBlock img,
 .gridBlock .fourByGridBlock img {
@@ -1001,6 +994,81 @@ pre code {
   clear: both;
 }
 
+@media only screen and (max-width: 735px) {
+  .gridBlock .fourByGridBlock {
+    box-sizing: border-box;
+    flex: 1 0 26%;
+  }
+}
+
+@media only screen and (min-width: 736px) {
+  .gridBlock {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .gridBlock > * {
+    margin: 0 12px;
+  }
+
+  .gridBlock > *:first-child {
+    margin-left: 0;
+  }
+
+  .gridBlock > *:last-child {
+    margin-right: 0;
+  }
+
+  .gridBlock .twoByGridBlock,
+  .gridBlock .threeByGridBlock,
+  .gridBlock .fourByGridBlock {
+    box-sizing: border-box;
+  }
+
+  .gridBlock .twoByGridBlock {
+    flex: 1 0 40%;
+  }
+
+  .gridBlock .threeByGridBlock {
+    flex: 1 0 26%;
+  }
+
+  .gridBlock .fourByGridBlock {
+    flex: 1 0 20%;
+  }
+
+  h2 + .gridBlock {
+    padding-top: 20px;
+  }
+}
+
+@media only screen and (min-width: 1400px) {
+  .gridBlock {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .gridBlock .twoByGridBlock,
+  .gridBlock .threeByGridBlock,
+  .gridBlock .fourByGridBlock {
+    box-sizing: border-box;
+  }
+
+  .gridBlock .twoByGridBlock {
+    flex: 1 0 40%;
+  }
+
+  .gridBlock .threeByGridBlock {
+    flex: 1 0 26%;
+  }
+
+  .gridBlock .fourByGridBlock {
+    flex: 1 0 20%;
+  }
+}
+
 .alignCenter {
   text-align: center;
 }
@@ -1156,64 +1224,6 @@ pre code {
   }
 }
 
-@media only screen and (min-width: 736px) {
-  .gridBlock {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: -10px;
-  }
-
-  .gridBlock .twoByGridBlock {
-    box-sizing: border-box;
-    flex: 1 0 40%;
-    padding: 10px;
-  }
-
-  .gridBlock .threeByGridBlock {
-    box-sizing: border-box;
-    flex: 1 0 26%;
-    padding: 10px;
-  }
-
-  .gridBlock .fourByGridBlock {
-    box-sizing: border-box;
-    flex: 1 0 20%;
-    padding: 10px;
-  }
-
-  h2 + .gridBlock {
-    padding-top: 20px;
-  }
-}
-
-@media only screen and (min-width: 1400px) {
-  .gridBlock {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: -10px;
-  }
-
-  .gridBlock .twoByGridBlock {
-    box-sizing: border-box;
-    flex: 1 0 40%;
-    padding: 10px 20px;
-  }
-
-  .gridBlock .threeByGridBlock {
-    box-sizing: border-box;
-    flex: 1 0 26%;
-    padding: 10px;
-  }
-
-  .gridBlock .fourByGridBlock {
-    box-sizing: border-box;
-    flex: 1 0 20%;
-    padding: 10px 20px;
-  }
-}
-
 /* Navigation Slider */
 .navigationSlider .navSlideout {
   cursor: pointer;
@@ -1917,16 +1927,16 @@ ul#languages li {
   }
 
   @media only screen and (min-width: 736px) {
-    .separateOnPageNav.doc .wrapper,
+    .separateOnPageNav .wrapper,
     .separateOnPageNav .headerWrapper.wrapper {
       max-width: 1400px;
     }
 
-    .doc.separateOnPageNav .toc {
+    .separateOnPageNav .toc {
       width: auto;
     }
 
-    .doc.separateOnPageNav.sideNavVisible .navPusher .mainContainer {
+    .separateOnPageNav.sideNavVisible .navPusher .mainContainer {
       flex: 1 auto;
       max-width: 100%;
       min-width: 0;
@@ -1956,6 +1966,10 @@ ul#languages li {
 }
 
 /* Blog */
+.blog .wrapper {
+  max-width: 1100px;
+}
+
 .blogContainer .posts .post {
   border-bottom: 1px solid #e0e0e0;
   border-radius: 3px;
@@ -1971,10 +1985,6 @@ ul#languages li {
   margin-top: 0;
 }
 
-.blogContainer .postHeader a {
-  text-decoration: none;
-}
-
 .blogContainer .postHeader p.post-meta {
   margin-bottom: 10px;
   padding: 0;
@@ -2003,7 +2013,7 @@ ul#languages li {
   width: 30px;
 }
 
-.blogContainer .postHeader .authorPhoto.authorPhoto-big {
+.blogContainer .postHeader .authorPhoto.authorPhotoBig {
   height: 50px;
   width: 50px;
 }
@@ -2031,23 +2041,6 @@ ul#languages li {
   padding-bottom: 5px;
 }
 
-.header-link {
-  margin-left: 0.2em;
-  opacity: 0;
-  position: absolute;
-  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
-  -moz-transition: opacity 0.2s ease-in-out 0.1s;
-  -ms-transition: opacity 0.2s ease-in-out 0.1s;
-}
-
-h2:hover .header-link,
-h3:hover .header-link,
-h4:hover .header-link,
-h5:hover .header-link,
-h6:hover .header-link {
-  opacity: 1;
-}
-
 /* Homepage */
 .container .wrapper .alignCenter h2 {
   text-align: center;
@@ -2112,11 +2105,6 @@ h6:hover .header-link {
 }
 
 @media only screen and (max-width: 735px) {
-  .gridBlock .fourByGridBlock {
-    box-sizing: border-box;
-    flex: 1 0 26%;
-    padding: 10px;
-  }
   .productShowcaseSection .logos img {
     max-height: 64px;
     padding: 20px;

From 0aa4b5acd5e86bf5770e7fc5fb8da026a9e3e846 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 10 Jun 2018 17:20:18 -0700
Subject: [PATCH 3/8] Fix

---
 lib/core/BlogPageLayout.js | 2 +-
 lib/core/BlogPostLayout.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/core/BlogPageLayout.js b/lib/core/BlogPageLayout.js
index f4ac6bbcd79d..588bf0c6d609 100644
--- a/lib/core/BlogPageLayout.js
+++ b/lib/core/BlogPageLayout.js
@@ -38,7 +38,7 @@ class BlogPageLayout extends React.Component {
             language={this.props.language}
             config={this.props.config}
           />
-          <Container className="mainContainer documentContainer postContainer blogContainer">
+          <Container className="mainContainer postContainer blogContainer">
             <div className="posts">
               {MetadataBlog.slice(page * perPage, (page + 1) * perPage).map(
                 post => {
diff --git a/lib/core/BlogPostLayout.js b/lib/core/BlogPostLayout.js
index 6997aaaa1de8..ffbf5aceb38a 100644
--- a/lib/core/BlogPostLayout.js
+++ b/lib/core/BlogPostLayout.js
@@ -113,7 +113,7 @@ class BlogPostLayout extends React.Component {
             current={post}
             config={this.props.config}
           />
-          <Container className="mainContainer documentContainer postContainer blogContainer">
+          <Container className="mainContainer postContainer blogContainer">
             <div className="lonePost">
               <BlogPost
                 post={post}
@@ -129,7 +129,7 @@ class BlogPostLayout extends React.Component {
               </a>
             </div>
           </Container>
-          {this.props.config.onPageNav == 'separate' && (
+          {this.props.config.onPageNav === 'separate' && (
             <nav className="onPageNav">
               <OnPageNav rawContent={this.props.children} />
             </nav>

From ed679b772aa635771d7ba95cde09a9b860a234e4 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 10 Jun 2018 18:13:50 -0700
Subject: [PATCH 4/8] Refactor onPageNav

---
 lib/core/BlogPostLayout.js | 12 ++++++++----
 lib/core/DocsLayout.js     |  8 ++++++--
 lib/core/Site.js           | 16 +++-------------
 lib/static/css/main.css    |  4 ++--
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/lib/core/BlogPostLayout.js b/lib/core/BlogPostLayout.js
index ffbf5aceb38a..04eb93004321 100644
--- a/lib/core/BlogPostLayout.js
+++ b/lib/core/BlogPostLayout.js
@@ -12,6 +12,7 @@ const Container = require('./Container.js');
 const Site = require('./Site.js');
 const OnPageNav = require('./nav/OnPageNav.js');
 const utils = require('./utils.js');
+const classNames = require('classnames');
 
 // used for entire blog posts, i.e., each written blog article with sidebar with site header/footer
 class BlogPostLayout extends React.Component {
@@ -84,7 +85,7 @@ class BlogPostLayout extends React.Component {
   }
 
   getDescription() {
-    var descLines = this.props.children.trim().split('\n');
+    const descLines = this.props.children.trim().split('\n');
     for (var i = 0; i < descLines.length; i++) {
       // Don't want blank lines or descriptions that are raw image rendering strings
       if (descLines[i] && !descLines[i].startsWith('![')) {
@@ -95,12 +96,15 @@ class BlogPostLayout extends React.Component {
   }
 
   render() {
-    let post = this.props.metadata;
+    const hasOnPageNav = this.props.config.onPageNav === 'separate';
+    const post = this.props.metadata;
     post.path = utils.getPath(post.path, this.props.config.cleanUrl);
     let blogSidebarTitleConfig = this.props.config.blogSidebarTitle || {};
     return (
       <Site
-        className="sideNavVisible"
+        className={classNames('sideNavVisible', {
+          separateOnPageNav: hasOnPageNav,
+        })}
         url={'blog/' + post.path}
         title={this.props.metadata.title}
         language={'en'}
@@ -129,7 +133,7 @@ class BlogPostLayout extends React.Component {
               </a>
             </div>
           </Container>
-          {this.props.config.onPageNav === 'separate' && (
+          {hasOnPageNav && (
             <nav className="onPageNav">
               <OnPageNav rawContent={this.props.children} />
             </nav>
diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
index 6314d3ba4426..ffe746e2e973 100644
--- a/lib/core/DocsLayout.js
+++ b/lib/core/DocsLayout.js
@@ -12,6 +12,7 @@ const DocsSidebar = require('./DocsSidebar.js');
 const OnPageNav = require('./nav/OnPageNav.js');
 const Site = require('./Site.js');
 const translation = require('../server/translation.js');
+const classNames = require('classnames');
 const path = require('path');
 
 // component used to generate whole webpage for docs, including sidebar/header/footer
@@ -39,10 +40,13 @@ class DocsLayout extends React.Component {
           this.props.metadata.localized_id
         ] || this.props.metadata.title
       : this.props.metadata.title;
+    const hasOnPageNav = this.props.config.onPageNav === 'separate';
     return (
       <Site
         config={this.props.config}
-        className="sideNavVisible doc"
+        className={classNames('sideNavVisible', {
+          separateOnPageNav: hasOnPageNav,
+        })}
         title={title}
         description={content.trim().split('\n')[0]}
         language={metadata.language}
@@ -102,7 +106,7 @@ class DocsLayout extends React.Component {
               )}
             </div>
           </Container>
-          {this.props.config.onPageNav == 'separate' && (
+          {hasOnPageNav && (
             <nav className="onPageNav">
               <OnPageNav rawContent={this.props.children} />
             </nav>
diff --git a/lib/core/Site.js b/lib/core/Site.js
index 99c14fd98422..2580e0b30676 100644
--- a/lib/core/Site.js
+++ b/lib/core/Site.js
@@ -43,17 +43,11 @@ class Site extends React.Component {
     }
 
     // We do not want a lang attribute for the html tag if we don't have a language set
-    let htmlElementProps;
+    const htmlElementProps = {};
     if (this.props.language) {
-      htmlElementProps = {
-        lang: this.props.language,
-      };
-    } else {
-      htmlElementProps = {};
+      htmlElementProps.lang = this.props.language;
     }
 
-    const className = this.props.className || '';
-
     return (
       <html {...htmlElementProps}>
         <Head
@@ -62,11 +56,7 @@ class Site extends React.Component {
           title={title}
           url={url}
         />
-        <body
-          className={classNames({
-            [className]: className,
-            separateOnPageNav: this.props.config.onPageNav === 'separate',
-          })}>
+        <body className={this.props.className}>
           <HeaderNav
             config={this.props.config}
             baseUrl={this.props.config.baseUrl}
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 5c302c564eec..9dc5adc67258 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1585,7 +1585,7 @@ ul#languages li {
     padding: 0 10px;
   }
 
-  .doc.separateOnPageNav .docsNavContainer {
+  .separateOnPageNav .docsNavContainer {
     flex: 0 0 240px;
   }
 }
@@ -1834,7 +1834,7 @@ ul#languages li {
 }
 
 @media only screen and (min-width: 736px) {
-  .doc.separateOnPageNav .navPusher .mainContainer {
+  .separateOnPageNav .navPusher .mainContainer {
     max-width: 70%;
     padding-top: 0;
   }

From 9d5c69ab12c4e0e0aa71bf9e5aa6aab371577467 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 16 Jun 2018 02:31:09 -0700
Subject: [PATCH 5/8] More fixes

---
 lib/static/css/main.css   | 108 +++++++++++++++++++-------------------
 website/pages/en/index.js |   8 +--
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 9dc5adc67258..2f7bfe256ed2 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -398,13 +398,13 @@ article iframe {
 }
 
 /* Links */
-a.anchor {
+.anchor {
   display: block;
   position: relative;
-  top: -62px;
+  top: -80px;
 }
 
-a.hash-link {
+.hash-link {
   line-height: 1;
   margin-left: -20px;
   opacity: 0;
@@ -412,12 +412,12 @@ a.hash-link {
   transition: opacity 0.3s;
 }
 
-a.hash-link:hover {
+.hash-link:hover {
   opacity: 1 !important;
   transition: none;
 }
 
-a.hash-link .hash-link-icon {
+.hash-link .hash-link-icon {
   vertical-align: middle;
 }
 
@@ -555,12 +555,6 @@ blockquote {
   margin-bottom: 16px;
 }
 
-@media only screen and (max-width: 1023px) {
-  .mainContainer .wrapper .post .postHeader {
-    margin-top: 48px; /* Height of mobile sidebar */
-  }
-}
-
 .mainContainer .wrapper .post .postHeaderTitle {
   margin-top: 0;
   padding: 0;
@@ -1346,13 +1340,13 @@ ul#languages li {
   width: 0;
 }
 
-@media only screen and (min-width: 736px) {
+@media only screen and (min-width: 1024px) {
   .navPusher {
     padding-top: 50px;
   }
 }
 
-.sliderActive .navPusher::after {
+.sliderActive .navPusher:after {
   height: 100%;
   opacity: 1;
   -webkit-transition: opacity 0.5s;
@@ -1428,7 +1422,7 @@ ul#languages li {
   }
 }
 
-@media only screen and (min-width: 736px) {
+@media only screen and (min-width: 1024px) {
   .navSearchWrapper {
     padding-left: 10px;
     position: relative;
@@ -1463,7 +1457,7 @@ ul#languages li {
     background: none;
     display: flex;
     flex-flow: row nowrap;
-    margin: 0 -10px;
+    margin: 0;
     padding: 0;
     width: auto;
   }
@@ -1499,18 +1493,26 @@ ul#languages li {
 }
 
 /* Docs */
-@media only screen and (min-width: 1024px) {
-  .docMainWrapper {
-    padding-top: 40px;
-  }
-}
-
 .docMainWrapper .wrapper {
   padding-left: 0;
   padding-right: 0;
   padding-top: 10px;
 }
 
+@media only screen and (min-width: 1024px) {
+  .docMainWrapper > * {
+    margin: 0 24px;
+  }
+
+  .docMainWrapper > *:first-child {
+    margin-left: 0;
+  }
+
+  .docMainWrapper > *:last-child {
+    margin-right: 0;
+  }
+}
+
 /* Docs Navigation */
 .docs-prevnext {
   margin: 20px 0;
@@ -1536,13 +1538,22 @@ ul#languages li {
 /* Docs Sidebar */
 .docsNavContainer {
   background: #fff;
-  height: 35px;
   left: 0;
   position: fixed;
   width: 100%;
   z-index: 100;
 }
 
+@media only screen and (min-width: 1024px) {
+  .docsNavContainer {
+    height: calc(100vh - 50px);
+    position: sticky;
+    overflow-y: scroll;
+    top: 50px; /* Height of navbar */
+    width: 300px;
+  }
+}
+
 .docsSliderActive.docsNavContainer {
   box-sizing: border-box;
   height: 100%;
@@ -1568,15 +1579,6 @@ ul#languages li {
 }
 
 @media only screen and (min-width: 1024px) {
-  .docsNavContainer {
-    background: none;
-    box-sizing: border-box;
-    height: auto;
-    overflow-y: auto;
-    position: relative;
-    width: 300px;
-  }
-
   .docsNavContainer .toc .navBreadcrumb {
     display: none;
   }
@@ -1596,17 +1598,23 @@ ul#languages li {
   color: #393939;
 }
 
-.toc section {
-  padding: 0;
-  position: relative;
-}
-
 @media only screen and (max-width: 735px) {
   a.anchor {
     top: -144px;
   }
 }
 
+@media only screen and (min-width: 1024px) {
+  .toc {
+    padding: 40px 0;
+  }
+}
+
+.toc section {
+  padding: 0;
+  position: relative;
+}
+
 .toc section .navGroups {
   display: none;
   padding: 48px 20px 60px;
@@ -1716,7 +1724,7 @@ ul#languages li {
 }
 
 .toc .toggleNav ul {
-  padding-left: 8px;
+  padding: 0 8px;
 }
 
 .docsSliderActive .toc .toggleNav ul {
@@ -1833,24 +1841,21 @@ ul#languages li {
   content: '';
 }
 
-@media only screen and (min-width: 736px) {
-  .separateOnPageNav .navPusher .mainContainer {
-    max-width: 70%;
-    padding-top: 0;
-  }
+.mainContainer {
+  padding: 48px 0;
+}
 
+@media only screen and (min-width: 1024px) {
   .docMainWrapper {
     display: flex;
     flex-flow: row nowrap;
-    margin-bottom: 50px;
   }
+
   .docMainWrapper .wrapper {
+    padding-top: 0;
     padding-left: 0;
     padding-right: 0;
   }
-  .docMainWrapper .wrapper {
-    padding-top: 0;
-  }
 }
 
 /* Inner page navigation */
@@ -1885,10 +1890,6 @@ ul#languages li {
 }
 
 @media only screen and (min-width: 1024px) {
-  .toc {
-    width: 240px;
-  }
-
   .toc section .navGroups {
     display: block;
     padding: 0px;
@@ -1901,7 +1902,7 @@ ul#languages li {
 }
 
 @supports ((position: -webkit-sticky) or (position: sticky)) {
-  @media only screen and (max-width: 735px) {
+  @media only screen and (max-width: 1023px) {
     .tocActive .onPageNav {
       background: #fff;
       bottom: 0;
@@ -1926,7 +1927,7 @@ ul#languages li {
     }
   }
 
-  @media only screen and (min-width: 736px) {
+  @media only screen and (min-width: 1024px) {
     .separateOnPageNav .wrapper,
     .separateOnPageNav .headerWrapper.wrapper {
       max-width: 1400px;
@@ -1940,7 +1941,6 @@ ul#languages li {
       flex: 1 auto;
       max-width: 100%;
       min-width: 0;
-      padding: 0 40px 50px;
     }
 
     .onPageNav {
@@ -2264,7 +2264,7 @@ ul#languages li {
   margin-bottom: 18px;
 }
 
-@media screen and (min-width: 736px) {
+@media screen and (min-width: 1024px) {
   .fixedHeaderContainer {
     flex-shrink: 0;
   }
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 24c6700b895e..88086a9e166d 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -90,7 +90,7 @@ class Index extends React.Component {
       <div>
         <HomeSplash language={language} />
         <div className="mainContainer">
-          <Container padding={['bottom', 'top']}>
+          <Container padding={['bottom', 'top']} background="light">
             <GridBlock
               align="center"
               contents={[
@@ -163,7 +163,7 @@ class Index extends React.Component {
               layout="twoColumn"
             />
           </Container>
-          <Container padding={['bottom', 'top']} background="light">
+          <Container padding={['bottom', 'top']}>
             <GridBlock
               contents={[
                 {
@@ -180,7 +180,7 @@ class Index extends React.Component {
               layout="twoColumn"
             />
           </Container>
-          <Container padding={['bottom', 'top']}>
+          <Container padding={['bottom', 'top']} background="light">
             <GridBlock
               contents={[
                 {
@@ -203,7 +203,7 @@ class Index extends React.Component {
               layout="twoColumn"
             />
           </Container>
-          <Container padding={['bottom', 'top']} background="light">
+          <Container padding={['bottom', 'top']}>
             <GridBlock
               contents={[
                 {

From a72cf81a9602a9c594d135b77b867a4db7938d46 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 16 Jun 2018 23:23:11 -0700
Subject: [PATCH 6/8] Fix docs nav

---
 docs/guides-blog.md        |   2 +-
 lib/core/BlogPostLayout.js |   2 +-
 lib/server/generate.js     |   7 -
 lib/server/server.js       |   4 -
 lib/static/css/main.css    | 455 ++++++++++++++++++-------------------
 website/sidebars.json      |   2 +-
 6 files changed, 221 insertions(+), 251 deletions(-)

diff --git a/docs/guides-blog.md b/docs/guides-blog.md
index f084381a7933..dcdd9546aade 100644
--- a/docs/guides-blog.md
+++ b/docs/guides-blog.md
@@ -1,5 +1,5 @@
 ---
-id: blog
+id: adding-blog
 title: Adding a Blog
 ---
 
diff --git a/lib/core/BlogPostLayout.js b/lib/core/BlogPostLayout.js
index 04eb93004321..8181e348cca4 100644
--- a/lib/core/BlogPostLayout.js
+++ b/lib/core/BlogPostLayout.js
@@ -41,7 +41,7 @@ class BlogPostLayout extends React.Component {
     const fbLike = this.props.config.facebookAppId && (
       <div className="blogSocialSectionItem">
         <div
-          className="fb-like"
+          className="fbLike"
           data-href={
             this.props.config.url +
             this.props.config.baseUrl +
diff --git a/lib/server/generate.js b/lib/server/generate.js
index dfe008e95eec..71ae22cdc992 100644
--- a/lib/server/generate.js
+++ b/lib/server/generate.js
@@ -362,13 +362,6 @@ async function execute() {
         const color = siteConfig.colors[key];
         cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
       });
-      const codeColor = color(siteConfig.colors.primaryColor)
-        .alpha(0.07)
-        .string();
-      cssContent = cssContent.replace(
-        new RegExp('\\$codeColor', 'g'),
-        codeColor
-      );
 
       if (siteConfig.fonts) {
         Object.keys(siteConfig.fonts).forEach(key => {
diff --git a/lib/server/server.js b/lib/server/server.js
index d0d94ab91f01..b4cca1f0e348 100644
--- a/lib/server/server.js
+++ b/lib/server/server.js
@@ -503,10 +503,6 @@ function execute(port, options) {
       const color = siteConfig.colors[key];
       cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
     });
-    const codeColor = color(siteConfig.colors.primaryColor)
-      .alpha(0.07)
-      .string();
-    cssContent = cssContent.replace(new RegExp('\\$codeColor', 'g'), codeColor);
 
     if (siteConfig.fonts) {
       Object.keys(siteConfig.fonts).forEach(key => {
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 2f7bfe256ed2..aed314f189e5 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -363,7 +363,7 @@ body {
   text-rendering: optimizeLegibility;
 }
 
-@media screen and (min-width: 736px) {
+@media only screen and (min-width: 736px) {
   body {
     display: flex;
     flex-direction: column;
@@ -457,10 +457,23 @@ blockquote {
   padding: 15px 30px 15px 15px;
 }
 
+/* Utils */
+.wrapper {
+  margin: 0px auto;
+  max-width: 1100px;
+  padding: 0 20px;
+}
+
 .wrapper blockquote > p:first-child {
   padding-top: 0;
 }
 
+.center {
+  display: block;
+  text-align: center;
+}
+/* End of Utils */
+
 /* Home Container */
 .homeContainer {
   text-align: center;
@@ -481,23 +494,28 @@ blockquote {
   margin-bottom: 0px;
 }
 
-.homeContainer .homeWrapper h1#project_title {
+.homeContainer .homeWrapper #project_title {
   font-size: 300%;
   letter-spacing: -0.08em;
   line-height: 1em;
   margin-bottom: 80px;
 }
 
-.homeContainer .homeWrapper h2#project_tagline {
+.homeContainer .homeWrapper #project_tagline {
   font-size: 200%;
   letter-spacing: -0.04em;
   line-height: 1em;
 }
 
-.wrapper {
-  margin: 0px auto;
-  max-width: 1100px;
-  padding: 0 20px;
+@media only screen and (min-width: 736px) {
+  .homeContainer .homeWrapper {
+    position: relative;
+  }
+
+  .homeContainer .homeWrapper #inner {
+    max-width: 600px;
+    padding-right: 40px;
+  }
 }
 
 .projectLogo {
@@ -514,20 +532,88 @@ blockquote {
   margin: 40px 0;
 }
 
-.fb-like {
-  display: block;
-  margin-bottom: 20px;
-  width: 100%;
+.projectTitle {
+  color: $primaryColor;
+  font-size: 250%;
+  line-height: 1em;
 }
 
-.center {
+.projectTitle > small {
   display: block;
-  text-align: center;
+  font-weight: normal;
+  font-size: 50%;
+  line-height: 1em;
+  margin: 0.7em 0 1.3em;
 }
 
+@media only screen and (min-width: 480px) {
+  .projectTitle {
+    font-size: 300%;
+    margin: 0.3em 0;
+  }
+
+  .projectLogo img {
+    height: 200px;
+    margin-bottom: 10px;
+  }
+
+  .homeContainer .homeWrapper {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+@media only screen and (min-width: 736px) {
+  .homeContainer .homeWrapper {
+    position: relative;
+  }
+
+  .homeContainer .homeWrapper #inner {
+    max-width: 600px;
+    padding-right: 40px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .homeContainer .homeWrapper #inner {
+    max-width: 750px;
+  }
+
+  .homeContainer .homeWrapper .projectLogo {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    justify-content: flex-end;
+    left: 0;
+    padding: 2em 100px 4em;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .homeContainer .homeWrapper .projectLogo img {
+    height: 100%;
+    max-height: 250px;
+  }
+}
+
+@media only screen and (min-width: 1500px) {
+  .homeContainer .homeWrapper #inner {
+    max-width: 1100px;
+    padding-bottom: 40px;
+    padding-top: 40px;
+  }
+
+  .wrapper {
+    max-width: 1400px;
+  }
+}
+/* End of Home Container */
+
+/* Main Container */
 .mainContainer {
   flex: 1 1 auto;
   max-width: 100%;
+  padding: 48px 0;
 }
 
 .mainContainer .wrapper {
@@ -602,43 +688,7 @@ blockquote {
   display: none;
 }
 
-.projectTitle {
-  font-size: 250%;
-  line-height: 1em;
-}
-
-.projectTitle > small {
-  display: block;
-  font-size: 50%;
-  font-weight: 300;
-  line-height: 1em;
-  margin: 0.7em 0 1.3em;
-}
-
 @media only screen and (min-width: 480px) {
-  h1#project_title {
-    font-size: 500%;
-  }
-
-  .projectTitle {
-    font-size: 300%;
-    margin: 0.3em 0;
-  }
-
-  .projectTitle > small {
-    font-size: 50%;
-  }
-
-  .projectLogo img {
-    height: 200px;
-    margin-bottom: 10px;
-  }
-
-  .homeContainer .homeWrapper {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
   .mainContainer .wrapper .post .docPagination a .pagerLabel {
     display: none;
   }
@@ -649,18 +699,7 @@ blockquote {
 }
 
 @media only screen and (min-width: 736px) {
-  .homeContainer .homeWrapper {
-    position: relative;
-  }
-
-  .homeContainer .homeWrapper #inner {
-    box-sizing: border-box;
-    max-width: 600px;
-    padding-right: 40px;
-  }
-
   .mainContainer .wrapper .post {
-    box-sizing: border-box;
     display: block;
   }
 
@@ -672,45 +711,11 @@ blockquote {
     width: 100%;
   }
 }
-
-@media only screen and (min-width: 1200px) {
-  .homeContainer .homeWrapper #inner {
-    max-width: 750px;
-  }
-
-  .homeContainer .homeWrapper .projectLogo {
-    align-items: center;
-    bottom: 0;
-    display: flex;
-    justify-content: flex-end;
-    left: 0;
-    padding: 2em 100px 4em;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-  .homeContainer .homeWrapper .projectLogo img {
-    height: 100%;
-    max-height: 250px;
-  }
-}
-
-@media only screen and (min-width: 1500px) {
-  .homeContainer .homeWrapper #inner {
-    max-width: 1100px;
-    padding-bottom: 40px;
-    padding-top: 40px;
-  }
-
-  .wrapper {
-    max-width: 1400px;
-  }
-}
+/* End of Main Container */
 
 /* Navbar */
 .fixedHeaderContainer {
   background: $primaryColor;
-  box-sizing: border-box;
   color: #fff;
   min-height: 50px;
   padding: 8px 0;
@@ -719,6 +724,12 @@ blockquote {
   z-index: 9999;
 }
 
+@media only screen and (min-width: 1024px) {
+  .fixedHeaderContainer {
+    flex-shrink: 0;
+  }
+}
+
 .fixedHeaderContainer a {
   align-items: center;
   border: 0;
@@ -768,6 +779,7 @@ blockquote {
     display: none !important;
   }
 }
+/* End of Navbar */
 
 /* Promo section */
 .promoSection {
@@ -807,6 +819,7 @@ blockquote {
   margin-left: 2px;
   margin-top: 5px;
 }
+/* End of Promo Section */
 
 /* Search */
 input[type='search'] {
@@ -824,7 +837,7 @@ input[type='search'] {
   top: 15px;
 }
 
-.navSearchWrapper::before {
+.navSearchWrapper:before {
   border: 3px solid #e5e5e5;
   border-radius: 50%;
   content: ' ';
@@ -838,7 +851,7 @@ input[type='search'] {
   z-index: 1;
 }
 
-.navSearchWrapper::after {
+.navSearchWrapper:after {
   background: #e5e5e5;
   content: ' ';
   height: 7px;
@@ -936,48 +949,21 @@ input::-moz-placeholder {
 input::placeholder {
   color: #e5e5e5;
 }
-/*
-code {
-  background-color: $codeColor;
-  border-radius: 0.3em;
-  box-shadow: 2px 0 $codeColor, -2px 0 $codeColor;
-  color: inherit;
-  font-family: 'SFMono-Regular', source-code-pro, Menlo, Monaco, Consolas,
-    'Roboto Mono', 'Droid Sans Mono', 'Liberation Mono', Consolas, 'Courier New',
-    Courier, monospace;
-  padding: 2px 0;
-  word-break: break-word;
-}
-
-pre code {
-  display: block;
-  font-size: 13px;
-  margin: 20px 0;
-  overflow-x: auto;
-}*/
 
 .hljs {
   padding: 1.25rem 1.5rem;
 }
-
-/* GitHub */
-.edit-page-link {
-  float: right;
-  font-size: 10px;
-  font-weight: normal;
-  text-decoration: none;
-}
-@media only screen and (max-width: 735px) {
-  .edit-page-link {
-    display: none;
-  }
-}
+/* End of Search */
 
 /* GridBlock */
 .gridBlock {
   padding: 0;
 }
 
+.gridBlock > * {
+  box-sizing: border-box;
+}
+
 .gridBlock .twoByGridBlock img,
 .gridBlock .threeByGridBlock img,
 .gridBlock .fourByGridBlock img {
@@ -990,7 +976,6 @@ pre code {
 
 @media only screen and (max-width: 735px) {
   .gridBlock .fourByGridBlock {
-    box-sizing: border-box;
     flex: 1 0 26%;
   }
 }
@@ -1014,12 +999,6 @@ pre code {
     margin-right: 0;
   }
 
-  .gridBlock .twoByGridBlock,
-  .gridBlock .threeByGridBlock,
-  .gridBlock .fourByGridBlock {
-    box-sizing: border-box;
-  }
-
   .gridBlock .twoByGridBlock {
     flex: 1 0 40%;
   }
@@ -1043,24 +1022,6 @@ pre code {
     flex-direction: row;
     flex-wrap: wrap;
   }
-
-  .gridBlock .twoByGridBlock,
-  .gridBlock .threeByGridBlock,
-  .gridBlock .fourByGridBlock {
-    box-sizing: border-box;
-  }
-
-  .gridBlock .twoByGridBlock {
-    flex: 1 0 40%;
-  }
-
-  .gridBlock .threeByGridBlock {
-    flex: 1 0 26%;
-  }
-
-  .gridBlock .fourByGridBlock {
-    flex: 1 0 20%;
-  }
 }
 
 .alignCenter {
@@ -1122,11 +1083,27 @@ pre code {
 .imageAlignLeft .blockImage {
   margin-right: 40px;
 }
+/* End of GridBlock */
 
+/* Start of Container */
 .container .gridBlock .blockContent p {
   padding: 0;
 }
 
+.container .wrapper .alignCenter h2 {
+  text-align: center;
+}
+
+.container .wrapper .imageAlignSide h2 {
+  text-align: left;
+}
+
+.container .wrapper .imageAlignSide p {
+  margin: 0;
+  margin-bottom: 40px;
+  max-width: 560px;
+}
+
 .highlightBackground {
   background: rgba(153, 66, 79, 0.7);
   color: #fff;
@@ -1169,8 +1146,8 @@ pre code {
 .container.darkBackground .wrapper h3,
 .container.darkBackground .wrapper h4,
 .container.darkBackground .wrapper h5 {
-  border-color: white;
-  color: white;
+  border-color: #fff;
+  color: #fff;
 }
 
 .container.paddingAll {
@@ -1212,11 +1189,12 @@ pre code {
     padding-left: 20px;
   }
 
-  .responsiveList .blockContent::before {
+  .responsiveList .blockContent:before {
     content: '\2022';
     position: absolute;
   }
 }
+/* End of Container */
 
 /* Navigation Slider */
 .navigationSlider .navSlideout {
@@ -1288,7 +1266,9 @@ pre code {
 .navigationSlider .slidingNav ul li.siteNavGroupActive a {
   background: $primaryColor;
 }
+/* End of Navigation Slider */
 
+/* Languages Dropdown */
 .languages-icon {
   width: 20px;
 }
@@ -1307,7 +1287,7 @@ pre code {
   display: none;
 }
 
-ul#languages-dropdown-items {
+#languages-dropdown-items {
   background-color: $primaryColor;
   display: flex;
   flex-direction: column;
@@ -1315,7 +1295,7 @@ ul#languages-dropdown-items {
   pointer-events: all;
 }
 
-ul#languages li {
+#languages li {
   display: block;
 }
 
@@ -1327,7 +1307,7 @@ ul#languages li {
   z-index: 99;
 }
 
-.navPusher::after {
+.navPusher:after {
   background: rgba(0, 0, 0, 0.4);
   content: '';
   height: 0;
@@ -1340,10 +1320,19 @@ ul#languages li {
   width: 0;
 }
 
-@media only screen and (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .navPusher {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: calc(100vh - 50px);
     padding-top: 50px;
   }
+
+  /* those make the footer sticky and work even in IE 11 */
+  .navPusher > :first-child {
+    flex-grow: 1;
+  }
 }
 
 .sliderActive .navPusher:after {
@@ -1356,11 +1345,11 @@ ul#languages li {
 }
 
 @media only screen and (max-width: 735px) {
-  .reactNavSearchWrapper::before {
+  .reactNavSearchWrapper:before {
     left: 6px;
   }
 
-  .reactNavSearchWrapper::after {
+  .reactNavSearchWrapper:after {
     left: 15px;
   }
 
@@ -1415,7 +1404,7 @@ ul#languages li {
     top: 50px;
   }
 
-  ul#languages-dropdown-items {
+  #languages-dropdown-items {
     background-color: $primaryColor;
     display: flex;
     flex-direction: row;
@@ -1492,7 +1481,7 @@ ul#languages li {
   }
 }
 
-/* Docs */
+/* Start of Docs Main */
 .docMainWrapper .wrapper {
   padding-left: 0;
   padding-right: 0;
@@ -1500,6 +1489,10 @@ ul#languages li {
 }
 
 @media only screen and (min-width: 1024px) {
+  .docMainWrapper {
+    width: 100%;
+  }
+
   .docMainWrapper > * {
     margin: 0 24px;
   }
@@ -1511,11 +1504,30 @@ ul#languages li {
   .docMainWrapper > *:last-child {
     margin-right: 0;
   }
+
+  .docMainWrapper .mainContainer {
+    width: 0; /* Hack needed for flex-basis to work properly. */
+  }
+}
+
+.edit-page-link {
+  float: right;
+  font-size: 10px;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+@media only screen and (max-width: 735px) {
+  .edit-page-link {
+    display: none;
+  }
 }
+/* End of Docs Main */
 
-/* Docs Navigation */
+/* Start of Docs Navigation */
 .docs-prevnext {
   margin: 20px 0;
+  overflow: auto; /* clearfix */
 }
 
 .docs-next {
@@ -1530,27 +1542,28 @@ ul#languages li {
   .docs-prevnext {
     height: 40px;
   }
-  .docs-prev {
-    display: none;
-  }
 }
+/* End of Docs Navigation */
 
-/* Docs Sidebar */
-.docsNavContainer {
-  background: #fff;
-  left: 0;
-  position: fixed;
-  width: 100%;
-  z-index: 100;
+/* Start of Docs Sidebar */
+@media only screen and (max-width: 1023px) {
+  .docsNavContainer {
+    background: #fff;
+    left: 0;
+    position: fixed;
+    width: 100%;
+    z-index: 100;
+  }
 }
 
 @media only screen and (min-width: 1024px) {
   .docsNavContainer {
+    flex: 0 0 240px;
     height: calc(100vh - 50px);
+    position: -webkit-sticky;
     position: sticky;
     overflow-y: scroll;
     top: 50px; /* Height of navbar */
-    width: 300px;
   }
 }
 
@@ -1599,7 +1612,7 @@ ul#languages li {
 }
 
 @media only screen and (max-width: 735px) {
-  a.anchor {
+  .anchor {
     top: -144px;
   }
 }
@@ -1650,7 +1663,7 @@ ul#languages li {
   z-index: 1;
 }
 
-.toc .toggleNav .navToggle::after {
+.toc .toggleNav .navToggle:after {
   transform: rotate(-45deg);
 }
 
@@ -1680,8 +1693,8 @@ ul#languages li {
   margin-top: 2px;
 }
 
-.docsSliderActive .toc .toggleNav .navToggle::before,
-.docsSliderActive .toc .toggleNav .navToggle::after {
+.docsSliderActive .toc .toggleNav .navToggle:before,
+.docsSliderActive .toc .toggleNav .navToggle:after {
   border-width: 8px 0;
   height: 0;
   margin-top: -8px;
@@ -1795,8 +1808,8 @@ ul#languages li {
 }
 
 .icon-toc,
-.icon-toc::before,
-.icon-toc::after {
+.icon-toc:before,
+.icon-toc:after {
   background-color: currentColor;
   border: 1px solid currentColor;
   border-radius: 50%;
@@ -1805,18 +1818,18 @@ ul#languages li {
   width: 4px;
 }
 
-.icon-toc::before,
-.icon-toc::after {
+.icon-toc:before,
+.icon-toc:after {
   content: '';
   position: absolute;
 }
 
-.icon-toc::before {
+.icon-toc:before {
   left: -1px;
   top: -7px;
 }
 
-.icon-toc::after {
+.icon-toc:after {
   left: -1px;
   top: 5px;
 }
@@ -1828,7 +1841,7 @@ ul#languages li {
   width: 3px;
 }
 
-.tocActive .icon-toc::before {
+.tocActive .icon-toc:before {
   border-radius: 0;
   height: 3px;
   left: 50%;
@@ -1837,14 +1850,10 @@ ul#languages li {
   width: 16px;
 }
 
-.tocActive .icon-toc::after {
+.tocActive .icon-toc:after {
   content: '';
 }
 
-.mainContainer {
-  padding: 48px 0;
-}
-
 @media only screen and (min-width: 1024px) {
   .docMainWrapper {
     display: flex;
@@ -2041,21 +2050,13 @@ ul#languages li {
   padding-bottom: 5px;
 }
 
-/* Homepage */
-.container .wrapper .alignCenter h2 {
-  text-align: center;
-}
-
-.container .wrapper .imageAlignSide h2 {
-  text-align: left;
-}
-
-.container .wrapper .imageAlignSide p {
-  margin: 0;
-  margin-bottom: 40px;
-  max-width: 560px;
+.fbLike {
+  display: block;
+  margin-bottom: 20px;
+  width: 100%;
 }
 
+/* Homepage */
 .more-users {
   margin: 0 auto;
   max-width: 560px;
@@ -2112,7 +2113,7 @@ ul#languages li {
   }
 }
 
-/* Showcase */
+/* Start of Showcase */
 .showcaseSection {
   margin: 0 auto;
   max-width: 900px;
@@ -2149,8 +2150,9 @@ ul#languages li {
     width: 64px;
   }
 }
+/* End of Showcase */
 
-/* Footer */
+/* Start of Footer */
 .nav-footer {
   background: #20232a;
   border: none;
@@ -2165,6 +2167,12 @@ ul#languages li {
   position: relative;
 }
 
+@media only screen and (min-width: 1024px) {
+  .nav-footer {
+    flex-shrink: 0;
+  }
+}
+
 .nav-footer .sitemap {
   display: flex;
   justify-content: space-between;
@@ -2191,7 +2199,7 @@ ul#languages li {
   opacity: 1;
 }
 
-@media screen and (max-width: 735px) {
+@media only screen and (max-width: 735px) {
   .nav-footer .sitemap {
     display: flex;
     flex-direction: column;
@@ -2263,31 +2271,4 @@ ul#languages li {
 .nav-footer .footerSection {
   margin-bottom: 18px;
 }
-
-@media screen and (min-width: 1024px) {
-  .fixedHeaderContainer {
-    flex-shrink: 0;
-  }
-
-  .navPusher {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    min-height: calc(100vh - 50px);
-    padding-top: 50px;
-  }
-
-  .docMainWrapper {
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  /* those make the footer sticky and work even in IE 11 */
-  .navPusher > :first-child {
-    flex-grow: 1;
-  }
-
-  .nav-footer {
-    flex-shrink: 0;
-  }
-}
+/* End of Footer */
diff --git a/website/sidebars.json b/website/sidebars.json
index 0f3f0d6ee983..2542af519de5 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -7,7 +7,7 @@
       "publishing"
     ],
     "Guides": [
-      "blog",
+      "adding-blog",
       "custom-pages",
       "search",
       "navigation",

From ff8e1aec308d3ef39ccb95a8ad7daefb651e9ab4 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 17 Jun 2018 00:02:27 -0700
Subject: [PATCH 7/8] Use alternative hack

---
 lib/static/css/main.css | 4 ++--
 website/core/Footer.js  | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index aed314f189e5..94f1666d6462 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1506,7 +1506,7 @@ input::placeholder {
   }
 
   .docMainWrapper .mainContainer {
-    width: 0; /* Hack needed for flex-basis to work properly. */
+    min-width: 0; /* Hack needed for flex-basis to work properly. */
   }
 }
 
@@ -2268,7 +2268,7 @@ input::placeholder {
   padding: 5px 0;
 }
 
-.nav-footer .footerSection {
+.nav-footer > div {
   margin-bottom: 18px;
 }
 /* End of Footer */
diff --git a/website/core/Footer.js b/website/core/Footer.js
index a3067f341539..2b96aee3aaee 100644
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -113,7 +113,6 @@ class Footer extends React.Component {
           </div>
           <SocialFooter config={this.props.config} />
         </section>
-
         <a
           href="https://code.facebook.com/projects/"
           target="_blank"

From 1883481ac77867933306a733c00c557d4e9f798a Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 17 Jun 2018 00:19:19 -0700
Subject: [PATCH 8/8] Tweak clearfix

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

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 94f1666d6462..7e91195dafa4 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1527,7 +1527,12 @@ input::placeholder {
 /* Start of Docs Navigation */
 .docs-prevnext {
   margin: 20px 0;
-  overflow: auto; /* clearfix */
+}
+
+.docs-prevnext:after {
+  clear: both;
+  content: ' ';
+  display: table; /* clearfix */
 }
 
 .docs-next {
@@ -2206,6 +2211,10 @@ input::placeholder {
     margin: 0 2em 3em;
     width: calc(100% - 4em);
   }
+
+  .nav-footer .sitemap > div {
+    margin-bottom: 18px;
+  }
 }
 
 .nav-footer .sitemap a {
@@ -2267,8 +2276,4 @@ input::placeholder {
 .nav-footer .social {
   padding: 5px 0;
 }
-
-.nav-footer > div {
-  margin-bottom: 18px;
-}
 /* End of Footer */