From 39ac40040b75535aa008816281908859ca586c7b Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Thu, 31 Aug 2023 11:33:29 +1200
Subject: [PATCH] Fix alignment of section header rows

---
 .../pub/wporg-learn-2020/archive-course.php   |  8 +++--
 .../wporg-learn-2020/archive-lesson-plan.php  | 12 ++++---
 .../archive-wporg_workshop.php                |  2 +-
 .../css/components/_search-form.scss          | 10 +++---
 .../css/components/_section.scss              | 15 +++------
 .../pub/wporg-learn-2020/front-page.php       | 32 +++++++++++--------
 .../page-content-calendar.php                 |  2 +-
 .../page-online-workshops.php                 |  2 +-
 .../themes/pub/wporg-learn-2020/page.php      |  2 +-
 .../themes/pub/wporg-learn-2020/search.php    |  2 +-
 .../taxonomy-wporg_lesson_plan_series.php     |  2 +-
 .../template-parts/content-single.php         |  2 +-
 .../content-workshop-single-hardcoded.php     |  2 +-
 .../content-workshop-single.php               |  2 +-
 14 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/wp-content/themes/pub/wporg-learn-2020/archive-course.php b/wp-content/themes/pub/wporg-learn-2020/archive-course.php
index a4ea564099..9c44f14310 100644
--- a/wp-content/themes/pub/wporg-learn-2020/archive-course.php
+++ b/wp-content/themes/pub/wporg-learn-2020/archive-course.php
@@ -20,10 +20,12 @@
 
 <main id="main" class="site-main">
 	<section>
-		<div class="section-heading section-heading--with-space row align-middle between">
-			<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
+		<div class="section-heading section-heading--with-space row align-middle between gutters">
+			<?php the_archive_title( '<h1 class="section-heading_title h2 col-8">', '</h1>' ); ?>
 			<?php if ( is_user_logged_in() ) : ?>
-				<a class="section-heading_link" href="/my-courses/"><?php esc_html_e( 'My Courses', 'wporg-learn' ); ?></a>
+				<div class="col-4 row section-heading_links">
+					<a class="section-heading_link" href="/my-courses/"><?php esc_html_e( 'My Courses', 'wporg-learn' ); ?></a>
+				</div>
 			<?php endif; ?>
 		</div>
 
diff --git a/wp-content/themes/pub/wporg-learn-2020/archive-lesson-plan.php b/wp-content/themes/pub/wporg-learn-2020/archive-lesson-plan.php
index 8fac539d1a..9b1125d5a6 100644
--- a/wp-content/themes/pub/wporg-learn-2020/archive-lesson-plan.php
+++ b/wp-content/themes/pub/wporg-learn-2020/archive-lesson-plan.php
@@ -19,11 +19,13 @@
 if ( '' === get_query_var( 'search' ) && empty( $_GET ) && is_post_type_archive() ) :
 	?>
 	<section>
-		<div class="row align-middle between section-heading section-heading--with-space">
-			<h1 class="section-heading_title h2"><?php esc_html_e( 'Lesson Plans', 'wporg-learn' ); ?></h1>
-			<a href="<?php echo esc_url( get_post_type_archive_link( 'lesson-plan' ) . '?_view=all' ); ?>" class="button button-xlarge button-secondary">
-				<?php esc_html_e( 'Browse all lesson plans', 'wporg-learn' ); ?>
-			</a>
+		<div class="row align-middle between section-heading section-heading--with-space gutters">
+			<h1 class="section-heading_title h2 col-8"><?php esc_html_e( 'Lesson Plans', 'wporg-learn' ); ?></h1>
+			<div class="col-4 row section-heading_links">
+				<a href="<?php echo esc_url( get_post_type_archive_link( 'lesson-plan' ) . '?_view=all' ); ?>" class="button button-xlarge button-secondary">
+					<?php esc_html_e( 'Browse all lesson plans', 'wporg-learn' ); ?>
+				</a>
+			</div>
 		</div>
 
 		<hr>
diff --git a/wp-content/themes/pub/wporg-learn-2020/archive-wporg_workshop.php b/wp-content/themes/pub/wporg-learn-2020/archive-wporg_workshop.php
index 64350b984a..a5ff024871 100644
--- a/wp-content/themes/pub/wporg-learn-2020/archive-wporg_workshop.php
+++ b/wp-content/themes/pub/wporg-learn-2020/archive-wporg_workshop.php
@@ -23,7 +23,7 @@
 <main id="main" class="site-main">
 
 	<section>
-		<div class="section-heading section-heading--with-space row align-middle between">
+		<div class="section-heading section-heading--with-space">
 			<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 			<?php if ( is_tax( 'wporg_workshop_series' ) && have_posts() ) :
 				$series_term = wporg_learn_series_get_term( $post );
