added squares 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,6 +418,19 @@ a:active, a:focus {
 	text-decoration: none;
 }
 
+.site-header:before {
+	content: "";
+	background-color: var(--wp--custom--color--secondary);
+	-webkit-clip-path: polygon(13vw 0, 100vw 0, 100vw 28vw, 52vw 63vw, 9vw 3vw);
+	        clip-path: polygon(13vw 0, 100vw 0, 100vw 28vw, 52vw 63vw, 9vw 3vw);
+	position: absolute;
+	height: 100vw;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: -1;
+}
+
 .post-meta {
 	align-items: center;
 	justify-content: center;
@@ -441,6 +460,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/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,16 @@
 	.wp-block-site-title a {
 		text-decoration: none;
 	}
+	
+	&:before {
+		content: "";
+		background-color: var(--wp--custom--color--secondary);
+		clip-path: polygon(13vw 0, 100vw 0, 100vw 28vw, 52vw 63vw, 9vw 3vw);
+		position: absolute;
+		height: 100vw;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: -1;
+	}
 } 

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;