diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss index 7b3d402b2b..39b7100d56 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss @@ -3,15 +3,6 @@ /about/*, /contact, /legal, /blog/*, /for/*, /events/* */ .cms-page { - h1 { - font-size: 2rem; // 32px - line-height: 1.333; - } - - h2 { - font-size: 1.5rem; // 24px - } - .sales-contact-form-left-column { .sales-contact-form-heading-title { font-size: 2.25rem; @@ -308,6 +299,25 @@ height: auto; max-width: 100%; } + + /* + cards + */ + .card-body { + // card-body all have div before the actual content + // due to option to override font size + > :first-child { + > :first-child { + margin-top: 0; + } + } + + > :last-child { + > :last-child { + margin-bottom: 0; + } + } + } } .icon-with-content { diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss index e4d1d21ea9..c6c09a24d8 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss @@ -1,7 +1,36 @@ // TODO: .website-redesign to be removed once fully rolled out +@mixin reset-font-size($size) { + h1, + h2, + h3, + h4, + h5, + h6, + p { + @if $size == 'heading-2xl' { + @include heading-2xl; + } @else if $size == 'heading-xl' { + @include heading-xl; + } @else if $size == 'heading-lg' { + @include heading-lg; + } @else if $size == 'heading-md' { + @include heading-md; + } @else if $size == 'heading-sm' { + @include heading-sm; + } @else if $size == 'heading-xs' { + @include heading-xs; + } @else if $size == 'base' { + @include body-base; + } + } +} + .website-redesign { // hero section of features, enterprises, and universities will have an image that will overflow the page + + --bs-body-color: var(--neutral-70); + overflow-x: hidden; a { @@ -34,6 +63,130 @@ } } + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 600; + } + + h1, + .h1 { + @include heading-2xl; + } + + .font-size-h1 { + @include reset-font-size('heading-2xl'); + } + + h2, + .h2 { + @include heading-xl; + } + + .font-size-h2 { + @include reset-font-size('heading-xl'); + } + + h3, + .h3 { + @include heading-lg; + } + + .font-size-h3 { + @include reset-font-size('heading-lg'); + } + + h4, + .h4 { + @include heading-md; + } + + .font-size-h4 { + @include reset-font-size('heading-md'); + } + + h5, + .h5 { + @include heading-sm; + } + + .font-size-h5 { + @include reset-font-size('heading-sm'); + } + + h6, + .h6 { + @include heading-xs; + } + + .font-size-h6 { + @include reset-font-size('heading-xs'); + } + + .font-size-base { + @include reset-font-size('base'); + } + + // smaller fonts for mobile + @include media-breakpoint-down(lg) { + h1, + .h1 { + @include heading-xl; + } + + .font-size-h1 { + @include reset-font-size('heading-xl'); + } + + h2, + .h2 { + @include heading-lg; + } + + .font-size-h2 { + @include reset-font-size('heading-lg'); + } + + h3, + .h3 { + @include heading-md; + } + + .font-size-h3 { + @include reset-font-size('heading-md'); + } + + h4, + .h4 { + @include heading-sm; + } + + .font-size-h4 { + @include reset-font-size('heading-sm'); + } + + h5, + .h5 { + @include heading-xs; + } + + .font-size-h5 { + @include reset-font-size('heading-xs'); + } + + h6, + .h6 { + @include body-base; + } + + .font-size-h6 { + @include reset-font-size('base'); + } + } + .card { --bs-card-bg: var(--neutral-10); --bs-card-border-radius: var(--border-radius-large);