From 511740fa05728b8ce9baa8a2fd1743302186f79d Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 21 Jun 2023 21:58:41 +0900 Subject: [PATCH] style: update blog CSS --- .../src/client/css/blog.scss | 5 ++--- .../src/client/css/custom.scss | 4 ++++ .../Header/Info/styles.module.scss | 11 ++++++++++ .../theme/BlogPostItem/Header/Title/index.tsx | 9 +++++--- .../Header/Title/styles.module.css | 20 ----------------- .../Header/Title/styles.module.scss | 22 +++++++++++++++++++ .../theme/BlogPostItem/Header/index.tsx | 2 +- .../src/client/theme/BlogPostItems/index.tsx | 22 +++++++++++++++++++ 8 files changed, 68 insertions(+), 27 deletions(-) delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.css create mode 100644 packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.scss create mode 100644 packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/index.tsx diff --git a/packages/logos-docusaurus-theme/src/client/css/blog.scss b/packages/logos-docusaurus-theme/src/client/css/blog.scss index 433e4dc..e9edac4 100644 --- a/packages/logos-docusaurus-theme/src/client/css/blog.scss +++ b/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 { diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 6228433..00f3354 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/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'] { diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss index b7893b0..7a89922 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss +++ b/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; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/index.tsx index 6722097..9d0b384 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/index.tsx +++ b/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 ( - + {isBlogPostPage ? ( title ) : ( diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.css deleted file mode 100644 index 6d0b62b..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.css +++ /dev/null @@ -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; - } -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.scss new file mode 100644 index 0000000..8e3d772 --- /dev/null +++ b/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'); + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx index 3e7ccb9..b7bc2ad 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx +++ b/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 { diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItems/index.tsx new file mode 100644 index 0000000..9d91dad --- /dev/null +++ b/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 }) => ( + + + + + + ))} + + ) +}