CSS revamp - Improve typography and overall styling (#757)

* Improve CSS code

* Fix blog layout

* Fix

* Refactor onPageNav

* More fixes

* Fix docs nav

* Use alternative hack

* Tweak clearfix

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 {
@@ -40,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 +
@@ -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'}
@@ -113,7 +117,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 +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>