Merge pull request #1153 from Automattic/fix/mobile-desktop-menu-layout-2

Leven: Refactoring the header to be more flexible

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

@@ -319,7 +319,7 @@ $config-header: (
 			"weight": bold,
 			"line-height": 1,
 		),
-		"link-padding": map-deep-get($config-global, "spacing", "unit"),
+		"link-padding": (0.5 * map-deep-get($config-global, "spacing", "unit")),
 	),
 
 	"social-nav": (

leven/sass/_extra-child-theme.scss

@@ -45,7 +45,7 @@ a {
 }
 
 .site-logo:not(:last-child) {
-	margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+	padding-bottom: (0.5 * map-deep-get($config-global, "spacing", "unit"));
 }
 
 /**
@@ -67,7 +67,7 @@ a {
 		grid-template-rows: auto;
 		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
 		grid-template-areas:
-			"site-branding ."
+			"site-logo site-logo"
 			"site-branding main-navigation"
 			"site-branding social-navigation";
 
@@ -84,15 +84,17 @@ a {
 
 		.site-logo {
 			display: block;
+			grid-area: site-logo;
 		}
 
 		.site-branding {
-			align-self: auto;
+			align-self: baseline;
 			max-width: inherit;
 			grid-area: site-branding;
 		}
 
 		.main-navigation {
+			align-self: baseline;
 			grid-area: main-navigation;
 			justify-self: end;
 
@@ -100,9 +102,10 @@ a {
 				justify-content: flex-end;
 			}
 		}
+
 		.social-navigation {
 			grid-area: social-navigation;
-			justify-self: end;
+			justify-self: flex-end;
 
 			& > div > ul {
 				justify-content: flex-end;

leven/style-rtl.css

@@ -2160,7 +2160,7 @@ table th,
 	flex-wrap: wrap;
 	list-style: none;
 	max-width: none;
-	margin: 0 -16px;
+	margin: 0 -8px;
 	position: relative;
 	/* Sub-menus Flyout */
 }
@@ -2254,7 +2254,7 @@ table th,
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1rem;
 	font-weight: bold;
-	padding: 16px;
+	padding: 8px;
 }
 
 .main-navigation a:link, .main-navigation a:visited {
@@ -2273,8 +2273,8 @@ table th,
 }
 
 .main-navigation .sub-menu .menu-item a {
-	padding-top: 8px;
-	padding-bottom: 8px;
+	padding-top: 4px;
+	padding-bottom: 4px;
 }
 
 .main-navigation .sub-menu .menu-item a::before {
@@ -2407,7 +2407,7 @@ table th,
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.82474rem;
 	font-weight: bold;
-	padding: 16px;
+	padding: 8px;
 	color: currentColor;
 }
 
@@ -3222,7 +3222,7 @@ p:not(.site-title) a:hover {
 }
 
 .site-logo:not(:last-child) {
-	margin-bottom: 16px;
+	padding-bottom: 8px;
 }
 
 /**
@@ -3240,7 +3240,7 @@ p:not(.site-title) a:hover {
 		grid-template-columns: auto;
 		grid-template-rows: auto;
 		grid-column-gap: 16px;
-		grid-template-areas: "site-branding ." "site-branding main-navigation" "site-branding social-navigation";
+		grid-template-areas: "site-logo site-logo" "site-branding main-navigation" "site-branding social-navigation";
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3252,13 +3252,15 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .site-logo {
 		display: block;
+		grid-area: site-logo;
 	}
 	.site-header .site-branding {
-		align-self: auto;
+		align-self: baseline;
 		max-width: inherit;
 		grid-area: site-branding;
 	}
 	.site-header .main-navigation {
+		align-self: baseline;
 		grid-area: main-navigation;
 		justify-self: end;
 	}
@@ -3267,7 +3269,7 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .social-navigation {
 		grid-area: social-navigation;
-		justify-self: end;
+		justify-self: flex-end;
 	}
 	.site-header .social-navigation > div > ul {
 		justify-content: flex-end;

leven/style.css

@@ -2165,7 +2165,7 @@ table th,
 	flex-wrap: wrap;
 	list-style: none;
 	max-width: none;
-	margin: 0 -16px;
+	margin: 0 -8px;
 	position: relative;
 	/* Sub-menus Flyout */
 }
@@ -2259,7 +2259,7 @@ table th,
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1rem;
 	font-weight: bold;
-	padding: 16px;
+	padding: 8px;
 }
 
 .main-navigation a:link, .main-navigation a:visited {
@@ -2278,8 +2278,8 @@ table th,
 }
 
 .main-navigation .sub-menu .menu-item a {
-	padding-top: 8px;
-	padding-bottom: 8px;
+	padding-top: 4px;
+	padding-bottom: 4px;
 }
 
 .main-navigation .sub-menu .menu-item a::before {
@@ -2412,7 +2412,7 @@ table th,
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.82474rem;
 	font-weight: bold;
-	padding: 16px;
+	padding: 8px;
 	color: currentColor;
 }
 
@@ -3227,7 +3227,7 @@ p:not(.site-title) a:hover {
 }
 
 .site-logo:not(:last-child) {
-	margin-bottom: 16px;
+	padding-bottom: 8px;
 }
 
 /**
@@ -3245,7 +3245,7 @@ p:not(.site-title) a:hover {
 		grid-template-columns: auto;
 		grid-template-rows: auto;
 		grid-column-gap: 16px;
-		grid-template-areas: "site-branding ." "site-branding main-navigation" "site-branding social-navigation";
+		grid-template-areas: "site-logo site-logo" "site-branding main-navigation" "site-branding social-navigation";
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3257,13 +3257,15 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .site-logo {
 		display: block;
+		grid-area: site-logo;
 	}
 	.site-header .site-branding {
-		align-self: auto;
+		align-self: baseline;
 		max-width: inherit;
 		grid-area: site-branding;
 	}
 	.site-header .main-navigation {
+		align-self: baseline;
 		grid-area: main-navigation;
 		justify-self: end;
 	}
@@ -3272,7 +3274,7 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .social-navigation {
 		grid-area: social-navigation;
-		justify-self: end;
+		justify-self: flex-end;
 	}
 	.site-header .social-navigation > div > ul {
 		justify-content: flex-end;

leven/template-parts/header/site-branding.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Displays header site branding
+ *
+ * @package WordPress
+ * @subpackage Varia
+ * @since 1.0.0
+ */
+?>
+
+<?php if ( has_custom_logo() ) : ?>
+	<div class="site-logo"><?php the_custom_logo(); ?></div>
+<?php endif; ?>
+
+<div class="site-branding">
+	<?php $blog_info = get_bloginfo( 'name' ); ?>
+	<?php if ( ! empty( $blog_info ) ) : ?>
+		<?php if ( is_front_page() && is_home() ) : ?>
+			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+		<?php else : ?>
+			<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
+		<?php endif; ?>
+	<?php endif; ?>
+
+	<?php
+	$description = get_bloginfo( 'description', 'display' );
+	if ( $description || is_customize_preview() ) :
+		?>
+			<p class="site-description">
+				<?php echo $description; ?>
+			</p>
+	<?php endif; ?>
+</div><!-- .site-branding -->