Merge pull request #3801 from Automattic/header-footer-squares

Quadrat: added polygons to header and footer

quadrat/assets/theme.css

@@ -367,7 +367,13 @@ a:active, a:focus {
 	background: var(--wp--custom--color--secondary);
 }
 
-.site-header > .wp-block-group {
+.site-header {
+	position: relative;
+}
+
+.site-header .wp-block-group {
+	display: flex;
+	justify-content: space-between;
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
@@ -377,33 +383,33 @@ a:active, a:focus {
 }
 
 @media (min-width: 480px) {
-	.site-header > .wp-block-group {
+	.site-header .wp-block-group {
 		padding: var(--wp--custom--margin--vertical);
 	}
 }
 
-.site-header > .wp-block-group .wp-block-site-logo {
+.site-header .wp-block-group .wp-block-site-logo {
 	margin-right: var(--wp--custom--margin--horizontal);
 }
 
 @media (max-width: 479px) {
-	.site-header > .wp-block-group .wp-block-site-logo {
+	.site-header .wp-block-group .wp-block-site-logo {
 		flex-basis: 100%;
 		margin: 20px 0;
 		text-align: center;
 	}
 }
 
-.site-header > .wp-block-group .wp-block-site-logo a > img {
+.site-header .wp-block-group .wp-block-site-logo a > img {
 	height: 64px;
 	width: auto;
 }
 
-.site-header > .wp-block-group .wp-block-site-title {
+.site-header .wp-block-group .wp-block-site-title {
 	margin: 0;
 }
 
-.site-header > .wp-block-group .wp-block-navigation {
+.site-header .wp-block-group .wp-block-navigation {
 	margin-left: auto;
 	padding-right: 0;
 }
@@ -412,11 +418,49 @@ a:active, a:focus {
 	text-decoration: none;
 }
 
+.site-header:before {
+	content: "";
+	background-color: var(--wp--custom--color--secondary);
+	position: absolute;
+	height: 100vw;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: -1;
+}
+
+@media (max-width: 479px) {
+	.site-header:before {
+		-webkit-clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
+		        clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
+	}
+}
+
+@media (min-width: 480px) {
+	.site-header:before {
+		-webkit-clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
+		        clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
+	}
+}
+
+@media (min-width: 960px) {
+	.site-header:before {
+		-webkit-clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
+		        clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
+	}
+}
+
 .post-meta {
 	align-items: center;
 	justify-content: center;
 }
 
+@media (max-width: 479px) {
+	.post-meta {
+		padding-top: 120px !important;
+	}
+}
+
 .post-meta .wp-block-post-date::before {
 	display: none;
 }
@@ -441,6 +485,24 @@ a:active, a:focus {
 	color: var(--wp--custom--color--foreground);
 }
 
+.site-footer.wp-block-group {
+	position: relative;
+	overflow: visible;
+}
+
+.site-footer.wp-block-group:before {
+	content: "";
+	background-color: var(--wp--custom--color--secondary);
+	-webkit-clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
+	        clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
+	position: absolute;
+	height: 100vw;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: -1;
+}
+
 .wp-block-post-featured-image {
 	margin-top: 0;
 }

quadrat/block-template-parts/footer.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"150px","bottom":"150px"}}}} -->
-<div class="wp-block-group" style="padding-top:150px;padding-bottom: 150px">
+<!-- wp:group {"className":"site-footer","style":{"spacing":{"padding":{"top":"150px","bottom":"150px"}}}} -->
+<div class="wp-block-group site-footer" style="padding-top:150px;padding-bottom: 150px">
 
 <!-- wp:paragraph {"align":"center"} -->
 <p class="has-text-align-center">Powered by WordPress</p>

quadrat/block-template-parts/single.html

@@ -1,9 +1,5 @@
-<!-- wp:spacer -->
-<div style="height:170px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:group {"className":"post-meta"} -->
-<div class="wp-block-group post-meta">
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"170px"}}},"className":"post-meta"} -->
+<div class="wp-block-group post-meta" style="padding-top:170px">
 	<!-- wp:post-date {"textAlign":"center","fontSize":"tiny"} /-->
 	<!-- wp:post-terms {"term":"category","textAlign":"center","fontSize":"tiny"} /-->
 </div>

quadrat/sass/_footer.scss

@@ -0,0 +1,15 @@
+.site-footer.wp-block-group {
+	position: relative;
+	overflow: visible;
+	&:before {
+		content: "";
+		background-color: var(--wp--custom--color--secondary);
+		clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
+		position: absolute;
+		height: 100vw;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: -1;
+	}
+}

quadrat/sass/_header.scss

@@ -1,5 +1,8 @@
 .site-header {
-	> .wp-block-group {
+	position: relative;
+	.wp-block-group {
+		display: flex;
+		justify-content: space-between;
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
@@ -39,4 +42,24 @@
 	.wp-block-site-title a {
 		text-decoration: none;
 	}
+	
+	&:before {
+		content: "";
+		background-color: var(--wp--custom--color--secondary);
+		position: absolute;
+		height: 100vw;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: -1;
+		@include break-mobile-only() {
+			clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
+		}
+		@include break-mobile() {
+			clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
+		}
+		@include break-large() {
+			clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
+		}
+	}
 } 

quadrat/sass/_meta.scss

@@ -1,6 +1,9 @@
 .post-meta {
 	align-items: center;
 	justify-content: center;
+	@include break-mobile-only() {
+		padding-top: 120px !important;
+	}
 
 	.wp-block-post-date::before {
 		display: none;

quadrat/sass/theme.scss

@@ -19,6 +19,7 @@
 @import "elements/links";
 @import "header";
 @import "meta";
+@import "footer";
 
 .wp-block-post-featured-image {
 	margin-top: 0;