Hero banner feedback (#79)

* Change heroBlock styles * Fix broken menu and hero height * Fix menu for tablets * Clean gcx build directory
riptano · Jun 20, 2023 · c9ebe29 · c9ebe29
1 parent 79d4366
commit c9ebe29
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/gcx/gulpfile.js b/gcx/gulpfile.js
@@ -10,6 +10,12 @@ const cleanTempBuild = () => {
         .pipe(clean());
 }
 
+// cleans up the ui-bundle folder
+const cleanUiBuild = () => {
+    return src('build/*', { read: false, allowEmpty: true })
+        .pipe(clean());
+}
+
 // unzips the antora ui-bundle into the tempBuild folder
 const unzipBundle = () => {
     return src('../build/ui-bundle.zip')
@@ -121,4 +127,4 @@ const cleanHeliosBuild = () => {
     .pipe(clean());
 }
 
-exports.bundle = series(cleanTempBuild,unzipBundle,cleanImg,cleanHBLayouts,cleanBuild,cleanCSS,bundleCSS,bundleHeliosCSS, parallel(bundleStencil),bundleJS404, bundleJShelpers, mergeJS, cleanHighlight, bundleHB, bundleImg, zipBundle, cleanTempBuild, cleanHeliosBuild);
+exports.bundle = series(cleanTempBuild,cleanUiBuild,unzipBundle,cleanImg,cleanHBLayouts,cleanBuild,cleanCSS,bundleCSS,bundleHeliosCSS, parallel(bundleStencil),bundleJS404, bundleJShelpers, mergeJS, cleanHighlight, bundleHB, bundleImg, zipBundle, cleanTempBuild, cleanHeliosBuild);
diff --git a/gcx/styles/src/css/helios-gcx-heroBlock.css b/gcx/styles/src/css/helios-gcx-heroBlock.css
@@ -2,8 +2,15 @@
 .dsHeroBlock[data-banner="default"] {
     background-image: url('../img/hero-banner-1.svg');
     background-size: cover;
+    background-position: center;
     color: white;
     font-family: 'Roboto', sans-serif;
+    padding: 1rem;
+    height: 310px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
   }
 
   .dsHeroBlock[data-banner="alternative"]{
@@ -59,16 +66,26 @@
 
 
   .dsHeroContent {
-    padding: 72px 60px;
-    width: 50%;
+    width: 100%;
   }
 
   .dsHeroTitle h1 {
     font-weight: 400;
   }
 
-  @media screen and (max-width: 820px) {
+
+  @media screen and (min-width: 1024px) {
+    .dsHeroBlock {
+      padding: 1rem 3rem;
+      margin-bottom: 0;
+    }
     .dsHeroContent {
-        width: 100%;
-      }
-  }
+        width: 70%;
+    }
+  }
+
+  @media screen and (min-width: 1460px) {
+    .dsHeroContent {
+        width: 55%;
+    }
+  }