Hever: Add site-branding template part & rework header grid

hever/sass/_extra-child-theme.scss

@@ -38,30 +38,12 @@ a {
 /**
  * Mobile-Menu
  */
-#toggle-menu {
-	position: absolute;
-	right: #{map-deep-get($config-global, "spacing", "unit")};
-	top: #{map-deep-get($config-global, "spacing", "unit")};
-}
 
-.site-branding {
-	max-width: calc(100% - 100px - #{map-deep-get($config-global, "spacing", "unit")});
-}
-
-.site-logo:not(:last-child) {
-	padding-bottom: #{map-deep-get($config-global, "spacing", "unit")};
-}
 
 /**
  * CSS-grid Desktop Menu
  */
 @include media(mobile) {
-	#toggle-menu {
-		position: inherit;
-		right: auto;
-		top: auto;
-	}
-
 	.site-header {
 		align-items: center;
 		display: grid;
@@ -70,8 +52,8 @@ a {
 		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
 		grid-template-areas:
 			"site-logo site-logo"
-			"site-branding main-navigation"
-			"site-branding social-navigation";
+			"site-title main-navigation"
+			"site-description social-navigation";
 
 		&:before,
 		&:after {
@@ -85,20 +67,28 @@ a {
 		}
 
 		.site-logo {
-			display: block;
 			grid-area: site-logo;
+			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
 		}
 
-		.site-branding {
-			align-self: baseline;
-			grid-area: site-branding;
-			max-width: inherit;
+		.site-title {
+			align-self: flex-end;
+			grid-area: site-title;
+
+			& + .site-description {
+				margin-top: 0;
+			}
+		}
+
+		.site-description {
+			align-self: center;
+			grid-area: site-description;
 		}
 
 		.main-navigation {
-			align-self: baseline;
+			align-self: center;
 			grid-area: main-navigation;
-			justify-self: end;
+			justify-self: flex-end;
 
 			& > div > ul {
 				justify-content: flex-end;
@@ -106,8 +96,7 @@ a {
 				margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
 
 				& > li {
-					margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
-					padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
+					padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
 
 					& > a {
 						padding: 0;
@@ -130,7 +119,6 @@ a {
 				& > ul {
 					box-shadow: none;
 					overflow: hidden;
-					padding-top: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
 
 					&:before {
 						border-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid #{map-deep-get($config-global, "color", "primary", "default")};
@@ -160,6 +148,7 @@ a {
 		}
 
 		.social-navigation {
+			align-self: center;
 			grid-area: social-navigation;
 			justify-self: flex-end;
 		}
@@ -169,11 +158,21 @@ a {
 // Social Menu
 .social-navigation {
 	& > div > ul {
-		justify-content: flex-end;
 		flex-wrap: wrap;
 	}
 }
 
+/**
+ * Site Title
+ */
+.site-description {
+	color: #{map-deep-get($config-header, "branding", "color", "text")};
+}
+
+.site-title + .site-description {
+	margin-top: -#{map-deep-get($config-global, "spacing", "unit")};
+}
+
 /**
  * Footer Menu
  */

hever/style-rtl.css

@@ -3273,36 +3273,17 @@ p:not(.site-title) a:hover {
 /**
  * Mobile-Menu
  */
-#toggle-menu {
-	position: absolute;
-	left: 16px;
-	top: 16px;
-}
-
-.site-branding {
-	max-width: calc(100% - 100px - 16px);
-}
-
-.site-logo:not(:last-child) {
-	padding-bottom: 16px;
-}
-
 /**
  * CSS-grid Desktop Menu
  */
 @media only screen and (min-width: 560px) {
-	#toggle-menu {
-		position: inherit;
-		left: auto;
-		top: auto;
-	}
 	.site-header {
 		align-items: center;
 		display: grid;
 		grid-template-columns: auto;
 		grid-template-rows: auto;
 		grid-column-gap: 16px;
-		grid-template-areas: "site-logo site-logo" "site-branding main-navigation" "site-branding social-navigation";
+		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation";
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3313,18 +3294,24 @@ p:not(.site-title) a:hover {
 		margin-bottom: 0;
 	}
 	.site-header .site-logo {
-		display: block;
 		grid-area: site-logo;
+		margin-bottom: 16px;
+	}
+	.site-header .site-title {
+		align-self: flex-end;
+		grid-area: site-title;
 	}
-	.site-header .site-branding {
-		align-self: baseline;
-		grid-area: site-branding;
-		max-width: inherit;
+	.site-header .site-title + .site-description {
+		margin-top: 0;
+	}
+	.site-header .site-description {
+		align-self: center;
+		grid-area: site-description;
 	}
 	.site-header .main-navigation {
-		align-self: baseline;
+		align-self: center;
 		grid-area: main-navigation;
-		justify-self: end;
+		justify-self: flex-end;
 	}
 	.site-header .main-navigation > div > ul {
 		justify-content: flex-end;
@@ -3332,8 +3319,7 @@ p:not(.site-title) a:hover {
 		margin-left: -8px;
 	}
 	.site-header .main-navigation > div > ul > li {
-		margin-bottom: 16px;
-		padding: 0 8px;
+		padding: 8px;
 	}
 	.site-header .main-navigation > div > ul > li > a {
 		padding: 0;
@@ -3351,7 +3337,6 @@ p:not(.site-title) a:hover {
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
-		padding-top: 8px;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
 	.site-header .main-navigation > div > ul > li.focus > ul:before,
@@ -3382,16 +3367,27 @@ p:not(.site-title) a:hover {
 		background: #303030;
 	}
 	.site-header .social-navigation {
+		align-self: center;
 		grid-area: social-navigation;
 		justify-self: flex-end;
 	}
 }
 
 .social-navigation > div > ul {
-	justify-content: flex-end;
 	flex-wrap: wrap;
 }
 
+/**
+ * Site Title
+ */
+.site-description {
+	color: #757575;
+}
+
+.site-title + .site-description {
+	margin-top: -16px;
+}
+
 /**
  * Footer Menu
  */

hever/style.css

@@ -3278,36 +3278,17 @@ p:not(.site-title) a:hover {
 /**
  * Mobile-Menu
  */
-#toggle-menu {
-	position: absolute;
-	right: 16px;
-	top: 16px;
-}
-
-.site-branding {
-	max-width: calc(100% - 100px - 16px);
-}
-
-.site-logo:not(:last-child) {
-	padding-bottom: 16px;
-}
-
 /**
  * CSS-grid Desktop Menu
  */
 @media only screen and (min-width: 560px) {
-	#toggle-menu {
-		position: inherit;
-		right: auto;
-		top: auto;
-	}
 	.site-header {
 		align-items: center;
 		display: grid;
 		grid-template-columns: auto;
 		grid-template-rows: auto;
 		grid-column-gap: 16px;
-		grid-template-areas: "site-logo site-logo" "site-branding main-navigation" "site-branding social-navigation";
+		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation";
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3318,18 +3299,24 @@ p:not(.site-title) a:hover {
 		margin-bottom: 0;
 	}
 	.site-header .site-logo {
-		display: block;
 		grid-area: site-logo;
+		margin-bottom: 16px;
+	}
+	.site-header .site-title {
+		align-self: flex-end;
+		grid-area: site-title;
 	}
-	.site-header .site-branding {
-		align-self: baseline;
-		grid-area: site-branding;
-		max-width: inherit;
+	.site-header .site-title + .site-description {
+		margin-top: 0;
+	}
+	.site-header .site-description {
+		align-self: center;
+		grid-area: site-description;
 	}
 	.site-header .main-navigation {
-		align-self: baseline;
+		align-self: center;
 		grid-area: main-navigation;
-		justify-self: end;
+		justify-self: flex-end;
 	}
 	.site-header .main-navigation > div > ul {
 		justify-content: flex-end;
@@ -3337,8 +3324,7 @@ p:not(.site-title) a:hover {
 		margin-right: -8px;
 	}
 	.site-header .main-navigation > div > ul > li {
-		margin-bottom: 16px;
-		padding: 0 8px;
+		padding: 8px;
 	}
 	.site-header .main-navigation > div > ul > li > a {
 		padding: 0;
@@ -3356,7 +3342,6 @@ p:not(.site-title) a:hover {
 	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
 		box-shadow: none;
 		overflow: hidden;
-		padding-top: 8px;
 	}
 	.site-header .main-navigation > div > ul > li:hover > ul:before,
 	.site-header .main-navigation > div > ul > li.focus > ul:before,
@@ -3387,16 +3372,27 @@ p:not(.site-title) a:hover {
 		background: #303030;
 	}
 	.site-header .social-navigation {
+		align-self: center;
 		grid-area: social-navigation;
 		justify-self: flex-end;
 	}
 }
 
 .social-navigation > div > ul {
-	justify-content: flex-end;
 	flex-wrap: wrap;
 }
 
+/**
+ * Site Title
+ */
+.site-description {
+	color: #757575;
+}
+
+.site-title + .site-description {
+	margin-top: -16px;
+}
+
 /**
  * Footer Menu
  */

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

@@ -0,0 +1,31 @@
+<?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; ?>
+
+<?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; ?>