Merge pull request #4520 from Automattic/skatepark-improve-header

Skatepark: improve header styles to fit new design guidelines

skatepark/assets/theme.css

@@ -487,6 +487,15 @@ header.wp-block-template-part > .wp-block-group {
 	align-items: flex-start;
 }
 
+@media (max-width: 599px) {
+	header.wp-block-template-part > .wp-block-group {
+		grid-row-gap: calc( 0.25 * var(--wp--custom--margin--vertical));
+		display: grid;
+		grid-template-areas: "brand menu" "social social";
+		border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
+	}
+}
+
 header.wp-block-template-part > .wp-block-group > * {
 	flex-grow: 1;
 }
@@ -507,6 +516,19 @@ header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-
 	margin-right: calc( -1 * ( 8px + 0.25em ));
 }
 
+@media (min-width: 600px) {
+	header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
+		margin-top: calc( -1 * ( 8px + 0.25em ));
+	}
+}
+
+@media (max-width: 599px) {
+	header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
+		margin-left: -0.25em;
+		margin-right: 0;
+	}
+}
+
 header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only > .wp-social-link {
 	padding: 0;
 }
@@ -522,6 +544,7 @@ header.wp-block-template-part .site-brand {
 @media (max-width: 599px) {
 	header.wp-block-template-part .site-brand {
 		grid-template-areas: "logo" "title" "tagline";
+		grid-area: brand;
 	}
 }
 
@@ -530,12 +553,11 @@ header.wp-block-template-part .site-brand .wp-block-site-logo {
 	margin: 0;
 	max-width: 120px;
 	align-self: center;
-	justify-self: flex-end;
 }
 
 @media (max-width: 599px) {
 	header.wp-block-template-part .site-brand .wp-block-site-logo {
-		margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+		margin-bottom: calc( 0.75 * var(--wp--custom--margin--vertical));
 	}
 }
 
@@ -544,17 +566,36 @@ header.wp-block-template-part .site-brand .wp-block-site-title {
 	margin: 0 0 0.5em;
 }
 
+@media (max-width: 599px) {
+	header.wp-block-template-part .site-brand .wp-block-site-title {
+		margin: 0 0 0.25em;
+	}
+}
+
 header.wp-block-template-part .site-brand .wp-block-site-tagline {
 	grid-area: tagline;
 	margin: 0;
 }
 
+@media (max-width: 599px) {
+	header.wp-block-template-part .site-brand .wp-block-site-tagline {
+		margin-bottom: calc( 0.25 * var(--wp--custom--margin--vertical));
+	}
+}
+
 @media (max-width: 599px) {
 	.nav-links {
-		display: flex;
-		justify-content: space-between;
-		width: 100%;
-		border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
+		display: contents;
+	}
+	.nav-links .wp-block-navigation__responsive-container-open {
+		margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) - 3px);
+	}
+	.nav-links .wp-block-navigation {
+		grid-area: menu;
+	}
+	.nav-links .wp-block-social-links {
+		justify-content: flex-start;
+		grid-area: social;
 	}
 }
 

skatepark/sass/templates/_header.scss

@@ -7,6 +7,15 @@ header.wp-block-template-part {
 		gap: 0;
 		justify-content: space-between; // Apply a cluster (flex?) layout
 		align-items: flex-start;
+
+		@include break-small-only(){
+			grid-row-gap: calc( 0.25 * var(--wp--custom--margin--vertical) );
+			display: grid;
+			grid-template-areas: 
+				"brand menu"
+				"social social";
+			border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
+		}
 		> * {
 			flex-grow: 1; // Needed to maintain alignment when the containers stack
 			> * { // Apply a stack layout (page 69 of the every-layout.dev PDF) 
@@ -21,6 +30,13 @@ header.wp-block-template-part {
 
 		.wp-block-social-links.is-style-logos-only {
 			margin-right: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the right
+			@include break-small(){
+				margin-top: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the tagline
+			}
+			@include break-small-only(){
+				margin-left: -0.25em;
+				margin-right: 0;
+			}
 			> .wp-social-link {
 				padding: 0; // Needed to override Gutenberg default padding on this block style variation
 			}
@@ -40,33 +56,46 @@ header.wp-block-template-part {
 				"logo"
 				"title"
 				"tagline";
+			grid-area: brand;
 		}
 		.wp-block-site-logo {
 			grid-area: logo;
 			margin: 0;
 			max-width: 120px;
 			align-self: center;
-			justify-self: flex-end;
 			@include break-small-only(){
-				margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
+				margin-bottom: calc( 0.75 * var(--wp--custom--margin--vertical) );
 			}
 		}
 		.wp-block-site-title {
 			grid-area: title;
 			margin: 0 0 0.5em;
+			@include break-small-only(){
+				margin: 0 0 0.25em;
+			}
 		}
 		.wp-block-site-tagline {
 			grid-area: tagline;
 			margin: 0;
+			@include break-small-only(){
+				margin-bottom: calc( 0.25 * var(--wp--custom--margin--vertical) );
+			}
 		}
 	}
 }
 
 @include break-small-only(){
 	.nav-links {
-		display: flex;
-		justify-content: space-between;
-		width: 100%;
-		border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
+		display: contents;
+		.wp-block-navigation__responsive-container-open {
+			margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) - 3px );
+		}
+		.wp-block-navigation {
+			grid-area: menu;
+		}
+		.wp-block-social-links {
+			justify-content: flex-start;
+			grid-area: social;
+		}
 	}
 }