padding across layout elements

WordPress · Sep 21, 2021 · 0ee2a9a · 0ee2a9a
1 parent b5733c2
commit 0ee2a9a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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": {