Theme: Move the local nav mask to the query title banner.

WordPress · Nov 17, 2021 · b2ea203 · b2ea203
1 parent 0e25cb4
commit b2ea203
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
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
@@ -1,3 +1,14 @@
+%bottom-mask {
+	mask-image: url('assets/svg/local-nav-mask.svg');
+	mask-repeat: no-repeat;
+	mask-position: -200px -1px;
+	mask-size: cover;
+
+	@include break-small {
+		mask-position-x: -20px;
+	}
+}
+
 // Default/light version.
 .local-header {
 	--bar-text-color: var(--wp--preset--color--white);
@@ -8,14 +19,7 @@
 	background-color: var( --bar-background-color );
 	color: var(--bar-text-color);
 
-	mask-image: url('assets/svg/local-nav-mask.svg');
-	mask-repeat: no-repeat;
-	mask-position: -200px -1px;
-	mask-size: cover;
-
-	@include break-small  {
-		mask-position-x: -20px;
-	}
+	@extend %bottom-mask;
 
 	.wp-site-blocks & {
 		margin-top: 0;

diff --git a/source/wp-content/themes/wporg-news-2021/sass/components/_posts-index.scss b/source/wp-content/themes/wporg-news-2021/sass/components/_posts-index.scss
diff --git a/source/wp-content/themes/wporg-news-2021/sass/components/_query-title-banner.scss b/source/wp-content/themes/wporg-news-2021/sass/components/_query-title-banner.scss
@@ -19,3 +19,17 @@ body.news-posts-index .query-title-banner__title-all-posts,
 body.search .query-title-banner__title-search-results {
 	display: block;
 }
+
+body.news-front-page,
+body.news-posts-index,
+body.search,
+body.archive:not(.category) {
+	.local-header {
+		/* Remove mask so this element blends into `query-title-banner`. */
+		mask-image: none;
+	}
+
+	.query-title-banner {
+		@extend %bottom-mask;
+	}
+}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/components/front-page/_front-page.scss b/source/wp-content/themes/wporg-news-2021/sass/components/front-page/_front-page.scss
@@ -1,9 +1,4 @@
 body.news-front-page {
-	.local-header {
-		/* Remove mask so this element blends into `front__latest-release`. */
-		mask-image: none;
-	}
-
 	.wp-block-home-link__content {
 		/* Hide because `.front__site-title` will show it instead. */
 		display: none;

diff --git a/source/wp-content/themes/wporg-news-2021/sass/style.scss b/source/wp-content/themes/wporg-news-2021/sass/style.scss
@@ -79,7 +79,6 @@ GNU General Public License for more details.
 @import "components/front-page/front-page";
 @import "components/front-page/latest-release";
 @import "components/front-page/people-of-wordpress";
-@import "components/posts-index";
 @import "components/categories";
 @import "components/404";