From f670e14c5b644161cada8ff7bfc7dc8e1b7db00d Mon Sep 17 00:00:00 2001
From: Maggie <maggie.cabrera@automattic.com>
Date: Thu, 20 Jan 2022 11:41:24 +0100
Subject: [PATCH 1/2] add dropcap to categories pages

---
 .../block-templates/category.html             |  7 ++++
 .../sass/components/_categories.scss          | 35 +++++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

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
index f2215b43..70ae4f2b 100644
--- a/source/wp-content/themes/wporg-news-2021/block-templates/category.html
+++ b/source/wp-content/themes/wporg-news-2021/block-templates/category.html
@@ -2,6 +2,13 @@
 
 <!-- wp:query {"tagName":"main","className":"site-content-container"} -->
 <main class="wp-block-query site-content-container">
+
+	<!-- wp:group {"className":"query-title-banner__title__dropcap"} -->
+	<div class="query-title-banner__title__dropcap">
+		<!-- wp:query-title {"type":"archive"} /-->
+	</div>
+	<!-- /wp:group -->
+
 	<!-- wp:post-template -->
 		<!-- wp:template-part {"slug":"content-posts-index","tagName":"article","layout":{"inherit":true}} /-->
 	<!-- /wp:post-template -->
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
index 9cfd629b..5c671e47 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/components/_categories.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/components/_categories.scss
@@ -125,19 +125,23 @@ body.category-month-in-wordpress {
 
 body.category-development {
 
+	--category-color: var(--wp--preset--color--green);
+
 	@extend %local-header-lightish;
 
 	.local-header {
-		--bar-background-color: var(--wp--preset--color--green);
+		--bar-background-color: var(--category-color);
 	}
 }
 
 body.category-security {
 
+	--category-color: var(--wp--preset--color--coral-red);
+
 	@extend %local-header-lightish;
 
 	.local-header {
-		--bar-background-color: var(--wp--preset--color--coral-red);
+		--bar-background-color: var(--category-color);
 	}
 }
 
@@ -289,3 +293,30 @@ body.category-community {
 	}
 
 }
+
+body {
+
+	--category-color: var(--wp--preset--color--blue-1);
+
+	.query-title-banner__title__dropcap {
+		grid-column: 1 !important;
+		width: calc(var(--wp--custom--layout--content-meta-size) - 32px) !important;
+
+		.wp-block-query-title {
+			color: var(--category-color); 
+			font-size: 0;
+			line-height: 0.7;
+			@include hide-accessibly;
+
+			@include break-wide() {
+				@include show-hidden-accessibly;
+				margin-top: var( --wp--style--block-gap );
+			}
+
+			&:first-letter {
+				font-size: 35vw;
+				text-transform: uppercase;
+			}
+		}
+	}
+}
\ No newline at end of file

From 161a78d492ee0845689b5d60ad7b230c91e80726 Mon Sep 17 00:00:00 2001
From: Maggie <maggie.cabrera@automattic.com>
Date: Thu, 20 Jan 2022 12:35:58 +0100
Subject: [PATCH 2/2] linting

---
 .../wporg-news-2021/sass/components/_categories.scss   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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
index 5c671e47..23490927 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/components/_categories.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/components/_categories.scss
@@ -303,20 +303,22 @@ body {
 		width: calc(var(--wp--custom--layout--content-meta-size) - 32px) !important;
 
 		.wp-block-query-title {
-			color: var(--category-color); 
+			color: var(--category-color);
 			font-size: 0;
 			line-height: 0.7;
+
 			@include hide-accessibly;
 
 			@include break-wide() {
+
 				@include show-hidden-accessibly;
-				margin-top: var( --wp--style--block-gap );
+				margin-top: var(--wp--style--block-gap);
 			}
 
-			&:first-letter {
+			&::first-letter {
 				font-size: 35vw;
 				text-transform: uppercase;
 			}
 		}
 	}
-}
\ No newline at end of file
+}