Merge pull request #408 from conversionxl/anoblet/feat/hero

conversionxl · May 6, 2024 · 8972f17 · 8972f17
2 parents 85b3594 + 0913a30
commit 8972f17
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git 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();
+  }
+}
diff --git a/packages/cxl-ui/scss/global/cxl-section.scss b/packages/cxl-ui/scss/global/cxl-section.scss
@@ -1,8 +1,8 @@
 /* stylelint-disable selector-no-qualifying-type */
 @use "~@conversionxl/cxl-lumo-styles/scss/mq";
 
-cxl-section#view-hero, cxl-section[theme~="cxl-hero"] {
-
+cxl-section#view-hero,
+cxl-section[theme~="cxl-hero"] {
   .column-1 {
     @media #{mq.$medium} {
       max-width: 45%;
@@ -13,19 +13,22 @@ cxl-section#view-hero, cxl-section[theme~="cxl-hero"] {
   &.wide-background-red,
   &.wide-background-blue,
   &.wide-background-green {
-
     .column-2 * {
       color: var(--lumo-tint);
     }
   }
 
   &.wide-background-light-blue {
-
     .column-2 {
       * {
         color: var(--lumo-shade);
       }
     }
   }
 
+  h1 {
+    @media #{mq.$medium} {
+      font-size: calc((var(--cxl-lumo-font-size-hero) + var(--lumo-font-size-xxxl)) / 2);
+    }
+  }
 }