diff --git a/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss b/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss
index 58583b4a45..1e575f4ffe 100644
--- a/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss
+++ b/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss
@@ -30,18 +30,16 @@
 .search-form {
 	&--is-inline {
 		.search-form {
+			$label-position: 2rem;
+
 			display: flex;
 			justify-content: space-between;
-			margin-top: 0.5rem;
+			margin-top: $label-position;
 			background: #fff;
 
-			@media only screen and (max-width: $breakpoint-tablet) {
-				margin-top: 2rem;
-			}
-
 			> label {
 				position: absolute;
-				transform: translateY(-2rem);
+				transform: translateY(-1 * $label-position);
 			}
 
 			input {
diff --git a/wp-content/themes/pub/wporg-learn-2020/css/components/_section.scss b/wp-content/themes/pub/wporg-learn-2020/css/components/_section.scss
index 1ba4252593..5b6ce98db2 100644
--- a/wp-content/themes/pub/wporg-learn-2020/css/components/_section.scss
+++ b/wp-content/themes/pub/wporg-learn-2020/css/components/_section.scss
@@ -1,15 +1,4 @@
 .section-heading {
-	&.row {
-
-		@media only screen and (min-width: $breakpoint-tablet) {
-			align-items: baseline;
-		}
-
-		.button {
-			align-self: center;
-		}
-	}
-
 	&_title,
 	&_link {
 
@@ -35,6 +24,10 @@
 	&_links {
 		gap: 1rem;
 		flex-direction: row;
+
+		@media only screen and (min-width: 769px) {
+			justify-content: flex-end;
+		}
 	}
 
 	&_link {
diff --git a/wp-content/themes/pub/wporg-learn-2020/front-page.php b/wp-content/themes/pub/wporg-learn-2020/front-page.php
index dccb2a8fcb..1e5052336f 100644
--- a/wp-content/themes/pub/wporg-learn-2020/front-page.php
+++ b/wp-content/themes/pub/wporg-learn-2020/front-page.php
@@ -33,9 +33,9 @@
 		</section>
 
 		<section>
-			<div class="section-heading row align-middle between">
-				<h2 class="h4 section-heading_title"><?php esc_html_e( 'Recent Courses', 'wporg-learn' ); ?></h2>
-				<div class="section-heading_links row">
+			<div class="section-heading row align-middle between gutters">
+				<h2 class="h4 section-heading_title col-8"><?php esc_html_e( 'Recent Courses', 'wporg-learn' ); ?></h2>
+				<div class="section-heading_links col-4 row">
 					<?php if ( is_user_logged_in() ) : ?>
 						<a class="section-heading_link" href="/my-courses/"><?php esc_html_e( 'My Courses', 'wporg-learn' ); ?></a>
 					<?php endif; ?>
@@ -69,11 +69,15 @@
 		<hr>
 
 		<section>
-			<div class="section-heading row align-middle between">
-				<h2 class="h4 section-heading_title"><?php esc_html_e( 'Recent Tutorials', 'wporg-learn' ); ?></h2>
-				<a class="section-heading_link" href="/tutorials/">
-					<?php esc_html_e( 'View All Tutorials', 'wporg-learn' ); ?>
-				</a>
+			<div class="section-heading row align-middle between gutters">
+				<h2 class="h4 section-heading_title col-8">
+					<?php esc_html_e( 'Recent Tutorials', 'wporg-learn' ); ?>
+				</h2>
+				<div class="section-heading_links col-4 row">
+					<a class="section-heading_link" href="/tutorials/">
+						<?php esc_html_e( 'View All Tutorials', 'wporg-learn' ); ?>
+					</a>
+				</div>
 				<p class="section-heading_description">
 					<em><?php esc_html_e( 'Instructional videos for all skillsets to help you level up your WordPress expertise.', 'wporg-learn' ); ?></em>
 				</p>
@@ -96,13 +100,15 @@
 		<?php $discussion_events = \WPOrg_Learn\Events\get_discussion_events(); ?>
 		<?php if ( ! empty( $discussion_events ) ) : ?>
 			<section class="wporg-learn-workshop-discussion-events">
-				<div class="section-heading row align-middle between">
-					<h2 class="h4 section-heading_title">
+				<div class="section-heading row align-middle between gutters">
+					<h2 class="h4 section-heading_title col-8">
 						<?php esc_html_e( 'Upcoming Online Workshops', 'wporg-learn' ); ?>
 					</h2>
-					<a class="section-heading_link" href="/online-workshops/">
-						<?php esc_html_e( 'View All Online Workshops', 'wporg-learn' ); ?>
-					</a>
+					<div class="section-heading_links col-4 row">
+						<a class="section-heading_link" href="/online-workshops/">
+							<?php esc_html_e( 'View All Online Workshops', 'wporg-learn' ); ?>
+						</a>
+					</div>
 					<p class="section-heading_description">
 						<em><?php esc_html_e( 'Live sessions where you can learn alongside other WordPress enthusiasts from around the world.', 'wporg-learn' ); ?></em>
 					</p>
diff --git a/wp-content/themes/pub/wporg-learn-2020/page-content-calendar.php b/wp-content/themes/pub/wporg-learn-2020/page-content-calendar.php
index 46d3a956cc..d302fe8398 100644
--- a/wp-content/themes/pub/wporg-learn-2020/page-content-calendar.php
+++ b/wp-content/themes/pub/wporg-learn-2020/page-content-calendar.php
@@ -13,7 +13,7 @@
 
 	<main id="main" class="site-main">
 
-		<div class="row align-middle between section-heading section-heading--with-space">
+		<div class="section-heading section-heading--with-space">
 			<?php the_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 		</div>
 		<hr>
diff --git a/wp-content/themes/pub/wporg-learn-2020/page-online-workshops.php b/wp-content/themes/pub/wporg-learn-2020/page-online-workshops.php
index ae06fcc966..ccd4110b7b 100644
--- a/wp-content/themes/pub/wporg-learn-2020/page-online-workshops.php
+++ b/wp-content/themes/pub/wporg-learn-2020/page-online-workshops.php
@@ -12,7 +12,7 @@
 <main id="main" class="site-main page-full-width">
 
 	<section>
-		<div class="section-heading section-heading--with-space row align-middle between">
+		<div class="section-heading section-heading--with-space">
 			<?php the_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 		</div>
 
diff --git a/wp-content/themes/pub/wporg-learn-2020/page.php b/wp-content/themes/pub/wporg-learn-2020/page.php
index 1b876c2072..fc41bf8e21 100644
--- a/wp-content/themes/pub/wporg-learn-2020/page.php
+++ b/wp-content/themes/pub/wporg-learn-2020/page.php
@@ -20,7 +20,7 @@
 
 	<main id="main" class="site-main">
 
-		<div class="row align-middle between section-heading section-heading--with-space">
+		<div class="section-heading section-heading--with-space">
 			<?php the_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 		</div>
 		<hr>
diff --git a/wp-content/themes/pub/wporg-learn-2020/search.php b/wp-content/themes/pub/wporg-learn-2020/search.php
index 94ec5f7df8..fdafd0cfe4 100644
--- a/wp-content/themes/pub/wporg-learn-2020/search.php
+++ b/wp-content/themes/pub/wporg-learn-2020/search.php
@@ -22,7 +22,7 @@
 	<main id="main" class="site-main type-page">
 
 		<section>
-			<div class="row align-middle between section-heading section-heading--with-space">
+			<div class="section-heading section-heading--with-space">
 				<h1 class="section-heading_title h2"><?php echo esc_html( $search_query ); ?></h1>
 			</div>
 			<hr>
diff --git a/wp-content/themes/pub/wporg-learn-2020/taxonomy-wporg_lesson_plan_series.php b/wp-content/themes/pub/wporg-learn-2020/taxonomy-wporg_lesson_plan_series.php
index 521fcf751c..03dd6293d3 100644
--- a/wp-content/themes/pub/wporg-learn-2020/taxonomy-wporg_lesson_plan_series.php
+++ b/wp-content/themes/pub/wporg-learn-2020/taxonomy-wporg_lesson_plan_series.php
@@ -13,7 +13,7 @@
 
 	<main id="main" class="site-main type-page">
 		<section>
-			<div class="row align-middle between section-heading section-heading--with-space">
+			<div class="section-heading section-heading--with-space">
 				<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 			</div>
 
diff --git a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-single.php b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-single.php
index dec99ace75..1534c4efe2 100644
--- a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-single.php
+++ b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-single.php
@@ -12,7 +12,7 @@
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
 	<section>
-		<header class="row align-middle between section-heading section-heading--with-space">
+		<header class="section-heading section-heading--with-space">
 			<h1 class="section-heading_title h2"><?php the_title(); ?></h1>
 		</header>
 
diff --git a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single-hardcoded.php b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single-hardcoded.php
index 2fada5392a..8425c16e7a 100644
--- a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single-hardcoded.php
+++ b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single-hardcoded.php
@@ -22,7 +22,7 @@ function( $other_contributor ) {
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<section>
-		<div class="row align-middle between section-heading section-heading--with-space">
+		<div class="section-heading section-heading--with-space">
 			<h1 class="section-heading_title h2"><?php the_title(); ?></h1>
 		</div>
 		<hr>
diff --git a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php
index 17b1f79bdd..b93a64efbe 100644
--- a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php
+++ b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php
@@ -20,7 +20,7 @@ function( $other_contributor ) {
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<section>
-		<div class="row align-middle between section-heading section-heading--with-space">
+		<div class="section-heading section-heading--with-space">
 			<h1 class="section-heading_title h2"><?php the_title(); ?></h1>
 		</div>