From dce3a2ed60b78b147fd717740d714faffae04814 Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Tue, 21 Sep 2021 15:25:31 -0700
Subject: [PATCH] Theme: Refine padding and margins.

See #6
---
 bs-config.js                                  |  5 ---
 package.json                                  |  5 +--
 readme.md                                     |  1 +
 .../block-template-parts/post-navigation.html |  5 +--
 .../themes/wporg-news-2021/package.json       |  4 +--
 .../wporg-news-2021/sass/base/_alignment.scss | 32 +++++++++++++++----
 .../sass/base/_breakpoints.scss               | 19 +++++++++++
 .../wporg-news-2021/sass/base/_layout.scss    |  6 ++++
 .../sass/blocks/_navigation.scss              |  0
 .../sass/blocks/_paragraph.scss               |  2 --
 .../sass/post/_navigation.scss                | 16 ++++++++++
 .../themes/wporg-news-2021/sass/style.scss    |  1 +
 .../themes/wporg-news-2021/theme.json         | 16 ++++++++--
 13 files changed, 90 insertions(+), 22 deletions(-)
 create mode 100644 source/wp-content/themes/wporg-news-2021/sass/blocks/_navigation.scss

diff --git a/bs-config.js b/bs-config.js
index 7ceb40d3..f69a73a3 100644
--- a/bs-config.js
+++ b/bs-config.js
@@ -25,11 +25,6 @@ module.exports = {
 		paths.globalHeaderFooter + watchedFilesPattern
 	],
 
-	"ignore": [
-		paths.theme + '/sass/**/*.*',
-		paths.globalHeaderFooter + '/postcss/**/*.*'
-	],
-
 	"open": false,
 	"reloadOnRestart": true,
 	"notify": false,
diff --git a/package.json b/package.json
index 1aba5c9e..6ceabc10 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "wporg-news-2021-project",
 	"version": "1.0.0",
-	"description": "",
+	"description": "The codebase and development environment for w.org/news.",
 	"author": "WordPress.org",
 	"license": "GPL-2.0-or-later",
 	"private": true,
@@ -24,6 +24,7 @@
 		"sync": "browser-sync start --config bs-config.js"
 	},
 	"workspaces": [
-		"source/wp-content/themes/wporg-news-2021"
+		"source/wp-content/themes/wporg-news-2021",
+		"source/wp-content/mu-plugins/wporg-mu-plugins"
 	]
 }
diff --git a/readme.md b/readme.md
index 94b4b07f..f0a5fc37 100644
--- a/readme.md
+++ b/readme.md
@@ -32,3 +32,4 @@ These must be run in the project's root folder, _not_ in theme/plugin subfolders
 
 * Build all assets once: `yarn workspaces run build`
 * Rebuild all assets on change: `yarn workspaces run start`
+* Reload browser when files change: `npm run sync`
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/package.json b/source/wp-content/themes/wporg-news-2021/package.json
index 5679f502..60d58aef 100644
--- a/source/wp-content/themes/wporg-news-2021/package.json
+++ b/source/wp-content/themes/wporg-news-2021/package.json
@@ -1,7 +1,7 @@
 {
-	"name": "wporg-news-2021",
+	"name": "wporg-news-2021-theme",
 	"version": "1.0.0",
-	"description": "",
+	"description": "A Full Site Editing theme for w.org/news, with a jazz-inspired design.",
 	"author": "WordPress.org",
 	"license": "GPL-2.0-or-later",
 	"private": true,
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..1584c6ce 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,14 +1,18 @@
 //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);
+.site-content-container {
+	// In this situation we want to introduce a standardized gap between content and the edge of the screen.
+	padding-top: var(--wp--custom--post-content--padding--top);
 	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-bottom: var(--wp--custom--post-content--padding--bottom);
+	padding-left: var(--wp--custom--post-content--padding--left);
+
 	.alignfull {
-		// these elements we want to "bust out" of the gap created above
+		// 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.
+
+		// 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,
 		&.wp-block-group {
@@ -18,12 +22,26 @@
 	}
 }
 
+@include break-tablet {
+	.site-content-container {
+		padding-top: var(--wp--custom--post-content--breakpoint--tablet--padding--top);
+		padding-right: var(--wp--custom--post-content--breakpoint--tablet--padding--right);
+		padding-bottom: var(--wp--custom--post-content--breakpoint--tablet--padding--bottom);
+		padding-left: 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
+.is-root-container { // Top level of the editor.
 	padding-left: var(--wp--custom--post-content--padding--left);
 	padding-right: var(--wp--custom--post-content--padding--right);
-	.wp-block[data-align="full"] { //blocks configured to be "align full" in "editorspeak"
+	.wp-block[data-align="full"] { // Blocks configured to be "align full" in "editorspeak".
 		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;
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..abbb66dd 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,22 @@
 		@content;
 	}
 }
+
+// Custom breakpoints should be synced with `global-header-footer` in `wporg-mu-plugins`.
+@mixin break-tablet() {
+	@media (min-width: 876px) {
+		@content;
+	}
+}
+
+@mixin break-desktop() {
+	@media (min-width: 1152px) {
+		@content;
+	}
+}
+
+@mixin break-desktop-wide() {
+	@media (min-width: 1320px) {
+		@content;
+	}
+}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss
index 6da4af4a..fe687c49 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss
@@ -6,6 +6,12 @@
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
+
+	/*
+	 * Make sure the footer is always at the bottom of the viewport, even on pages with little content.
+	 * Otherwise there'd be empty space below the footer
+	 */
+	justify-content: space-between;
 }
 
 .site-footer-container {
diff --git a/source/wp-content/themes/wporg-news-2021/sass/blocks/_navigation.scss b/source/wp-content/themes/wporg-news-2021/sass/blocks/_navigation.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss b/source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss
index cadb08c9..2171a23c 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss
@@ -1,6 +1,4 @@
 p {
-
-
 	// Override `color: inherit` from Core styles.
 	&.has-text-color a {
 		color: var( --wp--style--color--link, var(--wp--custom--color--primary) );
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 f5946be0..6914db52 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,3 +1,19 @@
+[class*="wp-container-"] > .post-navigation {
+	padding-top: 0;
+	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-bottom: 19px;
+	padding-left: var(--wp--custom--post-content--padding--left);
+}
+
+@include break-tablet {
+	[class*="wp-container-"] > .post-navigation {
+		padding-top: 0;
+		padding-right: 88px;
+		padding-bottom: 26px;
+		padding-left: var(--wp--custom--post-content--breakpoint--tablet--padding--left);
+	}
+}
+
 .post-navigation {
 	display: flex;
 	justify-content: space-between;
diff --git a/source/wp-content/themes/wporg-news-2021/sass/style.scss b/source/wp-content/themes/wporg-news-2021/sass/style.scss
index ef14e074..17eb1495 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/style.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/style.scss
@@ -39,6 +39,7 @@ GNU General Public License for more details.
 @import "blocks/image";
 @import "blocks/latest-posts";
 @import "blocks/list";
+@import "blocks/navigation";
 @import "blocks/paragraph";
 @import "blocks/post-author";
 @import "blocks/post-comments";
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": {