Browse Source

Rainfall: Update navigation styles and tidy up templates (#6417)

* Move CSS to theme.json

* Move button styles to theme.json

* Remove alignment styles

* Update URI, tags in style.css

* Add more comments to style.css

* Fix typo

* Add description; update required WP versions

* Adjust fluid typography

* Update header spacing

* Add 100 spacing preset

* Update all layout settings to new format

* Update spacing values across templates

* Remove unnecessary margin resets

* Make sidebar translatable

* Tweak navigation link colours

* Make overlay close button uppercase

* Remove unnecessary CSS (its in GB now)

* Fix root padding

* Tweak fluid types

* Make sidebar not hidden

* remove font smoothing

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Sarah Norris 2 years ago
parent
commit
a96d425b88

+ 3 - 3
rainfall/parts/footer.html

@@ -1,6 +1,6 @@
-<!-- wp:group {"layout":{"inherit":"true"}} -->
-<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"30px","bottom":"60px"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull" style="padding-top:30px;padding-bottom:60px"><!-- wp:site-title {"textAlign":"left","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|110"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--110)"><!-- wp:site-title {"textAlign":"left","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
 
 <!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","orientation":"horizontal"}} -->
 <div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left"},"style":{"typography":{"textTransform":"uppercase"}}} /--></div>

+ 6 - 6
rainfall/parts/header.html

@@ -1,11 +1,11 @@
-<!-- wp:group {"layout":{"inherit":"true"}} -->
-<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"30px","top":"30px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull" style="padding-top:30px;padding-bottom:30px"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
 
-<!-- wp:navigation {"hasIcon":false,"overlayBackgroundColor":"black","overlayTextColor":"white","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"2.87rem"},"typography":{"textTransform":"uppercase"}}} /--></div>
+<!-- wp:navigation {"hasIcon":false,"overlayBackgroundColor":"black","overlayTextColor":"white","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|90"},"typography":{"textTransform":"uppercase"}}} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"60px"} -->
-<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--110)"} -->
+<div style="height:var(--wp--preset--spacing--110)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer --></div>
 <!-- /wp:group -->

+ 5 - 6
rainfall/parts/query.html

@@ -1,14 +1,13 @@
-<!-- wp:group {"align":"wide","layout":{"inherit":true}} -->
+<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignwide"><!-- wp:columns {"align":"wide"} -->
-<div class="wp-block-columns alignwide"><!-- wp:column {"width":"70%","style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
-<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;flex-basis:70%"><!-- wp:query {"queryId":0,"query":{"pages":0,"offset":0,"postType":"post","inherit":true,"perPage":10},"displayLayout":{"type":"list"}} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"width":"70%","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
+<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);flex-basis:70%"><!-- wp:query {"queryId":0,"query":{"pages":0,"offset":0,"postType":"post","inherit":true,"perPage":10},"displayLayout":{"type":"list"}} -->
 <div class="wp-block-query"><!-- wp:post-template -->
 <!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"width":"1px"},"left":{"width":"0px","style":"none"}},"spacing":{"margin":{"bottom":"0px"},"padding":{"top":"0px","right":"0px","bottom":"var(--wp--style--block-gap)","left":"0px"}}}} -->
 <div class="wp-block-columns alignwide are-vertically-aligned-center" style="border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-width:1px;border-left-style:none;border-left-width:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:var(--wp--style--block-gap);padding-left:0px"><!-- wp:column {"verticalAlignment":"center","width":"100px"} -->
 <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:100px"><!-- wp:post-date {"format":"M j","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /--></div>
 <!-- /wp:column -->
 
-
 <!-- wp:column {"verticalAlignment":"center","width":"53.34%"} -->
 <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:53.34%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"lineHeight":"1.1","textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"color":{"text":"#ffffff","link":"#ffffff"}},"fontSize":"large"} /--></div>
 <!-- /wp:column -->
@@ -29,8 +28,8 @@
 <!-- /wp:query --></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"width":"30%","style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
