From 0ee2a9a237455cb364e9156a931b98be9bbbe411 Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Tue, 21 Sep 2021 11:03:16 -0700
Subject: [PATCH] padding across layout elements

---
 .../block-template-parts/post-navigation.html |  5 ++--
 .../wporg-news-2021/sass/base/_alignment.scss | 30 ++++++++++++++++---
 .../sass/base/_breakpoints.scss               |  8 +++++
 .../wporg-news-2021/sass/base/_header.scss    |  6 ----
 .../sass/post/_navigation.scss                | 21 ++++++++++++-
 .../themes/wporg-news-2021/theme.json         | 16 ++++++++--
 6 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html b/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
index ba904bf1..62b42d22 100644
--- a/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
+++ b/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
@@ -2,13 +2,14 @@
 <hr class="wp-block-separator alignfull has-text-color has-background has-light-grey-background-color has-light-grey-color is-style-wide"/>
 <!-- /wp:separator -->
 
-<!-- wp:group {"tagName":"nav","align":"wide","className":"post-navigation"} -->
-<nav class="wp-block-group alignwide post-navigation">
+<!-- wp:group {"tagName":"nav","align":"full","className":"post-navigation"} -->
+<nav class="wp-block-group alignfull post-navigation">
 	<!-- wp:group {"className":"post-navigation-previous"} -->
 	<div class="wp-block-group post-navigation-previous">
 		<!-- wp:post-navigation-link {"type":"previous","showTitle":true,"label":"Previous"} /-->
 	</div>
 	<!-- /wp:group -->
+
 	<!-- wp:group {"className":"post-navigation-next"} -->
 	<div class="wp-block-group post-navigation-next">
 		<!-- wp:post-navigation-link {"type":"next","showTitle":true,"label":"Next"} /-->
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss
index 385ccf7c..7950080d 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss
@@ -1,13 +1,19 @@
 //FRONTEND
-.wp-site-blocks { // top level of the view
-	//In this situation we want to introduce a standardized gap between content and the edge of the screen.
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
+.site-content-container {
+	// In this situation we want to introduce a standardized gap between content and the edge of the screen.
+	padding:
+		var(--wp--custom--post-content--padding--top)
+		var(--wp--custom--post-content--padding--right)
+		var(--wp--custom--post-content--padding--bottom)
+		var(--wp--custom--post-content--padding--left)
+	;
+
 	.alignfull {
 		// these elements we want to "bust out" of the gap created above
 		margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
 		margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
 		width: unset;
+
 		// however any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
 		&.wp-block-template-part,
 		&.wp-block-columns,
@@ -18,6 +24,22 @@
 	}
 }
 
+@include break-tablet {
+	.site-content-container {
+		padding:
+			var(--wp--custom--post-content--breakpoint--tablet--padding--top)
+			var(--wp--custom--post-content--breakpoint--tablet--padding--right)
+			var(--wp--custom--post-content--breakpoint--tablet--padding--bottom)
+			var(--wp--custom--post-content--breakpoint--tablet--padding--left)
+		;
+
+		.alignfull {
+			margin-left: calc(-1 * var(--wp--custom--post-content--breakpoint--tablet--padding--left)) !important;
+			margin-right: calc(-1 * var(--wp--custom--post-content--breakpoint--tablet--padding--right)) !important;
+		}
+	}
+}
+
 // EDITOR (NOTE: It PROBABLY would be OK to bring these together to "simplify" the stylesheet.  However the selectors are quite different
 // and it's a lot easier to understand and ensure intent separated in this way.
 .is-root-container { //top level of the editor
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss
index 849f8583..fe81f573 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss
@@ -6,3 +6,11 @@
 		@content;
 	}
 }
+
+// Custom breakpoints should be synced with `global-header-footer` in `wporg-mu-plugins`.
+@mixin break-tablet() {
+	@media (min-width: 876px) {
+		@content;
+	}
+}
+
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_header.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_header.scss
index 4541fda3..dd4d9f1a 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_header.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_header.scss
@@ -11,12 +11,6 @@
 	}
 }
 
-.site-header__wporg-logo {
-	order: 1;
-	width: 28px;
-	height: 28px;
-}
-
 h1, h2, h3, h4, h5, h6 {
 	&.has-background {
 		padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
diff --git a/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss b/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
index b8d3f3b6..dbe80d74 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
@@ -1,7 +1,26 @@
+[class*="wp-container-"] > .post-navigation {
+	padding:
+		0
+		var(--wp--custom--post-content--padding--right)
+		19px
+		var(--wp--custom--post-content--padding--left)
+	;
+}
+
+@include break-tablet {
+	[class*="wp-container-"] > .post-navigation {
+		padding:
+			0
+			88px
+			26px
+			var(--wp--custom--post-content--breakpoint--tablet--padding--left)
+		;
+	}
+}
+
 .post-navigation {
 	display: flex;
 	justify-content: space-between;
-	padding-bottom: 26px;
 
 	.wp-block-post-navigation-link {
 		display: inline-block;
diff --git a/source/wp-content/themes/wporg-news-2021/theme.json b/source/wp-content/themes/wporg-news-2021/theme.json
index 21f1565e..80ee05ad 100644
--- a/source/wp-content/themes/wporg-news-2021/theme.json
+++ b/source/wp-content/themes/wporg-news-2021/theme.json
@@ -338,8 +338,20 @@
 			},
 			"post-content": {
 				"padding": {
-					"left": "20px",
-					"right": "20px"
+					"top": "32px",
+					"bottom": "70px",
+					"left": "24px",
+					"right": "24px"
+				},
+				"breakpoint": {
+					 "tablet": {
+						"padding": {
+							"top": "80px",
+							"bottom": "80px",
+							"left": "80px",
+							"right": "180px"
+						}
+					 }
 				}
 			},
 			"pullquote": {