Quadrat: Fix mobile spacing (#3961)

* Quadrat: Fix mobile spacing

* reset indentation

* reset indentation

* move template rules into their own file

quadrat/assets/theme.css

@@ -659,15 +659,33 @@ textarea:focus {
 	outline: 1px dotted currentColor;
 }
 
+.home .site-footer.wp-block-group {
+	position: relative;
+	overflow: visible;
+}
+
+.home .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;
+}
+
 .site-header {
 	position: relative;
 	overflow: inherit;
-	padding: 10px 20px 60px;
+	padding: 10px var(--wp--custom--post-content--padding--left) 60px;
 }
 
 @media (min-width: 480px) {
 	.site-header {
-		padding: var(--wp--custom--margin--vertical);
+		padding: var(--wp--custom--post-content--padding--left);
 	}
 }
 
@@ -729,22 +747,13 @@ textarea:focus {
 	}
 }
 
-.home .site-footer.wp-block-group {
-	position: relative;
-	overflow: visible;
+.wp-block-post-featured-image {
+	margin-top: 0;
 }
 
-.home .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;
+.page-content {
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
 }
 
 .post-meta {
@@ -844,8 +853,4 @@ textarea:focus {
 	margin-top: calc( var(--wp--custom--margin--vertical) / 2);
 }
 
-.wp-block-post-featured-image {
-	margin-top: 0;
-}
-
 /*# sourceMappingURL=theme.css.map */

quadrat/block-template-parts/404.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
+<!-- wp:group {"layout":{"inherit":true}, "className":"page-content"} -->
+<div class="wp-block-group page-content">
 
 <!-- wp:heading {"textAlign":"center","level":1,"fontSize":"large"} -->
 <h1 class="has-text-align-center has-large-font-size">Oops! That page can’t be found.</h1>

quadrat/block-template-parts/query.html

@@ -1,5 +1,5 @@
-<!-- wp:query {"layout":{"inherit":true},"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true}} -->
-<div class="wp-block-query">
+<!-- wp:query {"className":"page-content","layout":{"inherit":true},"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true}} -->
+<div class="wp-block-query page-content">
 <!-- wp:query-loop -->
 	<!-- wp:post-date {"fontSize":"tiny","textAlign":"center"} /-->
 	<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"center"} /-->

quadrat/block-template-parts/search.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
+<!-- wp:group {"layout":{"inherit":true}, "className":"page-content"} -->
+<div class="wp-block-group page-content">
 
 <!-- wp:heading -->
 <h2>Results:</h2>

quadrat/child-theme.json

@@ -108,6 +108,12 @@
 					}
 				}
 			},
+			"post-content": {
+				"padding": {
+					"left": "min( var(--wp--custom--margin--horizontal), 5vw)",
+					"right": "min( var(--wp--custom--margin--horizontal), 5vw)"
+				}
+			},
 			"quote": {
 				"citation": {
 					"typography": {

quadrat/sass/templates/_header.scss

@@ -1,10 +1,10 @@
 .site-header {
 	position: relative;
 	overflow: inherit;
-	padding: 10px 20px 60px; // TODO: Maybe replace with a responsive custom variable?
+	padding: 10px var(--wp--custom--post-content--padding--left) 60px; // TODO: Maybe replace with a responsive custom variable?
 
 	@include break-mobile() {
-		padding: var(--wp--custom--margin--vertical);
+		padding: var(--wp--custom--post-content--padding--left);
 	}
 
 	.wp-block-site-logo {
@@ -21,7 +21,7 @@
 			width: auto;
 		}
 	}
-	
+
 	.wp-block-site-title {
 		margin: 0;
 	}
@@ -30,7 +30,7 @@
 		margin-left: auto;
 		padding-right: 0;
 	}
-	
+
 	&:before {
 		content: "";
 		background-color: var(--wp--custom--color--secondary);
@@ -50,4 +50,4 @@
 			clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
 		}
 	}
-} 
+}

quadrat/sass/templates/_index.scss

@@ -0,0 +1,8 @@
+.wp-block-post-featured-image {
+	margin-top: 0;
+}
+
+.page-content {
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
+}

quadrat/sass/theme.scss

@@ -19,12 +19,9 @@
 @import "colors";
 @import "elements/links";
 @import "elements/forms";
-@import "templates/header";
 @import "templates/footer";
+@import "templates/header";
+@import "templates/index";
 @import "templates/meta";
 @import "templates/post-header";
 @import "templates/query";
-
-.wp-block-post-featured-image {
-	margin-top: 0;
-}

quadrat/theme.json

@@ -167,8 +167,8 @@
 			},
 			"post-content": {
 				"padding": {
-					"left": "var(--wp--custom--margin--horizontal)",
-					"right": "var(--wp--custom--margin--horizontal)"
+					"left": "min( var(--wp--custom--margin--horizontal), 5vw)",
+					"right": "min( var(--wp--custom--margin--horizontal), 5vw)"
 				}
 			},
 			"pullquote": {