-<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;flex-basis:30%"><!-- wp:template-part {"slug":"sidebar"} /--></div>
+<!-- wp:column {"width":"30%","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
+<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);flex-basis:30%"><!-- wp:template-part {"slug":"sidebar"} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>
 <!-- /wp:group -->

+ 1 - 10
rainfall/parts/sidebar.html

@@ -1,10 +1 @@
-<!-- wp:search {"label":"Search for a topic","buttonText":"Search"} /-->
-
-<!-- wp:heading {"level":6} -->
-<h6>Submissions</h6>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Would you like to contribute as an editor or a writer to our blog? Let us know all the details about yourself and
-	send us a message.</p>
-<!-- /wp:paragraph -->
+<!-- wp:pattern {"slug":"rainfall/sidebar"} /-->

+ 1 - 1
rainfall/patterns/cta.php

@@ -6,7 +6,7 @@
  */
 ?>
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","right":"11rem","left":"11rem","top":"8rem"}}},"backgroundColor":"black","layout":{"inherit":false}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","right":"11rem","left":"11rem","top":"8rem"}}},"backgroundColor":"black","layout":{"type":"default"}} -->
 <div class="wp-block-group alignwide has-black-background-color has-background" style="padding-top:8rem;padding-right:11rem;padding-bottom:8rem;padding-left:11rem"><!-- wp:heading {"level":1,"textColor":"white"} -->
 <h1 class="has-white-color has-text-color"><?php echo esc_html__( 'Work With Us', 'rainfall' ); ?></h1>
 <!-- /wp:heading -->

+ 2 - 2
rainfall/patterns/hidden-404.php

@@ -15,8 +15,8 @@
 		<!-- /wp:heading -->
 	</div>
 	<!-- /wp:group -->
-	<!-- wp:spacer {"height":"12px"} -->
-	<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- wp:spacer {"height":"var(--wp--preset--spacing--20)"} -->
+	<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 </div>
 <!-- /wp:group -->

+ 8 - 8
rainfall/patterns/latest-posts.php

@@ -17,7 +17,7 @@
 
 <!-- wp:post-terms {"term":"category","style":{"typography":{"textTransform":"uppercase"}}} /-->
 
-<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"14px","bottom":"40px"}}},"fontSize":"4.875rem"} /-->
+<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|90"}}},"fontSize":"4.875rem"} /-->
 
 <!-- wp:post-excerpt /-->
 <!-- /wp:post-template --></div>
@@ -28,10 +28,10 @@
 <div class="wp-block-column is-vertically-aligned-top"><!-- wp:query {"queryId":35,"query":{"perPage":"1","pages":0,"offset":"1","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"list"}} -->
 <div class="wp-block-query"><!-- wp:post-template -->
 <!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"backgroundColor":"black","textColor":"white"} -->
-<div class="wp-block-columns has-white-color has-black-background-color has-text-color has-background" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"verticalAlignment":"top","width":"50%","style":{"spacing":{"padding":{"top":"31px","right":"31px","bottom":"31px","left":"31px"}}}} -->
-<div class="wp-block-column is-vertically-aligned-top" style="padding-top:31px;padding-right:31px;padding-bottom:31px;padding-left:31px;flex-basis:50%"><!-- wp:post-terms {"term":"category","style":{"typography":{"textTransform":"uppercase"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} /-->
+<div class="wp-block-columns has-white-color has-black-background-color has-text-color has-background" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"verticalAlignment":"top","width":"50%","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}}}} -->
+<div class="wp-block-column is-vertically-aligned-top" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70);flex-basis:50%"><!-- wp:post-terms {"term":"category","style":{"typography":{"textTransform":"uppercase"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} /-->
 
-<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"14px","bottom":"40px"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"x-large"} /-->
+<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|90"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"x-large"} /-->
 
 <!-- wp:post-excerpt /--></div>
 <!-- /wp:column -->
@@ -43,18 +43,18 @@
 <!-- /wp:post-template --></div>
 <!-- /wp:query -->
 
