fix: abnormal display of dividing line in blog (apache#556)

1502shivam-singh · Sep 19, 2021 · bd67001 · bd67001
1 parent f617a4c
commit bd67001
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/website/src/theme/BlogPostItem/index.js b/website/src/theme/BlogPostItem/index.js
@@ -73,10 +73,10 @@ function BlogPostItem(props) {
               )}
             </div>
           </div>
-          <div className={`margin-bottom--md ${styles.line}`}>
+          {author && <div className={`margin-bottom--md ${styles.line}`}>
             <div></div>
-          </div>
-          <div className={`margin-bottom--md ${styles.headerDate}`}>
+          </div>}
+          <div className={`margin-bottom--md ${styles.headerDate} ${author && styles.marginLeft}`}>
             <DateLogo />
             <time dateTime={date} className={styles.blogPostDate}>
               {formattedDate}
@@ -88,9 +88,9 @@ function BlogPostItem(props) {
               )}
             </time>
           </div>
-          <div className={`margin-bottom--md ${styles.line}`}>
+          {tags.length > 0 && <div className={`margin-bottom--md ${styles.line}`}>
             <div></div>
-          </div>
+          </div>}
           <div className={`margin-bottom--md`}>
             {tags.length > 0 && (
               <div className={`col ${styles.headerTags}`}>

diff --git a/website/src/theme/BlogPostItem/styles.module.css b/website/src/theme/BlogPostItem/styles.module.css
@@ -12,6 +12,9 @@
 .headerDate {
   display: flex;
   align-items: center;
+}
+
+.marginLeft {
   margin-left: 16px;
 }