Merge pull request #1380 from Automattic/fix/mayland-header-layout

Mayland: Update the header layout to horizontal

mayland/sass/_config-child-theme-deep.scss

@@ -322,7 +322,7 @@ $config-header: (
 		// Fonts
 		"font": (
 			"family": map-deep-get($config-global, "font", "family", "primary"),
-			"size": map-deep-get($config-global, "font", "size", "base"),
+			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": 600,
 			"line-height": 1,
 		),

mayland/sass/_extra-child-theme.scss

@@ -37,6 +37,12 @@ a {
 	@include media(mobile) {
 		padding: #{1.5 * $spacing_unit} $spacing_vertical;
 	}
+
+	.site-branding {
+		.site-description {
+			display: none;
+		}
+	}
 }
 
 /**
@@ -44,13 +50,7 @@ a {
  */
 @include media(mobile) {
 	.site-header {
-		align-items: center;
-		display: grid;
-		grid-template-columns: auto;
-		grid-template-rows: auto;
-		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
-		grid-template-areas:
-			"site-branding main-navigation";
+		display: flex;
 
 		&:before,
 		&:after {
@@ -64,8 +64,9 @@ a {
 		}
 
 		.site-branding {
-			grid-area: site-branding;
 			align-self: center;
+			flex: 1 1 auto;
+			padding-right: #{map-deep-get($config-global, "spacing", "unit")};
 		}
 
 		.site-logo {
@@ -82,8 +83,6 @@ a {
 
 		.main-navigation {
 			align-self: center;
-			grid-area: main-navigation;
-			justify-self: flex-end;
 
 			& > div > ul {
 				justify-content: flex-end;
@@ -91,7 +90,7 @@ a {
 				margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
 
 				& > li > a {
-					padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
+					padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} #{map-deep-get($config-header, "main-nav", "link-padding")};
 				}
 
 				& > .menu-item-has-children > a::after {
@@ -141,6 +140,7 @@ a {
 		.social-navigation {
 			align-self: center;
 			justify-self: flex-end;
+			padding-left: #{map-deep-get($config-global, "spacing", "unit")};
 		}
 	}
 }

mayland/style-rtl.css

@@ -2471,7 +2471,7 @@ table th,
 	color: #8D6708;
 	display: block;
 	font-family: Poppins, sans-serif;
-	font-size: 1rem;
+	font-size: 0.83333rem;
 	font-weight: 600;
 	padding: 8px 0;
 }
@@ -3448,17 +3448,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.site-header .site-branding .site-description {
+	display: none;
+}
+
 /**
  * CSS-grid Desktop Menu
  */
 @media only screen and (min-width: 560px) {
 	.site-header {
-		align-items: center;
-		display: grid;
-		grid-template-columns: auto;
-		grid-template-rows: auto;
-		grid-column-gap: 16px;
-		grid-template-areas: "site-branding main-navigation";
+		display: flex;
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3469,8 +3468,9 @@ p:not(.site-title) a:hover {
 		margin-bottom: 0;
 	}
 	.site-header .site-branding {
-		grid-area: site-branding;
 		align-self: center;
+		flex: 1 1 auto;
+		padding-left: 16px;
 	}
 	.site-header .site-logo + .site-title {
 		margin-top: 16px;
@@ -3480,8 +3480,6 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .main-navigation {
 		align-self: center;
-		grid-area: main-navigation;
-		justify-self: flex-end;
 	}
 	.site-header .main-navigation > div > ul {
 		justify-content: flex-end;
@@ -3489,11 +3487,37 @@ p:not(.site-title) a:hover {
 		margin-left: -8px;
 	}
 	.site-header .main-navigation > div > ul > li > a {
-		padding: 0 16px;
+		padding: 8px 16px;
 	}
 	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
 	}
+	.site-header .main-navigation > div > ul > .menu-item-has-children .submenu-expand {
+		display: inline-block;
+		margin-left: 0;
+		/* Priority+ Menu */
+	}
+	.site-header .main-navigation > div > ul > .menu-item-has-children .submenu-expand.main-menu-more-toggle {
+		position: relative;
+		height: 24px;
+		line-height: 1;
+		width: 24px;
+		padding: 0;
+		margin-right: 0;
+	}
+	.site-header .main-navigation > div > ul > .menu-item-has-children .submenu-expand.main-menu-more-toggle svg {
+		height: 24px;
+		width: 24px;
+		top: 0;
+		vertical-align: text-bottom;
+	}
+	.wp-customizer-unloading .site-header .main-navigation > div > ul > .menu-item-has-children .submenu-expand, .site-header .main-navigation > div > ul > .menu-item-has-children .submenu-expand.is-empty {
+		display: none;
+	}
+	.site-header .main-navigation > div > ul > .menu-item-has-children .submenu-expand svg {
+		position: relative;
+		top: 0.2rem;
+	}
 	.site-header .main-navigation > div > ul > li:hover > a,
 	.site-header .main-navigation > div > ul > li.focus > a,
 	.site-header .main-navigation > div > ul > li.current-menu-item > a {
@@ -3536,6 +3560,7 @@ p:not(.site-title) a:hover {
 	.site-header .social-navigation {
 		align-self: center;
 		justify-self: flex-end;
+		padding-right: 16px;
 	}
 }
 

mayland/style.css

@@ -2488,7 +2488,7 @@ table th,
 	color: #8D6708;
 	display: block;
 	font-family: Poppins, sans-serif;
-	font-size: 1rem;
+	font-size: 0.83333rem;
 	font-weight: 600;
 	padding: 8px 0;
 }
@@ -3477,17 +3477,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.site-header .site-branding .site-description {
+	display: none;
+}
+
 /**
  * CSS-grid Desktop Menu
  */
 @media only screen and (min-width: 560px) {
 	.site-header {
-		align-items: center;
-		display: grid;
-		grid-template-columns: auto;
-		grid-template-rows: auto;
-		grid-column-gap: 16px;
-		grid-template-areas: "site-branding main-navigation";
+		display: flex;
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3498,8 +3497,9 @@ p:not(.site-title) a:hover {
 		margin-bottom: 0;
 	}
 	.site-header .site-branding {
-		grid-area: site-branding;
 		align-self: center;
+		flex: 1 1 auto;
+		padding-right: 16px;
 	}
 	.site-header .site-logo + .site-title {
 		margin-top: 16px;
@@ -3509,8 +3509,6 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .main-navigation {
 		align-self: center;
-		grid-area: main-navigation;
-		justify-self: flex-end;
 	}
 	.site-header .main-navigation > div > ul {
 		justify-content: flex-end;
@@ -3518,7 +3516,7 @@ p:not(.site-title) a:hover {
 		margin-right: -8px;
 	}
 	.site-header .main-navigation > div > ul > li > a {
-		padding: 0 16px;
+		padding: 8px 16px;
 	}
 	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
@@ -3565,6 +3563,7 @@ p:not(.site-title) a:hover {
 	.site-header .social-navigation {
 		align-self: center;
 		justify-self: flex-end;
+		padding-left: 16px;
 	}
 }