diff --git a/src/components/Article/Article.Heading.tsx b/src/components/Article/Article.Heading.tsx index 8fdc15b..2e28425 100644 --- a/src/components/Article/Article.Heading.tsx +++ b/src/components/Article/Article.Heading.tsx @@ -62,7 +62,7 @@ export const ArticleHeading = ({ const Headline = styled(Typography)` white-space: pre-wrap; - margin-top: 16px; + margin-top: 24px; ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { &.title { diff --git a/src/components/Article/Article.ImageBlockWrapper.tsx b/src/components/Article/Article.ImageBlockWrapper.tsx index b8cad2b..c69f572 100644 --- a/src/components/Article/Article.ImageBlockWrapper.tsx +++ b/src/components/Article/Article.ImageBlockWrapper.tsx @@ -20,7 +20,7 @@ export const ArticleImageBlockWrapper = ({ image, order }: Props) => { } const Container = styled.figure` - margin: 32px 0 32px 0; + margin: 40px 0 40px 0; padding: 0; display: flex; flex-direction: column; diff --git a/src/components/Article/Header/Article.Header.tsx b/src/components/Article/Header/Article.Header.tsx index 2ba200e..b3474f1 100644 --- a/src/components/Article/Header/Article.Header.tsx +++ b/src/components/Article/Header/Article.Header.tsx @@ -52,13 +52,15 @@ const ArticleHeader = ({ {subtitle} )} + + + + tag.name)} className={'articleTags'} /> - - - + {coverImage && ( lsdUtils.breakpoint(props.theme, 'xs', 'down')} { diff --git a/src/components/Article/Header/Article.Summary.tsx b/src/components/Article/Header/Article.Summary.tsx index f48aa51..10f1cf8 100644 --- a/src/components/Article/Header/Article.Summary.tsx +++ b/src/components/Article/Header/Article.Summary.tsx @@ -13,7 +13,7 @@ const ArticleSummary = ({ summary, className, showLabel }: Props) => { {showLabel && summary} = ({ }) => { return ( - Join the discussion + Join the discussion - {show.title} + + {show.title} + = ({ - + Tags @@ -340,6 +340,11 @@ const FeaturedFirst = styled.div` margin-top: var(--lsd-spacing-32) !important; } + .post-card__title h3 { + font-size: var(--lsd-h2-fontSize) !important; + line-height: var(--lsd-h2-lineHeight) !important; + } + .post-card__subtitle { margin-top: var(--lsd-spacing-16) !important; } @@ -354,9 +359,8 @@ const FeaturedSecond = styled.div` } .post-card__title-text { - font-size: var(--lsd-h5-fontSize) !important; - font-weight: var(--lsd-h5-fontWeight) !important; - line-height: var(--lsd-h5-lineHeight) !important; + font-size: var(--lsd-h4-fontSize) !important; + line-height: var(--lsd-h4-lineHeight) !important; } .post-card__label { @@ -365,7 +369,6 @@ const FeaturedSecond = styled.div` .post-card__label * { font-size: var(--lsd-subtitle4-fontSize) !important; - font-weight: var(--lsd-subtitle4-fontWeight) !important; line-height: var(--lsd-subtitle4-lineHeight) !important; } diff --git a/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx b/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx index 0cac000..23955b4 100644 --- a/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx +++ b/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx @@ -250,8 +250,8 @@ const Root = styled('div')` ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { .post-card__title-text { - font-size: var(--lsd-h5-fontSize) !important; - line-height: var(--lsd-h5-lineHeight) !important; + font-size: var(--lsd-h4-fontSize) !important; + line-height: var(--lsd-h4-lineHeight) !important; } } ` diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bd80287..62e9823 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -65,6 +65,15 @@ export default function App({ Component, pageProps }: AppLayoutProps) { :root { --lpe-nav-rendered-height: ${uiConfigs.navbarRenderedHeight}px; --lpe-article-rendered-margin-top: ${uiConfigs.articleRenderedMT}px; + + --lsd-h1-fontSize: 44px; + --lsd-h1-lineHeight: 54px; + --lsd-h2-fontSize: 36px; + --lsd-h2-lineHeight: 48px; + --lsd-h3-fontSize: 28px; + --lsd-h3-lineHeight: 42px; + --lsd-h4-fontSize: 20px; + --lsd-h4-lineHeight: 30px; } a, @@ -114,6 +123,10 @@ export default function App({ Component, pageProps }: AppLayoutProps) { .lsd-dropdown-item__label { text-transform: capitalize; } + + .lsd-quote { + margin-block: 8px; + } `} />