Fix stroke on pagination (#190)

* fix stroke colors on category pages * fixed query pagination markup * refactor variables for stroke, centered on mobile * fix stroke positioning * Remove stroke color property It's used to override the background color on the accent pages, but since it's only used once, it's more clear to set that directly. * Fix the pagination styling on blog archives (`/page/2/` etc) Co-authored-by: Kelly Dwan <[email protected]>
WordPress · Jan 14, 2022 · 4d17001 · 4d17001
1 parent f41eaae
commit 4d17001
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 12 deletions.
diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/category-community.html b/source/wp-content/themes/wporg-news-2021/block-templates/category-community.html
@@ -8,11 +8,9 @@
 	<!-- /wp:post-template -->
 
 	<!-- wp:query-pagination -->
-	<div class="wp-block-query-pagination">
 		<!-- wp:query-pagination-previous {"label":"Newer Posts"} /-->
 		<!-- wp:query-pagination-numbers /-->
 		<!-- wp:query-pagination-next {"label":"Older Posts"} /-->
-	</div>
 	<!-- /wp:query-pagination -->
 
 

diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/category-events.html b/source/wp-content/themes/wporg-news-2021/block-templates/category-events.html
@@ -7,11 +7,9 @@
 	<!-- /wp:post-template -->
 
 	<!-- wp:query-pagination -->
-	<div class="wp-block-query-pagination">
 		<!-- wp:query-pagination-previous {"label":"Newer Posts"} /-->
 		<!-- wp:query-pagination-numbers /-->
 		<!-- wp:query-pagination-next {"label":"Older Posts"} /-->
-	</div>
 	<!-- /wp:query-pagination -->
 
 </main>

diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/category-releases.html b/source/wp-content/themes/wporg-news-2021/block-templates/category-releases.html
@@ -7,11 +7,9 @@
 	<!-- /wp:post-template -->
 
 	<!-- wp:query-pagination -->
-	<div class="wp-block-query-pagination">
 		<!-- wp:query-pagination-previous {"label":"Newer Posts"} /-->
 		<!-- wp:query-pagination-numbers /-->
 		<!-- wp:query-pagination-next {"label":"Older Posts"} /-->
-	</div>
 	<!-- /wp:query-pagination -->
 </main>
 <!-- /wp:query -->

diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/category.html b/source/wp-content/themes/wporg-news-2021/block-templates/category.html
@@ -7,11 +7,9 @@
 	<!-- /wp:post-template -->
 
 	<!-- wp:query-pagination -->
-	<div class="wp-block-query-pagination">
 		<!-- wp:query-pagination-previous {"label":"Newer Posts"} /-->
 		<!-- wp:query-pagination-numbers /-->
 		<!-- wp:query-pagination-next {"label":"Older Posts"} /-->
-	</div>
 	<!-- /wp:query-pagination -->
 
 </main>

diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/index.html b/source/wp-content/themes/wporg-news-2021/block-templates/index.html
@@ -14,11 +14,9 @@
 	<!-- /wp:post-template -->
 
 	<!-- wp:query-pagination -->
-	<div class="wp-block-query-pagination">
 		<!-- wp:query-pagination-previous {"label":"Newer Posts"} /-->
 		<!-- wp:query-pagination-numbers /-->
 		<!-- wp:query-pagination-next {"label":"Older Posts"} /-->
-	</div>
 	<!-- /wp:query-pagination -->
 
 </main>

diff --git a/source/wp-content/themes/wporg-news-2021/sass/blocks/_query-pagination.scss b/source/wp-content/themes/wporg-news-2021/sass/blocks/_query-pagination.scss
@@ -8,6 +8,23 @@
 	color: var(--wp--preset--color--blue-1);
 	position: relative;
 
+	body:where(.archive, .blog.paged) & {
+		padding: 40px 0;
+
+		@include break-small-only() {
+			display: flex;
+			justify-content: center;
+
+			&::after {
+				mask-position: center;
+			}
+		}
+
+		&::after {
+			z-index: -1;
+		}
+	}
+
 	.wp-block-query-pagination-next {
 		z-index: 2;
 	}

diff --git a/source/wp-content/themes/wporg-news-2021/sass/components/_categories.scss b/source/wp-content/themes/wporg-news-2021/sass/components/_categories.scss
@@ -13,6 +13,8 @@ body.category-events {
 }
 
 body.category-releases {
+	--contrast-color: var(--wp--preset--color--blue-5);
+
 	.wp-site-blocks {
 		background-color: var(--wp--preset--color--blue-1);
 	}
@@ -31,7 +33,11 @@ body.category-releases {
 	}
 
 	.local-header {
-		--bar-background-color: var(--wp--preset--color--blue-5);
+		--bar-background-color: var(--contrast-color);
+	}
+
+	.wp-block-query-pagination::after {
+		background-color: var(--contrast-color);
 	}
 
 	@extend %footer-archive-dark;

diff --git a/source/wp-content/themes/wporg-news-2021/sass/components/_local-header.scss b/source/wp-content/themes/wporg-news-2021/sass/components/_local-header.scss
@@ -244,16 +244,22 @@
 
 // Alternate off-white version.
 %local-header-off-white {
+	--contrast-color: var(--wp--preset--color--white);
+
 	.wp-site-blocks {
 		background-color: var(--wp--preset--color--off-white);
 
 		.local-header {
-			--bar-background-color: var(--wp--preset--color--white);
+			--bar-background-color: var(--contrast-color);
 			--bar-text-color: var(--wp--preset--color--black);
 			--bar-link-color: var(--wp--preset--color--blue-1);
 			--bar-link-hover-color: var(--wp--preset--color--blue-1);
 		}
 	}
+
+	.wp-block-query-pagination::after {
+		background-color: var(--contrast-color);
+	}
 }
 
 // Alternate version with a color light enough to need dark text. e.g., Security category.