localized-landing-pages: UI feedbacks addressed

mautic · Apr 1, 2024 · 6c7a5e1 · 6c7a5e1
1 parent ecbba99
commit 6c7a5e1
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 18 deletions.
diff --git a/docroot/themes/custom/mauticorg_base/dist/css/styles.css b/docroot/themes/custom/mauticorg_base/dist/css/styles.css
@@ -4555,13 +4555,20 @@ hr {
 }
 
 .localized-page .hero-banner .right-image {
-  -webkit-box-pack: center;
-          justify-content: center;
+  -webkit-box-pack: start;
+          justify-content: flex-start;
   display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
 }
 
+@media (max-width: 1024px) {
+  .localized-page .hero-banner .right-image {
+    -webkit-box-pack: center;
+            justify-content: center;
+  }
+}
+
 .localized-page .hero-banner__title {
   font: normal normal normal 48px/56px "Titillium Web", sans-serif;
   letter-spacing: 0;
@@ -4681,6 +4688,10 @@ hr {
   display: none;
 }
 
+.localized-page .hero-banner__citation .field--name-field-citation-box .citation-modal a {
+  text-decoration: underline;
+}
+
 .localized-page .hero-banner__citation .field--name-field-citation-box .citation-modal.active {
   display: block;
   position: fixed;
@@ -4856,11 +4867,15 @@ hr {
   background: #4e5e9e 0% 0% no-repeat padding-box;
   border-radius: 0.5rem;
   padding: 1.875rem;
+  -webkit-box-flex: 0;
+          flex: 0 33.3%;
 }
 
 @media (max-width: 767px) {
   .localized-page .hero-banner__citation .field--name-field-citation-box .field__items .field__item {
     width: 100%;
+    -webkit-box-flex: 0;
+            flex: 0 100%;
   }
 }
 
@@ -4915,6 +4930,13 @@ hr {
           justify-content: flex-start;
 }
 
+@media (max-width: 1024px) {
+  .localized-page .hero-banner__content.localized-container {
+    -webkit-box-pack: center;
+            justify-content: center;
+  }
+}
+
 @media (max-width: 767px) {
   .localized-page .hero-banner__content.localized-container {
     padding-top: 6.875rem;
@@ -5006,7 +5028,14 @@ hr {
 }
 
 .localized-page .localized-container.contact-form__wrappar .contact-form__mautic {
-  align-self: flex-end;
+  align-self: flex-start;
+  margin-top: 118px;
+}
+
+@media (max-width: 1024px) {
+  .localized-page .localized-container.contact-form__wrappar .contact-form__mautic {
+    margin-top: 0;
+  }
 }
 
 .localized-page .localized-container.contact-form__wrappar .contact-form__mautic .mauticform_wrapper {
@@ -5086,6 +5115,7 @@ hr {
   font: normal normal normal 20px/34px "Titillium Web", sans-serif;
   letter-spacing: 0;
   color: #333;
+  text-transform: uppercase;
 }
 
 @media (max-width: 1024px) {
@@ -5174,8 +5204,8 @@ hr {
 
 .localized-page .back__to-top {
   background-color: #6474b7;
-  right: 6rem;
-  bottom: 7rem;
+  right: 3rem;
+  bottom: 3.5rem;
   left: unset;
   margin-bottom: 0;
   position: fixed;
@@ -5191,8 +5221,8 @@ hr {
 
 @media (max-width: 767px) {
   .localized-page .back__to-top {
-    right: 32px;
-    bottom: 106px;
+    right: 18px;
+    bottom: 36px;
   }
 }
 
@@ -5498,6 +5528,7 @@ hr {
   color: #afafaf;
   border: none;
   border-radius: 0.5rem 0 0 0.5rem;
+  height: 60px;
 }
 
 @media screen and (max-width: 1100px) {
@@ -5565,6 +5596,10 @@ hr {
   color: #fdb933;
 }
 
+.nodetype__localized_landing_pages {
+  background-color: #4e5e9e;
+}
+
 .localized-page {
   position: relative;
 }
@@ -5786,6 +5821,7 @@ hr {
   letter-spacing: 0;
   color: #333;
   margin: 0 0 1rem 0;
+  text-transform: uppercase;
 }
 
 @media (max-width: 1024px) {
@@ -5878,6 +5914,7 @@ hr {
   font: normal normal normal 20px/34px "Titillium Web", sans-serif;
   letter-spacing: 0;
   color: #333;
+  text-transform: uppercase;
 }
 
 @media (max-width: 1024px) {
@@ -6200,6 +6237,7 @@ hr {
   letter-spacing: 0;
   color: #333;
   margin: 0;
+  text-transform: uppercase;
 }
 
 .rich-text__title {
@@ -6306,12 +6344,20 @@ hr {
 .teaser-tiles__item .paragraph--type--teaser-tiles .banner-image {
   width: 100%;
   border-radius: 0.5rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+  aspect-ratio: 1.622;
 }
 
-@media (max-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1024px) {
+  .teaser-tiles__item .paragraph--type--teaser-tiles .banner-image {
+    aspect-ratio: 1.64;
+  }
+}
+
+@media (max-width: 767px) {
   .teaser-tiles__item .paragraph--type--teaser-tiles .banner-image {
-    -o-object-fit: cover;
-       object-fit: cover;
+    aspect-ratio: 0.78;
   }
 }
 

diff --git a/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_banner.scss b/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_banner.scss
@@ -37,9 +37,13 @@
     }
 
     .right-image {
-      justify-content: center;
+      justify-content: flex-start;
       display: flex;
       flex-wrap: wrap;
+
+      @include breakpoint($upto-desktop) {
+        justify-content: center;
+      }
     }
 
     &__title {
@@ -147,6 +151,10 @@
         .citation-modal {
           display: none;
 
+          a {
+            text-decoration: underline;
+          }
+
           &.active {
             display: block;
             position: fixed;
@@ -302,9 +310,11 @@
             background: #4e5e9e 0% 0% no-repeat padding-box;
             border-radius: 0.5rem;
             padding: 1.875rem;
+            flex: 0 33.3%;
 
             @include breakpoint($upto-tablet) {
               width: 100%;
+              flex: 0 100%;
             }
 
             .paragraph-citation {
@@ -355,6 +365,10 @@
         padding-top: 6.375rem;
         justify-content: flex-start;
 
+        @include breakpoint($upto-desktop) {
+          justify-content: center;
+        }
+
         @include breakpoint($upto-tablet) {
           padding-top: 6.875rem;
           justify-content: center;

diff --git a/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_contact-form.scss b/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_contact-form.scss
@@ -28,7 +28,12 @@
       }
 
       .contact-form__mautic {
-        align-self: flex-end;
+        align-self: flex-start;
+        margin-top: 118px;
+
+        @include breakpoint($upto-desktop) {
+          margin-top: 0;
+        }
 
         .mauticform_wrapper {
           max-width: 100%;
@@ -108,6 +113,7 @@
           font: normal normal normal 20px/34px $secondary-font;
           letter-spacing: 0;
           color: #333;
+          text-transform: uppercase;
 
           @include breakpoint($upto-desktop) {
             font: normal normal normal 20px/20px $secondary-font;

diff --git a/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_footer.scss b/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_footer.scss
@@ -25,8 +25,8 @@
 
   .back__to-top {
     background-color: #6474b7;
-    right: 6rem;
-    bottom: 7rem;
+    right: 3rem;
+    bottom: 3.5rem;
     left: unset;
     margin-bottom: 0;
     position: fixed;
@@ -39,8 +39,8 @@
     z-index: 9;
 
     @include breakpoint($upto-tablet) {
-      right: 32px;
-      bottom: 106px;
+      right: 18px;
+      bottom: 36px;
     }
 
     a {

diff --git a/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_form.scss b/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_form.scss
@@ -84,6 +84,7 @@
               color: #afafaf;
               border: none;
               border-radius: 0.5rem 0 0 0.5rem;
+              height: 60px;
 
               @media screen and (max-width: 1100px) {
                 width: 100%;

diff --git a/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_header.scss b/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_header.scss
@@ -1,3 +1,7 @@
+.nodetype__localized_landing_pages {
+  background-color: #4e5e9e;
+}
+
 .localized-page {
   position: relative;
 

diff --git a/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_link-list.scss b/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_link-list.scss
@@ -26,6 +26,7 @@
           letter-spacing: 0;
           color: #333;
           margin: 0 0 1rem 0;
+          text-transform: uppercase;
 
           @include breakpoint($upto-desktop) {
             text-align: center;
@@ -96,6 +97,7 @@
             font: normal normal normal 20px/34px $secondary-font;
             letter-spacing: 0;
             color: #333;
+            text-transform: uppercase;
 
             @include breakpoint($upto-desktop) {
               width: 100%;

diff --git a/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_rich-text.scss b/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_rich-text.scss
@@ -92,6 +92,7 @@
     letter-spacing: 0;
     color: #333;
     margin: 0;
+    text-transform: uppercase;
   }
 
   &__title {

diff --git a/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_teaser-tiles.scss b/docroot/themes/custom/mauticorg_base/sass/components/localized-components/_teaser-tiles.scss
@@ -66,9 +66,15 @@
       .banner-image {
         width: 100%;
         border-radius: 0.5rem;
+        object-fit: cover;
+        aspect-ratio: 1.622;
 
-        @include breakpoint($upto-desktop) {
-          object-fit: cover;
+        @include breakpoint($only-tablet) {
+          aspect-ratio: 1.64;
+        }
+
+        @include breakpoint($upto-tablet) {
+          aspect-ratio: 0.78;
         }
       }
     }