diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/image.scss b/services/web/frontend/stylesheets/bootstrap-5/components/image.scss index b156cdfd3a..bdcea2aed6 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/image.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/image.scss @@ -1,3 +1,3 @@ .img-rounded { - border-radius: $border-radius-large; + border-radius: var(--border-radius-large); } diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss b/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss index 282b9907d3..3953b1c019 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss @@ -1,9 +1,9 @@ .text-with-bg { @extend .dm-mono; - padding: 0 10px; - border-radius: 10px; - margin-top: 5px; + padding: 0 var(--spacing-04); + border-radius: var(--border-radius-medium); + margin-top: var(--spacing-02); // will make all spans content inline while avoiding overflowing the viewport in mobile // https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss index 44ab55a391..6693f3f479 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss @@ -3,84 +3,79 @@ /about/*, /contact, /legal, /blog/*, /for/*, /events/* */ .cms-page { - &.website-redesign { - h1 { - font-size: 2rem; // 32px + 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; + font-family: var(-font-family-san-serif); + font-style: normal; + font-weight: 600; line-height: 1.333; + padding-top: 8px; + padding-right: 50px; } - h2 { - font-size: 1.5rem; // 24px - } - - .sales-contact-form-left-column { - .sales-contact-form-heading-title { - font-size: 2.25rem; - font-family: var(-font-family-san-serif); - font-style: normal; - font-weight: 600; - line-height: 1.333; - padding-top: 8px; - padding-right: 50px; - } - - @include media-breakpoint-up(sm) { - .names-container { - display: flex; - gap: 21px; - } - } - - .checkbox-label { - font-size: 16px; - font-weight: 400; + @include media-breakpoint-up(sm) { + .names-container { + display: flex; + gap: 21px; } } - /* Buttons */ - // correct color property set on above: - // TODO: check if reset needed - // .reset-btns; - // .alert { - // .alert; - // } - // .alert-info { - // .btn-info { - // .btn-alert-info; - // } - // } + .checkbox-label { + font-size: 16px; + font-weight: 400; + } + } - .p-no-text-nodes:has(.btn) { - margin-top: var(--spacing-09); + /* Buttons */ + // correct color property set on above: + // TODO: check if reset needed + // .reset-btns; + // .alert { + // .alert; + // } + // .alert-info { + // .btn-info { + // .btn-alert-info; + // } + // } - @include media-breakpoint-down(md) { - .btn { - width: 100%; - margin-left: 0; - margin-top: var(--spacing-05); - } + .p-no-text-nodes:has(.btn) { + margin-top: var(--spacing-09); - .btn:first-child { - margin-top: 0; - } + @include media-breakpoint-down(md) { + .btn { + width: 100%; + margin-left: 0; + margin-top: var(--spacing-05); + } + + .btn:first-child { + margin-top: 0; } } + } - .btn + .btn { - margin-left: var(--spacing-06); - } + .btn + .btn { + margin-left: var(--spacing-06); + } - .optional-text { - font-size: 14px; - } + .optional-text { + font-size: 14px; } .section-row { margin: 0 auto; - - // TODO: check max-widths with UX team for new design - // used to have different sizes for different breakpoints but probably not needed - max-width: 1344px; + max-width: 1440px; } padding-bottom: 0; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss index ad31fae641..11f0de6517 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss @@ -1,6 +1,6 @@ /* Styling for content pages - Including: about, home, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page + Including: about, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page */ // TODO: consolidate cms.scss and content.scss @@ -41,9 +41,7 @@ section */ section { - // TODO: static pages look to use --spacing-16 (96px) for total vertical padding - // should that be the default going forward? - padding: var(--spacing-08) var(--spacing-05); + padding: var(--spacing-16) var(--spacing-05) 0 var(--spacing-05); // TODO: confirm if we will still support this and if so what colors to use // &.color-block { @@ -90,9 +88,7 @@ // } .section-row { - // TODO: check max-widths with UX team for new design - // used to have different sizes for different breakpoints but probably not needed - max-width: 1344px; + max-width: 1440px; } }