Increase performance - mobile friendly

eea · Feb 9, 2023 · 07d86c8 · 07d86c8
1 parent 4f38c7a
commit 07d86c8
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/theme/themes/eea/extras/footer.less b/theme/themes/eea/extras/footer.less
@@ -124,10 +124,14 @@ footer .footer-wrapper .menu {
     flex-direction: column;
   }
 
- footer .footer-wrapper .menu .copyright a {
+  footer .footer-wrapper .menu .copyright a {
     font-size: @mobileMenuCopyrightFontSize;
     font-weight: @mobileMenuCopyrightFontWeight;
   }
+
+  .contact-block .subcontact {
+    margin-top: @mobileSubcontactBlockMarginTop;
+  }
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
@@ -216,7 +220,7 @@ footer .footer-wrapper .menu {
 
   .subfooter .logo-header {
     // To match the figma align
-    margin-left: @computerLogoHeaderMarginLeft
+    margin-left: @computerLogoHeaderMarginLeft;
   }
 
   .subfooter .item {
@@ -246,7 +250,6 @@ footer .footer-wrapper .menu {
   }
 
   .footer .footer-wrapper .menu {
-
     a {
       font-size: @computerMenuFontSize;
     }

diff --git a/theme/themes/eea/extras/footer.variables b/theme/themes/eea/extras/footer.variables
@@ -47,6 +47,7 @@
 @tabletContactGap                   : @rem-space-4;
 @contactGap                         : @rem-space-8;
 @mobileContactIconMarginRight       : @space-3;
+@mobileSubcontactBlockMarginTop     : @space-3;
 @mobileContactIconFontSize          : @font-size-4;
 @computerContactIconFontSize        : @font-size-9;
 @tabletSubcontactIconFontSize       : @font-size-0;

diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -370,6 +370,7 @@
   position: relative;
   bottom: 0;
 }
+
 .cards-carousel .slick-dots li button:before {
   background-color: @carouselDotsBackgroundColor;
   color: transparent;
@@ -390,6 +391,13 @@
   outline-style: auto;
 }
 
+@media only screen and (max-width: @tabletBreakpoint) {
+  .cards-carousel .slick-dots li button {
+    width: @mobileCarouselDotsButtonWidth;
+    height: @mobileCarouselDotsButtonHeight;
+  }
+}
+
 @media only screen and (min-width: @computerBreakpoint) {
   .cards-carousel .slick-dots li button:before {
     width: inherit;

diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
@@ -348,6 +348,8 @@
 @carouselDotsActiveBackgroundColor: @darkCerulean;
 @mobileCarouselDotsWidth: 0.875rem;
 @mobileCarouselDotsHeight: 0.875rem;
+@mobileCarouselDotsButtonWidth: 3.125rem;
+@mobileCarouselDotsButtonHeight: 3.125rem;
 
 /* Slick wrapper */
 @slickListMargin: 0 -0.75em;