CSS revamp - Improve typography and overall styling

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.

docs/guides-blog.md

@@ -1,5 +1,5 @@
 ---
-id: blog
+id: adding-blog
 title: Adding a Blog
 ---
 

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" />

lib/core/BlogPageLayout.js

@@ -31,13 +31,14 @@ 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
             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 => {

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}>
@@ -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 +

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>

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>

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>

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}

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;

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 => {

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 => {