Merge branch 'redesign-develop' into text-component-error

Netcentric · Oct 30, 2024 · 4cc4e02 · 4cc4e02
2 parents d6ad184 + 1002500
commit 4cc4e02
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 11 deletions.
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -139,13 +139,18 @@ main .hero-container .hero-wrapper {
 }
 
 .hero .hero-flag {
-  translate: 20px -50%;
+  translate: 20px -100%;
   display: flex;
   width: 60px;
   height: 50px;
   position: absolute;
 }
 
+.hero .hero-flag svg {
+  width: auto;
+  height: auto;
+}
+
 .hero .hero-countdown {
   text-align: center;
   line-height: 91px;
@@ -194,7 +199,7 @@ main .hero-container .hero-wrapper {
   }
 
   .hero .hero-flag {
-    translate: 30px -50%;
+    translate: 30px -100%;
   }
 
   .hero.countdown .hero-text-wrapper {
@@ -246,7 +251,13 @@ main .hero-container .hero-wrapper {
   }
 
   .hero .hero-flag {
-    translate: 40px -50%;
+    translate: 40px -100%;
+    width: 100px;
+    height: auto;
+  }
+
+  .hero .hero-flag svg {
+    height: unset;
   }
 
   .hero h1 {
@@ -269,7 +280,7 @@ main .hero-container .hero-wrapper {
   }
 
   .hero .hero-flag {
-    translate: 62px -50%;
+    translate: 62px -100%;
   }
 
   .hero h1 {

diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
@@ -44,11 +44,11 @@ const addLogoFlag = (block) => {
   const flagEl = document.createElement('span');
   flagEl.classList.add('hero-flag');
   flagEl.innerHTML = `
-    <svg width="60" height="50" viewBox="0 0 60 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="8.57143" height="50" fill="#ED1C24"/>
-      <rect x="17.1431" width="8.57143" height="50" fill="#ED1C24"/>
-      <rect x="34.2856" width="8.57143" height="50" fill="black"/>
-      <rect x="51.4287" width="8.57143" height="50" fill="black"/>
+    <svg width="100" height="80" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect y="0.351562" width="14.2857" height="80" fill="#ED1C24"/>
+      <rect x="28.5714" y="0.351562" width="14.2857" height="80" fill="#ED1C24"/>
+      <rect x="57.1429" y="0.351562" width="14.2857" height="80" fill="white"/>
+      <rect x="85.7143" y="0.351562" width="14.2857" height="80" fill="white"/>
     </svg>
   `;
   customDecoreateIcons(flagEl);

diff --git a/icons/linkedin.svg b/icons/linkedin.svg
diff --git a/styles/styles.css b/styles/styles.css
@@ -793,3 +793,42 @@ body.modal-visible > *:not(.modal) {
     max-width: 1134px;
   }
 }
+
+/* text page styles - used for cookie and policies pages */
+
+body.text-page ul {
+  list-style-position: inside;
+}
+
+body.text-page a:any-link {
+  text-wrap: auto;
+  overflow-wrap: anywhere;
+}
+
+body.text-page main > .section:first-child > .default-content-wrapper:first-child > h1:first-child {
+  padding-top: 40px;
+}
+
+@media (width >= 768px) {
+  body.text-page main .section {
+    max-width: 525px;
+    padding: 0;
+    margin: auto;
+  }
+}
+
+@media (width >= 1025px) {
+  body.text-page main .section {
+    max-width: 783px;
+  }
+
+  body.text-page main > .section:first-child > .default-content-wrapper:first-child > h1:first-child {
+    padding-top: 60px;
+  }
+}
+
+@media (width >= 1440px) {
+  body.text-page main .section {
+    max-width: 814px;
+  }
+}