Add dropcap to categories pages

[MaggieCabrera]

I'm not sure if this is tracked somewhere but I've seen there's a dropcap in the design of category pages, so I went ahead and implemented it:

[beafialho]

Thanks @MaggieCabrera, this looks good!

[iandunn]

Tracked in #75

[iandunn]

#208 has a different approach to this that feels a bit more straightforward, but this one works for me too.

wporg-news-2021/source/wp-content/themes/wporg-news-2021/sass/page/_categories.scss

Lines 9 to 30 in 3c8e3b5

	// Some categories include a decorative drop-cap-like character.
	&:before {
	display: block;
	width: 350px;
	color: var(--wp--preset--color--blue-1);
	font-size: 380px;
	font-family: var(--wp--custom--heading--typography--font-family);
	text-align: center;
	line-height: 1;
	position: fixed;
	top: 180px;
	left: var(--wp--custom--alignment--edge-spacing);
	z-index: -1;
	pointer-events: none;
	}
	}
	body.category-awards {
	.site-content-container:before {
	content: "A";
	}
	}

Whichever you prefer works for me, but I think we should make the change in this PR since that one is already doing way too much for a single PR.

[iandunn]

I do like that this approach is automated, but it may need to be restricted to certain categories.

Er, maybe not since those others would have different templates anyway.

[MaggieCabrera]

I think this is a better solution than having the letter in the CSS because of i18n. Right now everything that doesn't need the dropcap has a different template like you said. Any exceptions to the rule can also be added easily with an exception to the CSS.

[iandunn]

i18n is a good point 👍🏻