-<!-- wp:separator {"style":{"spacing":{"margin":{"top":"50px","bottom":"50px"}}},"className":"is-style-wide"} -->
-<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:50px;margin-bottom:50px"/>
+<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|100","bottom":"var:preset|spacing|100"}}},"className":"is-style-wide"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--100);margin-bottom:var(--wp--preset--spacing--100)"/>
 <!-- /wp:separator -->
 
 <!-- wp:query {"queryId":25,"query":{"perPage":"2","pages":0,"offset":"2","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":2}} -->
 <div class="wp-block-query"><!-- wp:post-template -->
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"layout":{"inherit":false}} -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"layout":{"type":"default"}} -->
 <div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"spacing":{"margin":{"top":"0px"}}}} /-->
 
 <!-- wp:post-terms {"term":"category","style":{"typography":{"textTransform":"uppercase"}}} /-->
 
-<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"10px","bottom":"14px"}}},"fontSize":"large"} /-->
+<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|60"}}},"fontSize":"large"} /-->
 
 <!-- wp:post-excerpt {"style":{"spacing":{"margin":{"top":"0px"}}}} /--></div>
 <!-- /wp:group -->

+ 16 - 0
rainfall/patterns/sidebar.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Title: Sidebar content
+ * Slug: rainfall/sidebar
+ * Categories: columns
+ */
+?>
+<!-- wp:search {"label":"<?php esc_html_e( 'Search for a topic', 'rainfall' ); ?>","buttonText":"<?php esc_html_e( 'Search', 'rainfall' ); ?>"} /-->
+
+<!-- wp:heading {"level":6} -->
+<h6><?php esc_html_e( 'Submissions', 'rainfall' ); ?></h6>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><?php esc_html_e( 'Would you like to contribute as an editor or a writer to our blog? Let us know all the details about yourself and send us a message.', 'rainfall' ); ?></p>
+<!-- /wp:paragraph -->

+ 1 - 1
rainfall/patterns/testimonials.php

@@ -6,7 +6,7 @@
  */
 ?>
 
