style: update blog CSS

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

@@ -68,7 +68,6 @@
 
 .blog-wrapper article {
   header {
-    h1,
     h2 {
       @include lsd.typography('h3');
     }
@@ -79,7 +78,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    margin-top: 2rem !important;
+    margin-top: 24px !important;
   }
 }
 
@@ -142,7 +141,7 @@
     align-items: flex-start;
 
     .read-more-link {
-      margin-top: 2rem;
+      margin-top: 24px;
 
       &,
       button {

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

@@ -1164,6 +1164,10 @@ main[itemtype*='Blog'] {
     justify-content: center;
     margin-left: unset;
   }
+
+  .blog-divider {
+    margin-block: 32px !important;
+  }
 }
 
 [data-hidden-doc-sidebar='true'] {

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

@@ -1,4 +1,5 @@
 @use '../../../../css/lsd';
+@use '../../../../css/utils';
 
 .container {
   margin-bottom: 0 !important;
@@ -48,3 +49,13 @@
 .authors :global(.avatar__name) {
   line-height: 0;
 }
+
+@include utils.responsive('lg', 'down') {
+  .container {
+    margin-top: 24px !important;
+  }
+
+  .blogContainer {
+    margin-top: 8px !important;
+  }
+}

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

@@ -2,15 +2,18 @@ import React from 'react'
 import clsx from 'clsx'
 import Link from '@docusaurus/Link'
 import { useBlogPost } from '@docusaurus/theme-common/internal'
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
 export default function BlogPostItemHeaderTitle({ className }) {
   const { metadata, isBlogPostPage } = useBlogPost()
   const { permalink, title } = metadata
-  const TitleHeading = isBlogPostPage ? 'h1' : 'h2'
+  const TitleHeading = isBlogPostPage ? 'h1' : 'h6'
 
   return (
-    <TitleHeading className={clsx(styles.title, className)} itemProp="headline">
+    <TitleHeading
+      className={clsx(isBlogPostPage && styles.blogPostTitle, className)}
+      itemProp="headline"
+    >
       {isBlogPostPage ? (
         title
       ) : (

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

@@ -1,20 +0,0 @@
-.title {
-  font-size: 3rem;
-}
-
-.blogDescription {
-  margin-top: 16px;
-}
-
-.blogPostDescription {
-  margin-top: 12px;
-}
-
-/**
-  Blog post title should be smaller on smaller devices
-**/
-@media (max-width: 576px) {
-  .title {
-    font-size: 2rem;
-  }
-}

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

@@ -0,0 +1,22 @@
+@use '../../../../css/utils';
+@use '../../../../css/lsd';
+
+.blogDescription {
+  margin-top: 16px;
+  @include lsd.typography('body2');
+}
+
+.blogPostDescription {
+  margin-top: 12px;
+}
+
+@include utils.responsive('lg', 'down') {
+  .blogPostTitle {
+    @include lsd.typography('h3');
+  }
+
+  .blogPostDescription {
+    margin-top: 4px;
+    @include lsd.typography('body1');
+  }
+}

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

@@ -6,7 +6,7 @@ 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 styles from './Title/styles.module.scss'
 import clsx from 'clsx'
 
 export default function BlogPostItemHeader(): JSX.Element {

packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { BlogPostProvider } from '@docusaurus/theme-common/internal'
+import BlogPostItem from '@theme/BlogPostItem'
+export default function BlogPostItems({
+  items,
+  component: BlogPostItemComponent = BlogPostItem,
+}) {
+  return (
+    <>
+      {items.map(({ content: BlogPostContent }) => (
+        <BlogPostProvider
+          key={BlogPostContent.metadata.permalink}
+          content={BlogPostContent}
+        >
+          <BlogPostItemComponent>
+            <BlogPostContent />
+          </BlogPostItemComponent>
+        </BlogPostProvider>
+      ))}
+    </>
+  )
+}