Update font specifications (and more!) (#6)

* Add preset sizes. * Use rem instead of pixel values. * Add line height rules, default text rules. * Add font size + line height for all headings. * Add post title and site title font specs. * Adjust font sizes in templates. * Tidy up line height for tagline, spacing underneath title. * Make blockGap larger to better match the comps. * Update content width to match comps. * Fix tagname for front page header. * Add responsive font sizes using clamp. * Make featured images square again.
WordPress · Oct 5, 2021 · b872f4d · b872f4d
1 parent acf2ce9
commit b872f4d
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 23 deletions.
diff --git a/block-template-parts/header-large-dark.html b/block-template-parts/header-large-dark.html
@@ -17,7 +17,11 @@
 
 <!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:site-tagline /--></div>
+<div class="wp-block-column"><!-- wp:site-tagline {"style":{"typography":{"fontFamily":"var:preset|font-family|source-serif-pro","fontWeight":"300","fontSize":"clamp(4rem, 8vw, 6.25rem)","lineHeight":"1.15"}}} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>
-<!-- /wp:group -->
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":128} -->
+<div style="height:128px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
diff --git a/block-templates/front-page.html b/block-templates/front-page.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header-large-dark","tagName":"header-large-dark"} /-->
+<!-- wp:template-part {"slug":"header-large-dark","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"right":"1.25em","left":"1.25em"}}}} -->
 <main class="wp-block-group" style="padding-right:1.25em;padding-left:1.25em">

diff --git a/block-templates/index.html b/block-templates/index.html
@@ -3,25 +3,25 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"right":"1.25rem","left":"1.25rem"}}}} -->
 <div class="wp-block-group" style="padding-right:1.25rem;padding-left:1.25rem"><!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":10},"tagName":"main","displayLayout":{"type":"flex","columns":3},"layout":{"inherit":true}} -->
 <main class="wp-block-query"><!-- wp:post-template {"align":"wide"} -->
-<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"340px"} /-->
+<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"318px"} /-->
 
-<!-- wp:post-title {"isLink":true} /-->
+<!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
 
 <!-- wp:post-excerpt /-->
 
-<!-- wp:post-date {"format":"F j, Y","isLink":true} /-->
+<!-- wp:post-date {"format":"F j, Y","isLink":true,"fontSize":"small"} /-->
 <!-- /wp:post-template -->
 
 <!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
 <hr class="wp-block-separator alignwide is-style-wide"/>
 <!-- /wp:separator -->
 
 <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
-<!-- wp:query-pagination-previous /-->
+<!-- wp:query-pagination-previous {"fontSize":"small"} /-->
 
 <!-- wp:query-pagination-numbers /-->
 
-<!-- wp:query-pagination-next /-->
+<!-- wp:query-pagination-next {"fontSize":"small"} /-->
 <!-- /wp:query-pagination --></main>
 <!-- /wp:query --></div>
 <!-- /wp:group -->

diff --git a/block-templates/single.html b/block-templates/single.html
@@ -31,16 +31,16 @@
 <div class="wp-block-group"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"66.66%","style":{"spacing":{"padding":{"top":"0%","right":"0%","bottom":"0%","left":"0%"}}}} -->
 <div class="wp-block-column" style="padding-top:0%;padding-right:0%;padding-bottom:0%;padding-left:0%;flex-basis:66.66%"><!-- wp:group {"layout":{"type":"flex"}} -->
-<div class="wp-block-group"><!-- wp:post-date /-->
+<div class="wp-block-group"><!-- wp:post-date {"fontSize":"small"} /-->
 
-<!-- wp:post-terms {"term":"category"} /--></div>
+<!-- wp:post-terms {"term":"category","fontSize":"small"} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:post-author {"showAvatar":false} /--></div>
+<!-- wp:post-author {"showAvatar":false,"fontSize":"small"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class="wp-block-column"><!-- wp:post-terms {"term":"post_tag"} /--></div>
+<div class="wp-block-column"><!-- wp:post-terms {"term":"post_tag","fontSize":"small"} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>
 <!-- /wp:group --></div>

diff --git a/theme.json b/theme.json
@@ -32,6 +32,20 @@
 				}
 			]
 		},
