diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss index 7da6590..4d65040 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss @@ -19,7 +19,7 @@ .mdx-cta-section--title-only { .mdx-cta-section__title { - @include lsd.typography('h1', false); + @include lsd.typography('h5', false); font-weight: 300; max-width: 886px; @@ -33,6 +33,21 @@ } } +.mdx-cta-section--title-button { + .mdx-cta-section__title { + @include lsd.typography('display4', false); + font-weight: 300; + + max-width: 886px; + } + + @include utils.responsive('lg', 'down') { + .mdx-cta-section__title { + @include lsd.typography('h4', false); + } + } +} + .mdx-cta-section--full-width { .mdx-cta-section__container { display: grid; @@ -145,8 +160,7 @@ } & > p { - font-size: 1.5rem !important; - line-height: 2rem !important; + @include lsd.typography('h4', true); } } } @@ -155,12 +169,10 @@ @include utils.responsive('lg', 'down') { .mdx-cta-section__title { - font-size: 1rem !important; - line-height: 100% !important; + @include lsd.typography('subtitle2', true); } .mdx-cta-section__description { - font-size: 1.5rem !important; - line-height: 2rem !important; + @include lsd.typography('h4', true); } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx index 4d3aada..6c89329 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx @@ -117,10 +117,13 @@ export const CallToActionSection: React.FC = ({ }) => { const withDescription = !!description const withList = list.length > 0 + const withButton = !!href const display = - title && !withDescription && !withList + title && !withDescription && !withButton && !withList ? 'title-only' + : title && !description && !withList && withButton + ? 'title-button' : title && description && columns === 2 ? `full-width` : title && description && list.length > 0 @@ -158,10 +161,10 @@ export const CallToActionSection: React.FC = ({
{list.map((option, index) => (
- + {option.title} - + {option.description}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss index dc03e74..bff8633 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss @@ -110,7 +110,7 @@ @include utils.responsive('lg', 'down') { .mdx-feature-list { .mdx-feature-list__title { - @include lsd.typography('subtitle1', false); + @include lsd.typography('subtitle2', false); padding: 1rem 0; } } @@ -136,12 +136,12 @@ } .mdx-feature-list__feature-title { - @include lsd.typography('h5', false); + @include lsd.typography('h4', false); margin-top: 1rem; } .mdx-feature-list__feature-description { - @include lsd.typography('subtitle1'); + @include lsd.typography('body1', false); margin-top: 3rem; } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx index 7674c72..a6f7138 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx @@ -84,7 +84,7 @@ export const FeatureList: React.FC = ({ {index + 1} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx index 57d89ee..1d2fbe4 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx @@ -21,7 +21,7 @@ export const HeroDescription: React.FC = ({ return ( = ({ /> )} {name}