style: update blog page design

packages/docusaurus-playground/rlog/2019-07-19-p2p-data-sync-for-mobile.mdx

@@ -9,6 +9,7 @@ authors:
 published: true
 slug: p2p-data-sync-for-mobile
 categories: research
+tags: ['Release', 'P2P']
 
 toc_min_heading_level: 2
 toc_max_heading_level: 5

packages/docusaurus-playground/rlog/2019-08-02-vac-overview.mdx

@@ -7,6 +7,7 @@ authors: amir
 published: true
 slug: vac-overview
 categories: research
+tags: ['Something']
 ---
 
 <!--truncate-->

packages/logos-docusaurus-theme/src/client/css/blog.scss

@@ -94,8 +94,8 @@
 .blog-wrapper {
   main {
     article {
-      margin-bottom: 40px !important;
-      padding-bottom: 39px;
+      margin-bottom: 34px !important;
+      padding-bottom: 34px;
 
       border-bottom: 1px solid rgb(var(--lsd-border-primary));
 

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/index.tsx

@@ -50,11 +50,18 @@ function Date({
 export default function BlogPostItemHeaderInfo({
   className,
 }: Props): JSX.Element {
-  const { metadata } = useBlogPost()
+  const { metadata, isBlogPostPage } = useBlogPost()
   const { date, formattedDate, readingTime } = metadata
 
   return (
-    <div className={clsx(styles.container, 'margin-vert--md', className)}>
+    <div
+      className={clsx(
+        styles.container,
+        'margin-vert--md',
+        !isBlogPostPage && styles.blogContainer,
+        className,
+      )}
+    >
       <Date date={date} formattedDate={formattedDate} />
       <BlogPostItemHeaderAuthors className={styles.authors} />
       {typeof readingTime !== 'undefined' && (

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss

@@ -6,6 +6,10 @@
   @include lsd.typography('body2');
 }
 
+.blogContainer {
+  margin-top: 8px !important;
+}
+
 .container > div {
   display: inline-block;
 }

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/index.tsx

@@ -3,33 +3,21 @@ import clsx from 'clsx'
 import Link from '@docusaurus/Link'
 import { useBlogPost } from '@docusaurus/theme-common/internal'
 import styles from './styles.module.css'
-import { Typography } from '@acid-info/lsd-react'
 
 export default function BlogPostItemHeaderTitle({ className }) {
   const { metadata, isBlogPostPage } = useBlogPost()
-  //@ts-ignore
-  const { permalink, title, frontMatter } = metadata
+  const { permalink, title } = metadata
   const TitleHeading = isBlogPostPage ? 'h1' : 'h2'
 
   return (
-    <>
-      <TitleHeading
-        className={clsx(styles.title, className)}
-        itemProp="headline"
-      >
-        {isBlogPostPage ? (
-          title
-        ) : (
-          <Link itemProp="url" to={permalink}>
-            {title}
-          </Link>
-        )}
-      </TitleHeading>
-      {frontMatter?.description && (
-        <Typography variant="h6" className={styles.description}>
-          {frontMatter.description}
-        </Typography>
+    <TitleHeading className={clsx(styles.title, className)} itemProp="headline">
+      {isBlogPostPage ? (
+        title
+      ) : (
+        <Link itemProp="url" to={permalink}>
+          {title}
+        </Link>
       )}
-    </>
+    </TitleHeading>
   )
 }

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.css

@@ -2,7 +2,11 @@
   font-size: 3rem;
 }
 
-.description {
+.blogDescription {
+  margin-top: 16px;
+}
+
+.blogPostDescription {
   margin-top: 12px;
 }
 

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx

@@ -5,10 +5,13 @@ import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title'
 import React from 'react'
 import { useBlogPluginData } from '../../../lib/useBlogPluginData'
 import { BreadcrumbsBase } from '../../DocBreadcrumbs/index'
+import { Typography } from '@acid-info/lsd-react'
+import styles from './Title/styles.module.css'
+import clsx from 'clsx'
 
 export default function BlogPostItemHeader(): JSX.Element {
   const {
-    metadata: { title, permalink },
+    metadata: { title, permalink, frontMatter },
     isBlogPostPage,
     assets,
   } = useBlogPost()
@@ -16,6 +19,17 @@ export default function BlogPostItemHeader(): JSX.Element {
   const plugin = useBlogPluginData()
   const routeBasePath = plugin.routeBasePath ?? '/blog'
 
+  const _description = (
+    <Typography
+      variant="h6"
+      className={clsx(
+        isBlogPostPage ? styles.blogPostDescription : styles.blogDescription,
+      )}
+    >
+      {frontMatter.description}
+    </Typography>
+  )
+
   return (
     <header>
       {isBlogPostPage && (
@@ -35,8 +49,10 @@ export default function BlogPostItemHeader(): JSX.Element {
         />
       )}
       <BlogPostItemHeaderTitle />
+      {frontMatter?.description && isBlogPostPage && _description}
       <BlogPostItemHeaderInfo />
-      <hr className="blog-divider" />
+      {frontMatter?.description && !isBlogPostPage && _description}
+      {isBlogPostPage && <hr className="blog-divider" />}
     </header>
   )
 }