Update Community category page style (#199)

* started community category styles

* fix mobile styles

* linting

* keep text decoration on hover

* hover effects added for desktop

* Update source/wp-content/themes/wporg-news-2021/sass/components/_categories.scss

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>

* heading change to h2

* linting and reordering of css

* fix positioning of hover text

* improved responsive grid behavior

* linting

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>

source/wp-content/themes/wporg-news-2021/block-template-parts/content-category-community.html

@@ -1,10 +1,10 @@
 <!-- wp:group {"tagName":"header","className":"entry-header",style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
 <header class="wp-block-group entry-header">
-	<!-- wp:post-title {"level":3,"isLink":true} /-->
 	<!-- wp:post-featured-image {"isLink":true,"width":"200","height":"200"} /-->
 
 	<!-- wp:group {"className":"entry-meta"} -->
 	<div class="wp-block-group entry-meta">
+		<!-- wp:post-title {"level":2,"isLink":true} /-->
 		<!-- wp:post-date /-->
 	</div>
 	<!-- /wp:group -->

source/wp-content/themes/wporg-news-2021/block-templates/category-community.html

@@ -1,9 +1,9 @@
 <!-- wp:template-part {"slug":"header","align":"full","className":"site-header-container"} /-->
 
 <!-- Note: This query has filters, but they live in `category_posts_per_page()`. That's necessary to avoid a Gutenberg design flaw. -->
-<!-- wp:query {"tagName":"main","className":"site-content-container","query":{"inherit":true},"displayLayout":{"type":"flex","columns":4},"align":"full"} -->
+<!-- wp:query {"tagName":"main","className":"site-content-container","query":{"inherit":true},"displayLayout":{"type":"flex","columns":4}} -->
 <main class="wp-block-query site-content-container">
-	<!-- wp:post-template -->
+	<!-- wp:post-template {"align":"wide"} -->
 		<!-- wp:template-part {"slug":"content-category-community","tagName":"article","layout":{"inherit":true}} /-->
 	<!-- /wp:post-template -->
 

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

@@ -146,33 +146,146 @@ body.category-community {
 
 	@extend %local-header-lightish;
 
-	.wp-block-post-title,
-	.wp-block-post-date {
-		font-size: var(--wp--preset--font--size--tiny);
+	.wp-site-blocks > .site-content-container:not(.site-header-container):not(.local-header):not(.global-footer):not(.footer-archive) {
+		padding: 0;
+		margin-top: 0;
+
+		@include break-medium() {
+			padding-left: 0;
+			padding-right: 0;
+		}
+
+		@include break-large() {
+			padding-left: var(--wp--custom--alignment--edge-spacing);
+			padding-right: var(--wp--custom--alignment--edge-spacing);
+		}
 	}
 
-	// Alternating blue-1 and blue-2 for non-thumbnail posts
-	li.post:not(.has-post-thumbnail):nth-of-type(even) {
-		background-color: var(--wp--preset--color--blue-1);
-		color: var(--wp--preset--color--white);
-		vertical-align: bottom;
+	.wp-block-post-template {
+		gap: 2px;
+
+		&.is-flex-container.columns-4 > li {
+
+			@include break-small() {
+				width: calc(50% - 2px);
+			}
+
+			@include break-medium() {
+				width: calc(33.333% - 2px);
+			}
+
+			@include break-large() {
+				width: calc(25% - 2px);
+			}
+		}
 	}
 
-	li.post:not(.has-post-thumbnail):nth-of-type(odd) {
-		background-color: var(--wp--preset--color--blue-2);
-		color: var(--wp--preset--color--white);
-		vertical-align: bottom;
+	.wp-block-post-title {
+		font-size: var(--wp--preset--font-size--huge);
+		line-height: 1.3;
+
+		a:hover,
+		a:focus {
+			color: inherit;
+		}
 	}
 
-	// Featured image only for posts that have one
-	li.post.has-post-thumbnail .wp-block-post-title,
-	li.post.has-post-thumbnail .entry-meta {
-		display: none;
+	.wp-block-post-date {
+		font-size: var(--wp--preset--font-size--small);
 	}
 
-	// B&W featured image
-	li.post.has-post-thumbnail .wp-block-post-featured-image {
-		filter: grayscale(100%);
-		object-fit: cover;
+	li.post {
+		margin: 0;
+
+		@include break-small() {
+			aspect-ratio: 1 / 1;
+		}
+
+		.entry-meta {
+			padding: 24px;
+		}
+
+		&.has-post-thumbnail {
+			position: relative;
+
+			.wp-block-template-part,
+			header,
+			figure,
+			figure a,
+			img {
+
+				@include break-small() {
+					height: 100%;
+				}
+			}
+			// B&W featured image
+			.wp-block-post-featured-image {
+				object-fit: cover;
+
+				img {
+					filter: grayscale(100%);
+				}
+			}
+
+			@include break-small() {
+				&:hover,
+				&:focus-within {
+					figure {
+						transition: all 0.3s ease-in-out;
+						background-color: var(--wp--preset--color--blue-1);
+					}
+
+					img {
+						mix-blend-mode: multiply;
+					}
+
+					.entry-meta {
+						opacity: 1;
+						transition: opacity 0.3s ease-in-out;
+					}
+				}
+
+				.entry-meta {
+					opacity: 0;
+					color: var(--wp--preset--color--white);
+					position: absolute;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					z-index: 1;
+				}
+			}
+		}
+
+
+		&:not(.has-post-thumbnail) {
+			min-height: 80vh;
+			display: flex;
+			align-items: flex-end;
+
+			@include break-small() {
+				min-height: 0;
+
+				&:nth-of-type(even):hover,
+				&:nth-of-type(odd):hover {
+					transition: all 0.3s ease-in-out;
+					background-color: var(--wp--preset--color--black);
+				}
+			}
+
+			// Alternating blue-1 and blue-2 for non-thumbnail posts
+			&:nth-of-type(even) {
+				background-color: var(--wp--preset--color--blue-1);
+				color: var(--wp--preset--color--white);
+				vertical-align: bottom;
+			}
+
+			&:nth-of-type(odd) {
+				background-color: var(--wp--preset--color--blue-2);
+				color: var(--wp--preset--color--white);
+				vertical-align: bottom;
+			}
+		}
 	}
+
 }

source/wp-content/themes/wporg-news-2021/sass/post/_content.scss

@@ -25,8 +25,3 @@ body.page .site-content-container .wp-block-post-content {
 
 	@extend %two-column-grid-container-dynamic-rows;
 }
-
-body.category-community .site-content-container {
-
-	@extend %four-column-grid-container;
-}