fix(homepage): hero and homepage fixes for #151156 #198

eea · Jun 15, 2022 · 43d4efc · 43d4efc
2 parents 973ece5 + fe6e3ec
commit 43d4efc
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 14 deletions.
diff --git a/theme/themes/eea/elements/container.overrides b/theme/themes/eea/elements/container.overrides
@@ -13,7 +13,8 @@
 .section-edit {
   .container:not(.content-box-inner) {
     width: auto !important;
-    padding: 0 3rem;
+    padding-left: 3rem;
+    padding-right: 3rem;
   }
 }
 

diff --git a/theme/themes/eea/extras/contentBox.variables b/theme/themes/eea/extras/contentBox.variables
@@ -6,7 +6,7 @@
 @contentBoxWidth : 100vw;
 @contentBoxColor : @white;
 @contentBoxBackgroundColor: @grey-1;
-@contentBoxColorInverted : @black;
+@contentBoxColorInverted : inherit;
 
 /* Themes */
 @contentBoxBackgroundColorPrimary: @primaryColor;

diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less
@@ -35,6 +35,11 @@
   }
 }
 
+// enlarge top section on edit page due to width auto on container
+.section-edit .top .container {
+  flex: 1;
+}
+
 .top.bar .item {
   display: flex;
   align-items: center;

diff --git a/theme/themes/eea/extras/hero.less b/theme/themes/eea/extras/hero.less
@@ -11,9 +11,14 @@
   position: @heroBlockPosition;
 }
 
+.eea.hero-block.spaced {
+  margin: @heroBlockSpacedMargin;
+}
+
 .hero-block-inner-wrapper {
   height: 100%;
   padding-block: @heroBlockWrapperPadding;
+  position: relative;
 }
 
 .hero-block-body {
@@ -24,43 +29,53 @@
 }
 
 .hero-block-image {
+  background-color: inherit;
   background-repeat: @heroBlockImageBackgroundRepeat;
   background-size: @heroBlockImageBackgroundSize;
   background-position: @heroBlockImageBackgroundPosition;
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: -1;
+  z-index: 0;
 }
 
+.hero-block-image-wrapper {
+  position: absolute;
+  min-height: @heroBlockImageWrapperMinHeight;
+}
+
+
 .hero-block-text .quoted > * {
   display: inline-block;
 }
 
 .hero-block[class*='color-bg']:not(.full-width) {
-  padding: @heroBlockHomepagePadding;
+  padding: @heroBlockHomePagePadding;
 }
 
 .eea.hero-block.full-height,
-.eea.hero-block.full-height .hero-block-image,
+.eea.hero-block.full-height .hero-block-image-wrapper,
 .eea.hero-block.full-height .hero-block-inner-wrapper {
   min-height: @mobileHeroBlockMinHeight;
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
   .eea.hero-block.full-height,
-  .eea.hero-block.full-height .hero-block-image,
+  .eea.hero-block.full-height .hero-block-image-wrapper,
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: @tabletHeroBlockMinHeight;
   }
   .hero-block-body {
     gap: @tabletHeroBlockBodyGap;
   }
+  .homepage #page-document > .eea.hero-block:first-of-type .hero-block-body {
+    margin: @heroBlockHomePageBodyMargin;
+  }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
   .eea.hero-block.full-height,
-  .eea.hero-block.full-height .hero-block-image,
+  .eea.hero-block.full-height .hero-block-image-wrapper,
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: @desktopHeroBlockMinHeight;
   }

diff --git a/theme/themes/eea/extras/hero.variables b/theme/themes/eea/extras/hero.variables
@@ -3,12 +3,19 @@
 *******************************/
 
 /* Hero block */
-@mobileHeroBlockMinHeight : 417px;
-@tabletHeroBlockMinHeight : 465px;
-@desktopHeroBlockMinHeight: 665px;
+@mobileHeroBlockMinHeight : 360px;
+@tabletHeroBlockMinHeight : 500px;
+@desktopHeroBlockMinHeight: 600px;
 
 @heroBlockPosition: relative;
-@heroBlockHomepagePadding: 0 @rem-space-5;
+@heroBlockHomePagePadding: 0 @rem-space-5;
+@heroBlockHomePageBodyMargin: @rem-space-16 0 0 0;
+
+/* Hero block spaced */
+@heroBlockSpacedMargin: @rem-space-12 0;
+
+/* Image Wrapper */
+@heroBlockImageWrapperMinHeight: 290px; // 5rem gap plus one line text
 
 /* Background Image */
 @heroBlockImageBackgroundRepeat   : no-repeat;

diff --git a/theme/themes/eea/globals/utilities.less b/theme/themes/eea/globals/utilities.less
@@ -17,7 +17,7 @@
   left: 0;
   background: #000;
   opacity: 0.4;
-  z-index: -1;
+  z-index: 0;
 }
 
 // Display utilities

diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
@@ -79,7 +79,7 @@
 @headerFontWeight: @bold;
 @headerFontSize: 1.125rem;
 @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
-@headerColor: @black;
+@headerColor: inherit;
 
 /* Metadata */
 @metaFontSize: @relativeMedium;
@@ -112,7 +112,7 @@
 
 /* Description */
 @descriptionDistance: 0.5em;
-@descriptionColor: @black;
+@descriptionColor: inherit;
 
 /* Content Image */
 @contentImageWidth: '';