fix(subsite): Fix logo size on subsite section #279 from eea/subsite-…

…fixes
eea · Jan 11, 2023 · 8f6cf94 · 8f6cf94
2 parents 83e8d9d + 293fe65
commit 8f6cf94
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 24 deletions.
diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less
@@ -298,27 +298,33 @@
 
 /* Subsite */
 .eea.header .logo-wrapper {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 2em;
+  margin-top: @mobileLogoMarginTop;
+  gap: @subsiteFlexGap;
+
+  .eea-logo {
+    margin: 0;
+  }
 }
 
 .eea.header .subsite-logo {
-  margin-top: @mobileLogoMarginTop;
-  font-size: @mobileSubsiteFontSize;
+  position: relative;
+  color: @subsiteColor;
   font-family: @subsiteFontFamily;
+  font-size: @mobileSubsiteFontSize;
   font-weight: @subsiteFontWeight;
-  color: @subsiteColor;
-  position: relative;
+  line-height: @subsiteLineHeight;
 
   &:before {
     position: absolute;
-    width: 1px;
-    height: 70%;
-    content: ' ';
+    top: @subsiteDividerTopPosition;
+    left: calc(-@subsiteFlexGap / 2);
+    width: @subsiteDividerWidth;
+    height: @subsiteDividerHeight;
     background-color: @subsiteDividerColor;
-    left: -15px;
-    top: 50%;
+    content: ' ';
     transform: translate(-50%, -50%);
   }
 }
@@ -377,6 +383,7 @@
   .homepage .content-area {
     margin-top: -@mobileMainSectionHeight;
   }
+
   .eea.header .top.bar .ui.container {
     width: 100% !important; //override semantic auto to display content with space between them
   }
@@ -525,8 +532,11 @@
     margin-top: @tabletLogoMarginTop;
   }
 
-  .eea.header .subsite-logo {
+  .eea.header .logo-wrapper {
     margin-top: @tabletLogoMarginTop;
+  }
+
+  .eea.header .subsite-logo {
     font-size: @tabletSubsiteFontSize;
   }
 
@@ -545,6 +555,15 @@
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
+  .eea.header .subsite-logo {
+    position: absolute;
+    z-index: 1;
+    top: @subsiteLogoTopPosition;
+    left: calc(100% + @subsiteFlexGap);
+    width: 400px;
+    transform: translateY(-@subsiteLogoTopPosition);
+  }
+
   .burger-action.mobile {
     display: none;
   }
@@ -625,8 +644,11 @@
     margin-top: @computerLogoMarginTop;
   }
 
-  .eea.header .subsite-logo {
+  .eea.header .logo-wrapper {
     margin-top: @computerLogoMarginTop;
+  }
+
+  .eea.header .subsite-logo {
     font-size: @computerSubsiteFontSize;
   }
 
@@ -648,6 +670,12 @@
   }
 }
 
+@media only screen and (min-width: @largestSmallMonitor) {
+  .eea.header .subsite-logo {
+    left: calc(100% + calc(@subsiteFlexGap / 2));
+  }
+}
+
 /************************
         MEGA MENU
 ************************/
@@ -672,9 +700,9 @@
 }
 
 #mega-menu .item.sub-title {
+  color: @megaMenuTextColor;
   font-size: @mobileMegaMenuSubTitleFontSize;
   font-weight: @megaMenuSubTitleFontWeight;
-  color: @megaMenuTextColor;
 }
 
 #mega-menu .mega-menu-title {
@@ -706,8 +734,8 @@
 }
 
 #at-a-glance {
-  background-color: @megaMenuGlanceBackgroundColor;
   padding: @megaMenuGlancePadding !important;
+  background-color: @megaMenuGlanceBackgroundColor;
 
   .item {
     margin: @megaMenuGlanceListItemMargin;
@@ -722,7 +750,7 @@
 }
 
 .ui.grid > .column > .ui.grid {
-  margin-top: 0; 
+  margin-top: 0;
 }
 
 #mega-menu .ui.grid {
@@ -736,9 +764,9 @@
 }
 
 #mega-menu .active:not(.title-link):not(.button) > span {
-  border-left: @megaMenuListItemActiveBorder;
   padding-left: @megaMenuListItemActivePadding;
   border-left: @megaMenuListItemActiveBorder;
+  border-left: @megaMenuListItemActiveBorder;
 }
 
 .nav-description {
@@ -748,13 +776,13 @@
 /*Mega Menu Accordion - Tablet & Mobile */
 #mega-menu .ui.accordion {
   .title {
-    font-size: @megaMenuAccordionTitleFontSize;
-    font-weight: @megaMenuAccordionTitleFontWeight;
-    color: @megaMenuTextColor;
     padding: @megaMenuAccordionTitlePadding;
     border-bottom: @megaMenuAccordionTitleBorderBottom;
     color: @megaMenuTextColor;
+    color: @megaMenuTextColor;
+    font-size: @megaMenuAccordionTitleFontSize;
     font-size: @megaMenuAccordionTitleFontSize;
+    font-weight: @megaMenuAccordionTitleFontWeight;
 
     i:before {
       font-size: @megaMenuAccordionIconFontSize;
@@ -804,7 +832,8 @@
 #main #mega-menu .mobile > .ui.accordion > .title:first-child {
   display: none;
 }
-#main #mega-menu .ui.accordion .title:first-child  + .content {
+
+#main #mega-menu .ui.accordion .title:first-child + .content {
   display: none;
 }
 
@@ -855,15 +884,14 @@
   }
 
   #mega-menu .sub-title {
+    color: @megaMenuTextColor;
     font-size: @computerMegaMenuSubTitleFontSize;
     font-weight: @megaMenuSubTitleFontWeight;
-    color: @megaMenuTextColor;
 
     &:hover {
       text-decoration: underline;
     }
   }
 }
 
-
 .loadUIOverrides();
diff --git a/theme/themes/eea/extras/header.variables b/theme/themes/eea/extras/header.variables
@@ -133,9 +133,15 @@
 @subsiteFontFamily                    : @headerFont;
 @subsiteFontWeight                    : @headerFontWeight;
 @subsiteColor                         : @linkColor;
+@subsiteLineHeight                    : 1.1;
+@subsiteFlexGap                       : 30px;
+@subsiteLogoTopPosition               : 50%;
+@subsiteDividerHeight                 : 110%;
+@subsiteDividerWidth                  : 1px;
+@subsiteDividerTopPosition            : 50%;
 @subsiteDividerColor                  : @darkCyan;
-@mobileSubsiteFontSize                : unit(@h4, em);
-@tabletSubsiteFontSize                : unit(@h3, em);
+@mobileSubsiteFontSize                : unit(@h6, em);
+@tabletSubsiteFontSize                : unit(@h4, em);
 @computerSubsiteFontSize              : unit(@h2, em);
 
 /*-----------------