From c35b6c2dd7076106b28a7abb19e134f9c2189a9f Mon Sep 17 00:00:00 2001
From: Adam Wood <adam.wood@automattic.com>
Date: Wed, 25 Jan 2023 13:49:57 +1300
Subject: [PATCH] Use spacing presets and add comments to CSS

---
 .../wporg-main-2022/src/style/style.scss      | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss
index 91a89176..7ad9fe9f 100644
--- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss
+++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss
@@ -199,16 +199,24 @@ html[dir="rtl"] :where([style*="border-right-color"]) {
 
 @media (min-width: 1200px) {
 	.wporg-about-cover-title {
-		margin-block-end: -42px !important;
+		// move the intro text up to align with the bottom of the title
+		margin-block-end:
+			calc((
+				(
+					var(--wp--custom--body--typography--line-height) * var(--wp--preset--font-size--normal)
+				) + var(--wp--preset--spacing--10)
+			) * -1) !important // ~ -42px;
 	}
 }
 
 @media (min-width: 782px) {
 	.wporg-about-section-heading {
+		// move the section heading up to align with the top of the right column
 		margin-block-start: -10px !important;
 	}
 
 	[class*="wporg-about-section-freedom-"] {
+		// move the numbered freedom sections up to overlap the previous one
 		margin-block-end: -30px !important;
 		position: relative;
 	}
@@ -216,7 +224,11 @@ html[dir="rtl"] :where([style*="border-right-color"]) {
 
 @media (min-width: 600px) {
 	.wporg-about-cover-title {
-		margin-block-start: -30px !important;
+		// move the pretext down to align with the top of the title
+		margin-block-start:
+			calc((
+				var(--wp--custom--body--typography--line-height) * var(--wp--preset--font-size--normal)
+			) * -1) !important;
 	}
 }
 
@@ -312,8 +324,8 @@ html[dir="rtl"] :where([style*="border-right-color"]) {
 	}
 
 	[class*="wporg-about-section-freedom-"] {
-		padding-top: 40px !important;
-		padding-bottom: 40px !important;
+		padding-top: var(--wp--preset--spacing--40) !important;
+		padding-bottom: var(--wp--preset--spacing--40) !important;
 
 		h3 {
 			font-size: 120px !important;