+		"custom": {
+			"typography": {
+				"font-size": {
+					"gigantic": "clamp(3rem, 6vw, 4rem)",
+					"colossal": "clamp(4rem, 8vw, 6.25rem)"
+				},
+				"line-height": {
+					"tiny": 1.15,
+					"small": 1.2,
+					"medium": 1.4,
+					"normal": 1.6
+				}
+			}
+		},
 		"spacing": {
 			"blockGap": true,
 			"customPadding": true,
@@ -58,11 +72,37 @@
 					"slug": "source-serif-pro"
 				}
 			],
-			"fontSizes": []
+			"fontSizes": [
+				{
+					"name": "Small",
+					"size": "1rem",
+					"slug": "small"
+				},
+				{
+					"name": "Normal",
+					"size": "1.125rem",
+					"slug": "normal"
+				},
+				{
+					"name": "Medium",
+					"size": "1.75rem",
+					"slug": "medium"
+				},
+				{
+					"name": "Large",
+					"size": "clamp(1.75rem, 3vw, 2.25rem)",
+					"slug": "large"
+				},
+				{
+					"name": "Huge",
+					"size": "clamp(2.5rem, 4vw, 3rem)",
+					"slug": "huge"
+				}
+			]
 		},
 		"layout": {
-			"contentSize": "600px",
-			"wideSize": "1100px"
+			"contentSize": "650px",
+			"wideSize": "1000px"
 		}
 	},
 	"styles": {
@@ -75,6 +115,22 @@
 					"background": "var(--wp--preset--color--primary)",
 					"text": "var(--wp--preset--color--background)"
 				}
+			},
+			"core/post-title": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
+					"fontWeight": "300",
+					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
+					"fontSize": "var(--wp--custom--typography--font-size--gigantic)"
+				}
+			},
+			"core/site-title": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--system-font)",
+					"lineHeight": "var(--wp--custom--typography--line-height--normal)",
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"fontWeight": "normal"
+				}
 			}
 		},
 		"color": {
@@ -85,39 +141,51 @@
 			"h1": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
-					"fontWeight": "300"
+					"fontWeight": "300",
+					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
+					"fontSize": "var(--wp--custom--typography--font-size--colossal)"
 				}
 			},
 			"h2": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
-					"fontWeight": "300"
+					"fontWeight": "300",
+					"lineHeight": "var(--wp--custom--typography--line-height--small)",
+					"fontSize": "var(--wp--custom--typography--font-size--gigantic)"
 				}
 			},
 			"h3": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
-					"fontWeight": "300"
+					"fontWeight": "300",
+					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
+					"fontSize": "var(--wp--preset--font-size--huge)"
 				}
 			},
 			"h4": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
-					"fontWeight": "300"
+					"fontWeight": "300",
+					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
+					"fontSize": "var(--wp--preset--font-size--large)"
 				}
 			},
 			"h5": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--system-font)",
 					"fontWeight": "700",
-					"textTransform": "uppercase"
+					"textTransform": "uppercase",
+					"lineHeight": "var(--wp--custom--typography--line-height--normal)",
+					"fontSize": "var(--wp--preset--font-size--normal)"
 				}
 			},
 			"h6": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--system-font)",
 					"fontWeight": "400",
-					"textTransform": "uppercase"
+					"textTransform": "uppercase",
+					"lineHeight": "var(--wp--custom--typography--line-height--normal)",
+					"fontSize": "var(--wp--preset--font-size--normal)"
 				}
 			},
 			"link": {
@@ -127,10 +195,12 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "1.25rem"
+			"blockGap": "1.5rem"
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--system-font)"
+			"fontFamily": "var(--wp--preset--font-family--system-font)",
+			"lineHeight": "var(--wp--custom--typography--line-height--normal)",
+			"fontSize": "var(--wp--preset--font-size--normal)"
 		}
 	}
 }