Curator: index template and styles (#6071)

* update index template and styles

update undeline thickness and spacing

add pagination pattern to post-list

move padding from pattern to template

* Rework design of meta and pagination.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

curator/patterns/posts-list.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Title: Posts list
+ * Slug: curator/posts-list
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"align":"wide"} -->
+<div class="wp-block-group alignwide">
+
+<!-- wp:query {"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"perPage":3}} -->
+<div class="wp-block-query"><!-- wp:post-template -->
+<!-- wp:group {"style":{"border":{"bottom":{"width":"1px"}}}} -->
+<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:post-date {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->
+<!-- wp:post-terms {"term":"category"} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:post-title {"level":1,"isLink":true,"style":{"typography":{"lineHeight":1},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
+
+<!-- wp:separator {"className":"alignfull"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity alignfull"/>
+<!-- /wp:separator --></div>
+<!-- /wp:group -->
+<!-- /wp:post-template -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem"}}}} -->
+<div class="wp-block-group" style="padding-top:1rem"><!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
+<!-- wp:query-pagination-numbers /-->
+<!-- wp:group {"style":{"spacing":{"blockGap":"2rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:query-pagination-previous /-->
+<!-- wp:query-pagination-next /--></div>
+<!-- /wp:group -->
+<!-- /wp:query-pagination --></div>
+<!-- /wp:group --></div>
+<!-- /wp:query --></div>
+<!-- /wp:group -->

curator/style.css

@@ -191,6 +191,14 @@ a:not(
 	text-decoration: underline;
 }
 
+.wp-block-post-title a:hover {
+	color: var(--wp--preset--color--primary);
+	text-decoration-line: underline;
+	text-decoration-thickness: 0.25rem;
+	text-underline-offset: 0.25rem;
+}
+
+
 /*
  * Alignment styles, borrowed from Twenty Twenty-Two.
  * These rules are temporary, and should not be relied on or
@@ -265,3 +273,33 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 .wp-block-post-comments-count {
 	display: inline;
 }
+
+/*
+ * Pagination
+ */
+
+:is(
+	.wp-block-query-pagination .wp-block-query-pagination-previous,
+	.wp-block-query-pagination .wp-block-query-pagination-next
+):hover {
+	text-decoration: underline;
+}
+.is-arrow-arrow.wp-block-query-pagination-next-arrow {
+	margin-left: 0.375rem;
+	font-weight: 400;
+}
+.is-arrow-arrow.wp-block-query-pagination-previous-arrow {
+	margin-right: 0.375rem;
+	font-weight: 400;
+}
+.wp-block-query-pagination-numbers .page-numbers:not(.current):not(.dots):hover {
+	text-decoration: underline;
+}
+.wp-block-query-pagination-numbers .page-numbers.current {
+	text-decoration: underline;
+}
+@media (max-width: 599px) {
+	.wp-block-query-pagination-numbers {
+		display: none;
+	}
+}

curator/templates/index.html

@@ -1,33 +1,6 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
-<main class="wp-block-query">
-	<!-- wp:post-template -->
-	<!-- wp:group -->
-	<div class="wp-block-group">
-		<!-- wp:post-title {"isLink":true} /-->
-		<!-- wp:post-featured-image {"isLink":true} /-->
-		<!-- wp:post-excerpt /-->
-		<!-- wp:template-part {"slug":"post-meta"} /-->
-		<!-- wp:spacer {"height":40} -->
-		<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-	</div>
-	<!-- /wp:group -->
-	<!-- /wp:post-template -->
-	<!-- wp:group {"layout":{"inherit":true}} -->
-		<div class="wp-block-group">
-		<!-- wp:query-pagination -->
-			<!-- wp:query-pagination-previous /-->
-	
-			<!-- wp:query-pagination-numbers /-->
-	
-			<!-- wp:query-pagination-next /-->
-		<!-- /wp:query-pagination -->
-		</div>
-		<!-- /wp:group -->
-	</main>
-	<!-- /wp:query -->
-	
-	<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:pattern {"slug":"curator/posts-list"} /-->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
 	

curator/theme.json

@@ -124,6 +124,16 @@
 					"name": "Headings (System Font)",
 					"slug": "heading-font",
 					"fontFace": [
+						{
+							"fontDisplay": "regular",
+							"fontFamily": "'Work Sans'",
+							"fontWeight": "400",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [
+								"file:./assets/fonts/WorkSans.ttf"
+							]
+						},
 						{
 							"fontDisplay": "block",
 							"fontFamily": "'Work Sans'",
@@ -134,6 +144,16 @@
 								"file:./assets/fonts/WorkSans.ttf"
 							]
 						},
+						{
+							"fontDisplay": "regular",
+							"fontFamily": "'Work Sans'",
+							"fontWeight": "400",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [
+								"file:./assets/fonts/WorkSans-Italic.ttf"
+							]
+						},
 						{
 							"fontDisplay": "block",
 							"fontFamily": "'Work Sans'",
@@ -297,11 +317,11 @@
 				}
 			},
 			"core/query-pagination": {
-				"spacing": {
-					"padding": {
-						"left": "20px",
-						"right": "20px"
-					}
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
+					"fontSize": "clamp(1.125rem, 4vw, 1.375rem)",
+					"fontWeight": "900",
+					"letterSpacing": "-0.02rem"
 				},
 				"elements": {
 					"link": {
@@ -311,6 +331,27 @@
 					}
 				}
 			},
+			"core/query-pagination-previous": {
+				"typography": {
+					"textTransform": "uppercase",
+					"textDecoration": "none"
+				}
+			},
+			"core/query-pagination-next": {
+				"typography": {
+					"textTransform": "uppercase",
+					"textDecoration": "none"
+				}
+			},
+			"core/query-pagination-numbers": {
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						}
+					}
+				}
+			},
 			"core/pullquote": {
 				"border": {
 					"style": "solid",