From 0913a3002a561f6099b15c91b1cc0cd64d9ccccc Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Tue, 30 Apr 2024 14:47:22 +0000 Subject: [PATCH] refactor(cxl-ui): cxl-section #view-hero breakpoint https://cxlworld.slack.com/archives/C01JABH8AHX/p1714384594016109?thread_ts=1713699357.038669&cid=C01JABH8AHX --- packages/cxl-ui/scss/cxl-section.scss | 28 ++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss index 219fc6b43..db62eebff 100644 --- a/packages/cxl-ui/scss/cxl-section.scss +++ b/packages/cxl-ui/scss/cxl-section.scss @@ -3,7 +3,7 @@ @use "./mixins" as cxl-mixins; :host { - --figure-height-multiplier: 0.10; + --figure-height-multiplier: 0.1; --figure-height-factor: calc(var(--figure-height-multiplier) * var(--cxl-content-max-width-wide)); position: relative; @@ -88,14 +88,8 @@ } @media #{mq.$medium} { - :host(#view-hero) { - @include mixins.wide-background(); - @include mixins.extend-background-right(); - @include mixins.wide-background-hero(); - @include mixins.wide-background-hero-image(); - } - - :host([theme~="cxl-hero"]) { + :host(#view-hero:not(.view-hero-modern)), + :host([theme~="cxl-hero"]:not(.view-hero-modern)) { @include mixins.wide-background(); @include mixins.extend-background-right(); @include mixins.wide-background-hero(); @@ -152,3 +146,19 @@ } } } + +/** + * Breakpoint comes from WordPress columns block. Using this value + * is the simplest solution for a hero section layout. + * + * @see https://cxlworld.slack.com/archives/C01JABH8AHX/p1714384594016109?thread_ts=1713699357.038669&cid=C01JABH8AHX + */ +@media only screen and (min-width: 782px) { + :host(#view-hero.view-hero-modern), + :host([theme~="cxl-hero"].view-hero-modern) { + @include mixins.wide-background(); + @include mixins.extend-background-right(); + @include mixins.wide-background-hero(); + @include mixins.wide-background-hero-image(); + } +}