From 5eb79b17c39caed02e841f83ee87bf2e2c603b91 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 10 Oct 2019 01:25:11 -0700
Subject: [PATCH] misc(v2): change blog title size (#1821)

* misc(v2): change blog title size

* misc(v2): change blog title size
---
 CHANGELOG-2.x.md                                       |  1 +
 .../src/theme/BlogPostItem/index.js                    |  5 ++++-
 .../src/theme/BlogPostItem/styles.module.css           | 10 ++++++++++
 .../src/theme/BlogTagsPostsPage/index.js               |  4 +++-
 4 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css

diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
index b35ea12eb8..feeec0b5f1 100644
--- a/CHANGELOG-2.x.md
+++ b/CHANGELOG-2.x.md
@@ -6,6 +6,7 @@
 - Docs sidebar can now be more than one level deep, theoretically up to infinity
 - Collapsible docs sidebar!
 - More documentation ...
+- Slight tweaks to the Blog components - blog title is larger now
 
 ## 2.0.0-alpha.25
 
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
index 82cdbea782..80c0dba90c 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
@@ -6,11 +6,14 @@
  */
 
 import React from 'react';
+import classnames from 'classnames';
 import {MDXProvider} from '@mdx-js/react';
 
 import Link from '@docusaurus/Link';
 import MDXComponents from '@theme/MDXComponents';
 
+import styles from './styles.module.css';
+
 function BlogPostItem(props) {
   const {children, frontMatter, metadata, truncated} = props;
   const {date, permalink, tags} = metadata;
@@ -41,7 +44,7 @@ function BlogPostItem(props) {
 
     return (
       <header>
-        <h1 className="margin-bottom--xs">
+        <h1 className={classnames('margin-bottom--sm', styles.blogPostTitle)}>
           <Link to={permalink}>{title}</Link>
         </h1>
         <div className="margin-bottom--sm">
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css
new file mode 100644
index 0000000000..bda763c7ad
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.blogPostTitle {
+  font-size: 3rem;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js
index 774fb3d5d4..5ae4c4dd1c 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.js
@@ -29,7 +29,9 @@ function BlogTagsPostPage(props) {
             <div className="margin-vert--xl">
               {items.map(
                 ({content: BlogPostContent, metadata: blogPostMetadata}) => (
-                  <div key={blogPostMetadata.permalink}>
+                  <div
+                    className="margin-vert--xl"
+                    key={blogPostMetadata.permalink}>
                     <BlogPostItem
                       frontMatter={BlogPostContent.frontMatter}
                       metadata={blogPostMetadata}