-<!-- wp:group {"align":"full","backgroundColor":"orange","layout":{"inherit":true}} -->
+<!-- wp:group {"align":"full","backgroundColor":"orange","layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull has-orange-background-color has-background"><!-- wp:group {"align":"wide"} -->
 <div class="wp-block-group alignwide"><!-- wp:heading {"fontSize":"xx-large"} -->
 <h2 class="has-xx-large-font-size"><?php echo esc_html__( 'The People\'s Voices', 'rainfall' ); ?></h2>

+ 25 - 100
rainfall/style.css

@@ -1,25 +1,30 @@
 /*
 Theme Name: Rainfall
-Theme URI: TBD
+Theme URI: https://wordpress.com/theme/rainfall
 Author: Automattic
 Author URI: https://automattic.com
-Description: TBD
-Requires at least: 5.8
-Tested up to: 5.9
+Description: Rainfall is a clean, objective blogging theme strongly inspired by Swiss Design. Its minimalist functionality is balanced by a strong accent color, beautiful photography and post templates with sidebars.
+Requires at least: 6.0
+Tested up to: 6.0
 Requires PHP: 5.7
 Version: 0.0.8
 License: GNU General Public License v2 or later
-License URI: https://raw.githubusercontent.com/Automattic/themes/trunk/LICENSE
-Template:
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: rainfall
-Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
+Tags: two-columns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, theme-options, threaded-comments, translation-ready, auto-loading-homepage, blog-homepage
 */
 
+/**
+ * Post title indent
+ */
 .wp-block-post-title:not(.editor-post-title) {
 	margin-left: 1ch;
 	text-indent: -1ch;
 }
 
+/**
+ * Comment form elements
+ */
 .wp-block-post-comments-form input:not([type=submit],[type=checkbox]),
 .wp-block-post-comments-form textarea,
 .wp-block-post-comments-form select {
@@ -29,87 +34,27 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 }
 
 /**
- * Styles for the search page input
+ * Navigation on dark background
  */
-.has-black-background-color .wp-block-search__input {
-	background-color: var(--wp--preset--color--black);
-	color: 1px solid var(--wp--preset--color--white);
+.wp-block-navigation .has-black-background-color a:where(:not(.wp-element-button)):hover {
+	color: var(--wp--preset--color--white);
 }
 
-/*
- * Font smoothing
- */
-
- body {
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
+.wp-block-navigation .has-black-background-color a:where(:not(.wp-element-button)):active {
+	color: var(--wp--preset--color--orange);
 }
 
-/*
- * Alignment styles, borrowed from Twenty Twenty-Two.
- * These rules are temporary, and should not be relied on or
- * modified too heavily by themes or plugins that build on
- * Twenty Twenty-Two. These are meant to be a precursor to
- * a global solution provided by the Block Editor.
- *
- * Relevant issues:
- * https://github.com/WordPress/gutenberg/issues/35607
- * https://github.com/WordPress/gutenberg/issues/35884
+/**
+ * Search input on dark background
  */
-
-.wp-site-blocks,
-body > .is-root-container,
-.edit-post-visual-editor__post-title-wrapper,
-.wp-block-group.alignfull,
-.wp-block-group.has-background,
-.wp-block-columns.alignfull.has-background,
-.wp-block-cover.alignfull,
-.is-root-container .wp-block[data-align='full'] > .wp-block-group,
-.is-root-container .wp-block[data-align='full'] > .wp-block-columns.has-background,
-.is-root-container .wp-block[data-align='full'] > .wp-block-cover {
-	padding-left: var(--wp--style--block-gap);
-	padding-right: var(--wp--style--block-gap);
-}
-
-.wp-site-blocks .alignfull,
-.wp-site-blocks > .wp-block-group.has-background,
-.wp-site-blocks > .wp-block-cover,
-.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
-.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
-body > .is-root-container > .wp-block-cover,
-body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
-body > .is-root-container > .wp-block-template-part > .wp-block-cover,
-.is-root-container .wp-block[data-align='full'] {
-	margin-left: calc(-1 * var(--wp--style--block-gap)) !important;
-	margin-right: calc(-1 * var(--wp--style--block-gap)) !important;
-	max-width: unset;
-	width: unset;
-}
-
-/* Blocks inside columns don't have negative margins. */
-.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
-.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
-/* We also want to avoid stacking negative margins. */
-.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
-.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
-	margin-left: auto !important;
-	margin-right: auto !important;
-	width: inherit;
+.has-black-background-color .wp-block-search__input {
+	background-color: var(--wp--preset--color--black);
+	border: 1px solid var(--wp--preset--color--white);
 }
 
 /*
-* Button hover styles.
-* Necessary until the following issue is resolved in Gutenberg:
-* https://github.com/WordPress/gutenberg/issues/38277
+* Button styles on dark background
 */
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-button__link:hover,
-.wp-block-file .wp-block-file__button:focus,
-.wp-block-button__link:focus {
-	background-color: var(--wp--preset--color--orange);
-	color: var(--wp--preset--color--black);
-}
-
 .has-black-background-color .wp-block-file .wp-block-file__button,
 .has-black-background-color .wp-block-button__link {
 	background-color: var(--wp--preset--color--white);
@@ -130,26 +75,6 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	color: var(--wp--preset--color--black);
 }
 
-.wp-block-search__button:hover,
-.wp-block-search__button:focus {
-	color: var(--wp--preset--color--orange);
-}
-
-/* Navigation Links: focus/active states */
-a:focus:not(.wp-block-button__link),
-.wp-block-post-date a:focus {
-	text-decoration-line: underline;
-	text-decoration-style: dotted;
-}
-
-.wp-block-post-title a:focus {
-	text-decoration-style: solid;
-}
-
-.wp-block-navigation__responsive-container.has-white-color.has-black-background-color a:active {
-	color: var(--wp--preset--color--orange);
-}
-
 /* Footer Navigation */
 footer .wp-block-navigation__container {
 	row-gap: 1rem;
@@ -174,6 +99,6 @@ footer .wp-block-navigation__container {
 	padding-top: 0;
 }
 
-.wp-block-navigation__responsive-container-open {
-	text-transform: uppercase;
+.wp-block-navigation__responsive-container.has-white-color.has-black-background-color.is-menu-open a:active {
+	color: var(--wp--preset--color--orange);
 }

+ 2 - 2
rainfall/templates/404.html

@@ -4,8 +4,8 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:group {"layout":{"inherit":true},"tagName":"main","style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
-<main class="wp-block-group" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px">
+<!-- wp:group {"layout":{"type":"constrained"},"tagName":"main","style":{"spacing":{"margin":{"top":"0px"}}}} -->
+<main class="wp-block-group" style="margin-top:0px">
     <!-- wp:pattern {"slug":"rainfall/hidden-404"} /-->
 </main>
 <!-- /wp:group -->

+ 3 - 3
rainfall/templates/index.html

@@ -1,7 +1,7 @@
 <!-- wp:group {"backgroundColor":"light-orange"} -->
 <div class="wp-block-group has-light-orange-background-color has-background"><!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"wide"} -->
 <div class="wp-block-group alignwide"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"55rem"} -->
@@ -14,8 +14,8 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"12px"} -->
-<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--20)"} -->
+<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer --></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->

+ 5 - 5
rainfall/templates/page-header-black.html

@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"black","textColor":"white"} -->
 <div class="wp-block-group has-white-color has-black-background-color has-text-color has-background has-link-color"><!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
 <div class="wp-block-group alignfull"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"55rem"} -->
