diff --git a/source/wp-content/themes/wporg-news-2021/block-template-parts/content-category-community.html b/source/wp-content/themes/wporg-news-2021/block-template-parts/content-category-community.html index b69397a8..99001aba 100644 --- a/source/wp-content/themes/wporg-news-2021/block-template-parts/content-category-community.html +++ b/source/wp-content/themes/wporg-news-2021/block-template-parts/content-category-community.html @@ -1,10 +1,10 @@
-
+
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 index 87c5be04..b560995b 100644 --- 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 @@ -1,9 +1,9 @@ - +
- + 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 20b08c1f..049a878d 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 @@ -88,33 +88,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; + } + } } + } diff --git a/source/wp-content/themes/wporg-news-2021/sass/post/_content.scss b/source/wp-content/themes/wporg-news-2021/sass/post/_content.scss index a03aad23..bf878083 100644 --- a/source/wp-content/themes/wporg-news-2021/sass/post/_content.scss +++ b/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; -}