feat(v2): doc page layout changes (#1580)

* feat(v2): doc page layout changes

- Add a max-width to main content
- Use 17px font size on large screen
- Add a border-right to sidebar

packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.js

@@ -23,7 +23,7 @@ function BlogListPaginator(props) {
           </Link>
         )}
       </div>
-      <div className="pagination-nav__item pagination-nav__item-next">
+      <div className="pagination-nav__item pagination-nav__item--next">
         {nextPage && (
           <Link className="pagination-nav__link" to={nextPage}>
             <h4 className="pagination-nav__link--label">

packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css

@@ -5,6 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.docItemContainer {
+  margin: 0 auto;
+  max-width: 45em;
+}
+
 @media (min-width: 997px) {
   .docItemContainer {
     padding-left: 2rem;

packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css

@@ -15,6 +15,10 @@
   }
 }
 
+.sidebar {
+  border-right: 1px solid var(--ifm-contents-border-color);
+}
+
 .sidebarMenuIcon {
   vertical-align: middle;
 }

website/css/custom.css

@@ -14,3 +14,16 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
 }
+
+@media screen and (max-width: 996px) {
+  :root {
+    --ifm-font-size-base: 15px;
+  }
+}
+
+@media screen and (min-width: 997px) {
+  :root {
+    --ifm-font-size-base: 17px;
+  }
+}
+