@@ -14,17 +14,17 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"12px"} -->
-<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--20)"} -->
+<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer --></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
 <!-- wp:post-featured-image /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:columns {"style":{"spacing":{"blockGap":"9.36rem"}}} -->
-<div class="wp-block-columns"><!-- wp:column {"layout":{"inherit":false}} -->
+<div class="wp-block-columns"><!-- wp:column {"layout":{"type":"default"}} -->
 <div class="wp-block-column"><!-- wp:post-content {"lock":{"move":false,"remove":true}} /-->
 
 <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->

+ 5 - 5
rainfall/templates/page-no-sidebar.html

@@ -1,6 +1,6 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
 <div class="wp-block-group alignfull"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"55rem"} -->
@@ -13,16 +13,16 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"12px"} -->
-<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--20)"} -->
+<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer --></div>
 <!-- /wp:group -->
 
 <!-- wp:post-featured-image /-->
 
-<!-- wp:post-content {"layout":{"inherit":true},"lock":{"move":false,"remove":true}} /-->
+<!-- wp:post-content {"layout":{"type":"constrained"},"lock":{"move":false,"remove":true}} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
 
 <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->

+ 5 - 5
rainfall/templates/page.html

@@ -1,6 +1,6 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
 <div class="wp-block-group alignfull"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"55rem"} -->
@@ -13,16 +13,16 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"12px"} -->
-<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--20)"} -->
+<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer --></div>
 <!-- /wp:group -->
 
 <!-- wp:post-featured-image /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:columns {"style":{"spacing":{"blockGap":"9.36rem"}}} -->
-<div class="wp-block-columns"><!-- wp:column {"layout":{"inherit":false}} -->
+<div class="wp-block-columns"><!-- wp:column {"layout":{"type":"default"}} -->
 <div class="wp-block-column"><!-- wp:post-content {"lock":{"move":false,"remove":true}} /-->
 
 <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->

+ 3 - 3
rainfall/templates/search.html

@@ -1,13 +1,13 @@
 <!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"black","textColor":"white"} -->
 <div class="wp-block-group has-white-color has-black-background-color has-text-color has-background has-link-color"><!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"wide"} -->
 <div class="wp-block-group alignwide"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","backgroundColor":"white","textColor":"black","border":{"width":"1px"},"borderColor":"white"} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"12px"} -->
-<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--20)"} -->
+<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer --></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->

+ 15 - 14
rainfall/templates/single.html

@@ -1,6 +1,6 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:group {"align":"full"} -->
 <div class="wp-block-group alignfull"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"80%"} -->
@@ -15,21 +15,22 @@
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"10px"} -->
-<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--10)"} -->
+<div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
+
 <!-- wp:post-featured-image {"align":"wide","height":"30rem"} /-->
-<!-- wp:spacer {"height":"10px"} -->
-<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--10)"} -->
+<div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:columns {"style":{"spacing":{"blockGap":"9.36rem"}}} -->
-<div class="wp-block-columns"><!-- wp:column {"layout":{"inherit":false}} -->
+<div class="wp-block-columns"><!-- wp:column {"layout":{"type":"default"}} -->
 <div class="wp-block-column"><!-- wp:post-content {"lock":{"move":false,"remove":true}} /-->
 
-<!-- wp:spacer {"height":"10px"} -->
-<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--10)"} -->
+<div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
@@ -38,8 +39,8 @@
 <!-- wp:post-navigation-link {"showTitle":true,"linkLabel":true} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"10px"} -->
-<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--10)"} -->
+<div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 </div><!-- /wp:column -->
@@ -54,10 +55,10 @@
 <p></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"black","textColor":"white","layout":{"inherit":true}} -->
+<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"black","textColor":"white","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-white-color has-black-background-color has-text-color has-background has-link-color">
-<!-- wp:spacer {"height":"10px"} -->
-<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--10)"} -->
+<div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:columns -->

+ 109 - 41
rainfall/theme.json

@@ -71,6 +71,18 @@
 				"mediumStep": 1.5,
 				"unit": "rem"
 			},
+			"spacingSizes": [
+				{
+					"size": "3.125rem",
+					"slug": "100",
+					"name": "100"
+				},
+				{
+					"size": "3.75rem",
+					"slug": "110",
+					"name": "110"
+				}
+			],
 			"units": [
 				"%",
 				"px",
@@ -91,58 +103,56 @@
 			],
 			"fontSizes": [
 				{
+					"fluid": {
+						"max": "1.125rem",
+						"min": "0.8rem"
+					},
 					"name": "Small",
-					"size": "var(--wp--preset--spacing--30)",
+					"size": "1rem",
 					"slug": "small"
 				},
 				{
+					"fluid": {
+						"max": "1.5rem",
+						"min": "1rem"
+					},
 					"name": "Medium",
-					"size": "var(--wp--preset--spacing--50)",
+					"size": "1.375rem",
 					"slug": "medium"
 				},
 				{
+					"fluid": {
+						"max": "1.875rem",
+						"min": "1.5rem"
+					},
 					"name": "Large",
-					"size": "var(--wp--preset--spacing--60)",
+					"size": "1.625rem",
 					"slug": "large"
 				},
 				{
+					"fluid": {
+						"max": "2.625rem",
+						"min": "1.75rem"
+					},
 					"name": "Extra large",
-					"size": "var(--wp--preset--spacing--70)",
+					"size": "2rem",
 					"slug": "x-large"
 				},
 				{
-					"name": "Ginormous",
+					"fluid": {
+						"max": "4rem",
+						"min": "7rem"
+					},
+					"name": "Extra Extra Large",
 					"size": "6.5rem",
 					"slug": "xx-large"
 				}
 			]
-		}
+		},
+		"useRootPaddingAwareAlignments": true
 	},
 	"styles": {
 		"blocks": {
-			"core/navigation": {
-				"elements": {
-					"link": {
-						":hover": {
-							"typography": {
-								"textDecoration": "underline"
-							}
-						},
-						":active": {
-							"color": {
-								"text": "var(--wp--preset--color--brown)"
-							},
-							"typography": {
-								"textDecoration": "underline"
-							}
-						}
-					}
-				},
-				"typography": {
-					"fontSize": "16px",
-					"textTransform": "uppercase"
-				}
-			},
 			"core/comment-author-name": {
 				"elements": {
 					"link": {
@@ -166,6 +176,37 @@
 					"textTransform": "uppercase"
 				}
 			},
+			"core/navigation": {
+				"elements": {
+					"link": {
+						":hover": {
+							"color": {
+								"text": "var(--wp--preset--color--black)"
+							},
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":active": {
+							"color": {
+								"text": "var(--wp--preset--color--brown)"
+							},
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":focus": {
+							"typography": {
+								"textDecoration": "underline dotted"
+							}
+						}
+					}
+				},
+				"typography": {
+					"fontSize": "var(--wp--preset--font--size--small)",
+					"textTransform": "uppercase"
+				}
+			},
 			"core/post-comments-form": {
 				"elements": {
 					"button": {
@@ -245,7 +286,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "31px"
+						"left": "var(--wp--preset--spacing--60)"
 					}
 				},
 				"typography": {
@@ -263,8 +304,20 @@
 								"left": "0px"
 							},
 							"padding": {
-								"bottom": "10px",
-								"top": "10px"
+								"bottom": "var(--wp--preset--spacing--10)",
+								"top": "var(--wp--preset--spacing--10)"
+							}
+						},
+						":hover": {
+							"color": {
+								"background": "var(--wp--preset--color--black)",
+								"text": "var(--wp--preset--color--orange)"
+							}
+						},
+						":focus": {
+							"color": {
+								"background": "var(--wp--preset--color--black)",
+								"text": "var(--wp--preset--color--orange)"
 							}
 						}
 					}
@@ -312,16 +365,23 @@
 				},
 				"spacing": {
 					"padding": {
-						"bottom": "19px",
-						"left": "25px",
-						"right": "25px",
-						"top": "19px"
+						"bottom": "var(--wp--preset--spacing--40)",
+						"left": "var(--wp--preset--spacing--50)",
+						"right": "var(--wp--preset--spacing--50)",
+						"top": "var(--wp--preset--spacing--40)"
 					}
 				},
 				"typography": {
 					"fontWeight": "700",
 					"lineHeight": "1.2",
+					"textDecoration": "none",
 					"textTransform": "uppercase"
+				},
+				":hover": {
+					"color": {
+						"background": "var(--wp--preset--color--orange)",
+						"text": "var(--wp--preset--color--black)"
+					}
 				}
 			},
 			"h1": {
@@ -341,33 +401,30 @@
 			"h3": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--x-large)",
-					"fontWeight": "700",
 					"lineHeight": "1.2"
 				}
 			},
 			"h4": {
 				"typography": {
 					"fontSize": "var(--wp--preset--spacing--60)",
-					"fontWeight": "700",
 					"lineHeight": "1.1"
 				}
 			},
 			"h5": {
 				"typography": {
 					"fontSize": "var(--wp--preset--spacing--50)",
-					"fontWeight": "700",
 					"lineHeight": "1.2"
 				}
 			},
 			"h6": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)",
-					"fontWeight": "700",
 					"lineHeight": "1.3"
 				}
 			},
 			"heading": {
 				"typography": {
+					"fontWeight": "700",
 					"textTransform": "uppercase"
 				}
 			},
@@ -380,6 +437,11 @@
 						"textDecoration": "none"
 					}
 				},
+				":focus": {
+					"typography": {
+						"textDecoration": "underline dotted"
+					}
+				},
 				":hover": {
 					"color": {
 						"text": "var(--wp--preset--color--dark-grey)"
@@ -399,7 +461,13 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--preset--spacing--90)"
+			"blockGap": "var(--wp--preset--spacing--90)",
+			"padding": {
+				"top": "0px",
+				"right": "var(--wp--preset--spacing--90)",
+				"bottom": "0px",
+				"left": "var(--wp--preset--spacing--90)"
+			}
 		},
 		"typography": {
 			"fontFamily": "var(--wp--preset--font-family--helvetica-neue)",