Merge branch 'master' into seedlet-blocks/try-global-styles

seedlet-blocks/block-template-parts/header.html

@@ -2,7 +2,7 @@
 <div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://cldup.com/B9dfntUFJE.png" alt="" width="128" height="128"/></figure></div>
 <!-- /wp:image -->
 
-<!-- wp:site-title /-->
+<!-- wp:site-title {"align":"center"} /-->
 
 <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
 <p class="has-text-align-center has-small-font-size">is a curious botanist</p>

seedlet-blocks/style.css

@@ -48,11 +48,6 @@ GNU General Public License for more details.
 	--global--color-tertiary: var(--wp--preset--color--tertiary);
 }
 
-/* Center the site title. */
-.site-header h1 {
-	text-align: center;
-}
-
 /* Set up alignments */
 .wp-block-group .wp-block-group__inner-container > * {
 	max-width: var(--responsive--aligndefault-width);

seedlet/assets/css/style-editor.css

@@ -113,10 +113,14 @@ a {
 	text-decoration: none;
 }
 
-a:hover {
+a:hover, a:focus {
 	color: var(--global--color-primary-hover);
 }
 
+a:active {
+	color: var(--global--color-primary);
+}
+
 button,
 a {
 	cursor: pointer;

seedlet/assets/sass/base/_editor.scss

@@ -22,9 +22,14 @@ a {
 	color: var(--global--color-primary);
 	text-decoration: none;
 
-	&:hover {
+	&:hover,
+	&:focus {
 		color: var(--global--color-primary-hover);
 	}
+
+	&:active {
+		color: var(--global--color-primary);
+	}
 }
 
 button,

seedlet/assets/sass/base/_reset.scss

@@ -83,10 +83,22 @@ a {
 	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--global--color-primary);
 	text-decoration: none;
-
-	&:hover {
+	
+	&:hover,
+	&:focus {
 		color: var(--global--color-primary-hover);
 	}
+
+	&:active {
+		color: var(--global--color-primary);
+	}
+}
+
+// Focus styles
+*:focus {
+	outline-width: 1px;
+	outline-style: dotted;
+	outline-color: var(--global--color-secondary);
 }
 
 button,

seedlet/assets/sass/blocks/blog-posts/_style.scss

@@ -88,7 +88,8 @@
 					color: currentColor;
 				}
 
-				&:hover {
+				&:hover,
+				&:focus {
 					color: var(--global--color-primary-hover);
 					text-decoration: underline;
 
@@ -98,6 +99,10 @@
 						color: currentColor;
 					}
 				}
+
+				&:active {
+					color: var(--global--color-primary);
+				}
 			}
 		}
 

seedlet/assets/sass/components/comments/_comments.scss

@@ -87,7 +87,7 @@
 
 	.comment-author {
 		line-height: var(--global--line-height-heading);
-		margin-bottom: calc(0.25 * var(--global--spacing-unit);
+		margin-bottom: calc(0.25 * var(--global--spacing-unit));
 		padding-right: calc(2.5 * var(--global--spacing-horizontal));
 		max-width: calc(100% - (3 * var(--global--spacing-horizontal)));
 
@@ -124,9 +124,13 @@
 			color: currentColor;
 
 			&:hover,
-			&:active {
+			&:focus {
 				color: var(--global--color-primary-hover);
 			}
+
+			&:active {
+				color: currentColor;
+			}
 		}
 
 		.edit-link {

seedlet/assets/sass/components/entry/_header.scss

@@ -14,8 +14,12 @@
 		color: var(--entry-header--color-link);
 
 		&:hover,
-		&:active {
+		&:focus {
 			color: var(--entry-header--color-hover);
 		}
+
+		&:active {
+			color: var(--entry-header--color-link);
+		}
 	}
 }

seedlet/assets/sass/components/entry/_meta.scss

@@ -31,9 +31,13 @@
 		color: var(--entry-meta--color-link);
 
 		&:hover,
-		&:active {
+		&:focus {
 			color: var(--entry-meta--color-hover);
 		}
+
+		&:active {
+			color: var(--entry-meta--color-link);
+		}
 	}
 
 	.svg-icon {

seedlet/assets/sass/components/footer/_footer-branding.scss

@@ -33,11 +33,13 @@
 		color: currentColor;
 
 		&:link,
-		&:visited {
+		&:visited,
+		&:active {
 			color: currentColor;
 		}
 
-		&:hover {
+		&:hover,
+		&:focus {
 			color: var(--footer--color-link);
 		}
 	}

seedlet/assets/sass/components/footer/_footer-navigation.scss

@@ -45,11 +45,13 @@
 			color: currentColor;
 
 			&:link,
-			&:visited {
+			&:visited,
+			&:active {
 				color: currentColor;
 			}
 
-			&:hover {
+			&:hover,
+			&:focus {
 				color: var(--footer--color-link-hover);
 			}
 		}

seedlet/assets/sass/components/header/_header-branding.scss

@@ -37,11 +37,13 @@
 			5px 0px var(--global--color-background);
 
 		&:link,
-		&:visited {
+		&:visited,
+		&:active {
 			color: currentColor;
 		}
 
-		&:hover {
+		&:hover,
+		&:focus {
 			color: var(--branding--color-link-hover);
 		}
 

seedlet/assets/sass/components/header/_primary-navigation.scss

@@ -229,9 +229,14 @@
 	.menu-item > a {
 		color: var(--primary-nav--color-link);
 
-		&:hover {
+		&:hover,
+		&:focus {
 			color: var(--primary-nav--color-link-hover);
 		}
+
+		&:active {
+			color: var(--primary-nav--color-link);
+		}
 	}
 
 	// Menu Item

seedlet/assets/sass/components/header/_social-navigation.scss

@@ -27,9 +27,14 @@
 		display: inline-block;
 		padding: 0 var(--social-nav--padding);
 
-		&:hover {
+		&:hover,
+		&:focus {
 			color: var(--social-nav--color-link-hover);
 		}
+
+		&:active {
+			color: var(--social-nav--color-link);
+		}
 	}
 
 	svg {

seedlet/assets/sass/components/pagination/_style.scss

@@ -10,9 +10,14 @@
 	a {
 		color: var(--global--color-primary);
 
-		&:hover {
+		&:hover,
+		&:focus {
 			color: var(--global--color-primary-hover);
 		}
+
+		&:active {
+			color: var(--global--color-primary);
+		}
 	}
 
 	.nav-links {

seedlet/style-rtl.css

@@ -758,10 +758,20 @@ a {
 	text-decoration: none;
 }
 
-a:hover {
+a:hover, a:focus {
 	color: var(--global--color-primary-hover);
 }
 
+a:active {
+	color: var(--global--color-primary);
+}
+
+*:focus {
+	outline-width: 1px;
+	outline-style: dotted;
+	outline-color: var(--global--color-secondary);
+}
+
 button,
 a {
 	cursor: pointer;
@@ -1105,17 +1115,23 @@ object {
 	color: currentColor;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus {
 	color: var(--global--color-primary-hover);
 	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
 [class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
-[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus {
 	color: currentColor;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active {
+	color: var(--global--color-primary);
+}
+
 @media only screen and (min-width: 482px) {
 	.wp-block-newspack-blocks-homepage-articles article .more-link {
 		margin-top: var(--global--spacing-unit);
@@ -2749,11 +2765,11 @@ table th,
 	text-shadow: -1px 0px var(--global--color-background), 1px 0px var(--global--color-background), 2px 0px var(--global--color-background), -2px 0px var(--global--color-background), 3px 0px var(--global--color-background), -3px 0px var(--global--color-background), 4px 0px var(--global--color-background), -4px 0px var(--global--color-background), 5px 0px var(--global--color-background), -5px 0px var(--global--color-background);
 }
 
-.site-title a:link, .site-title a:visited {
+.site-title a:link, .site-title a:visited, .site-title a:active {
 	color: currentColor;
 }
 
-.site-title a:hover {
+.site-title a:hover, .site-title a:focus {
 	color: var(--branding--color-link-hover);
 }
 
@@ -3074,11 +3090,17 @@ nav a {
 	color: var(--primary-nav--color-link);
 }
 
-.primary-navigation .menu-item > a:hover,
-.woo-navigation .menu-item > a:hover {
+.primary-navigation .menu-item > a:hover, .primary-navigation .menu-item > a:focus,
+.woo-navigation .menu-item > a:hover,
+.woo-navigation .menu-item > a:focus {
 	color: var(--primary-nav--color-link-hover);
 }
 
+.primary-navigation .menu-item > a:active,
+.woo-navigation .menu-item > a:active {
+	color: var(--primary-nav--color-link);
+}
+
 .primary-navigation a,
 .woo-navigation a {
 	color: currentColor;
@@ -3197,10 +3219,14 @@ nav a {
 	padding: 0 var(--social-nav--padding);
 }
 
-.social-navigation a:hover {
+.social-navigation a:hover, .social-navigation a:focus {
 	color: var(--social-nav--color-link-hover);
 }
 
+.social-navigation a:active {
+	color: var(--social-nav--color-link);
+}
+
 .social-navigation svg {
 	fill: currentColor;
 	vertical-align: middle;
@@ -3240,11 +3266,11 @@ nav a {
 	color: currentColor;
 }
 
-.site-footer > .site-info a:link, .site-footer > .site-info a:visited {
+.site-footer > .site-info a:link, .site-footer > .site-info a:visited, .site-footer > .site-info a:active {
 	color: currentColor;
 }
 
-.site-footer > .site-info a:hover {
+.site-footer > .site-info a:hover, .site-footer > .site-info a:focus {
 	color: var(--footer--color-link);
 }
 
@@ -3298,11 +3324,11 @@ nav a {
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:link, .site-footer > .footer-navigation .footer-menu a:visited {
+.site-footer > .footer-navigation .footer-menu a:link, .site-footer > .footer-navigation .footer-menu a:visited, .site-footer > .footer-navigation .footer-menu a:active {
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:hover {
+.site-footer > .footer-navigation .footer-menu a:hover, .site-footer > .footer-navigation .footer-menu a:focus {
 	color: var(--footer--color-link-hover);
 }
 
@@ -3321,10 +3347,14 @@ nav a {
 	color: var(--entry-header--color-link);
 }
 
-.entry-title a:hover, .entry-title a:active {
+.entry-title a:hover, .entry-title a:focus {
 	color: var(--entry-header--color-hover);
 }
 
+.entry-title a:active {
+	color: var(--entry-header--color-link);
+}
+
 /**
  * Entry Content
  */
@@ -3413,12 +3443,17 @@ nav a {
 	color: var(--entry-meta--color-link);
 }
 
-.entry-meta a:hover, .entry-meta a:active,
+.entry-meta a:hover, .entry-meta a:focus,
 .entry-footer a:hover,
-.entry-footer a:active {
+.entry-footer a:focus {
 	color: var(--entry-meta--color-hover);
 }
 
+.entry-meta a:active,
+.entry-footer a:active {
+	color: var(--entry-meta--color-link);
+}
+
 .entry-meta .svg-icon,
 .entry-footer .svg-icon {
 	fill: currentColor;
@@ -3476,10 +3511,14 @@ nav a {
 	color: var(--global--color-primary);
 }
 
-.navigation a:hover {
+.navigation a:hover, .navigation a:focus {
 	color: var(--global--color-primary-hover);
 }
 
+.navigation a:active {
+	color: var(--global--color-primary);
+}
+
 @media only screen and (min-width: 482px) {
 	.navigation .nav-links {
 		display: flex;
@@ -3690,10 +3729,14 @@ nav a {
 	color: currentColor;
 }
 
-.comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
+.comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:focus {
 	color: var(--global--color-primary-hover);
 }
 
+.comment-meta .comment-metadata a:active {
+	color: currentColor;
+}
+
 .comment-meta .comment-metadata .edit-link {
 	float: left;
 }

seedlet/style.css

@@ -766,10 +766,20 @@ a {
 	text-decoration: none;
 }
 
-a:hover {
+a:hover, a:focus {
 	color: var(--global--color-primary-hover);
 }
 
+a:active {
+	color: var(--global--color-primary);
+}
+
+*:focus {
+	outline-width: 1px;
+	outline-style: dotted;
+	outline-color: var(--global--color-secondary);
+}
+
 button,
 a {
 	cursor: pointer;
@@ -1113,17 +1123,23 @@ object {
 	color: currentColor;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus {
 	color: var(--global--color-primary-hover);
 	text-decoration: underline;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
 [class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
-[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus {
 	color: currentColor;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active {
+	color: var(--global--color-primary);
+}
+
 @media only screen and (min-width: 482px) {
 	.wp-block-newspack-blocks-homepage-articles article .more-link {
 		margin-top: var(--global--spacing-unit);
@@ -2774,11 +2790,11 @@ table th,
 	text-shadow: 1px 0px var(--global--color-background), -1px 0px var(--global--color-background), -2px 0px var(--global--color-background), 2px 0px var(--global--color-background), -3px 0px var(--global--color-background), 3px 0px var(--global--color-background), -4px 0px var(--global--color-background), 4px 0px var(--global--color-background), -5px 0px var(--global--color-background), 5px 0px var(--global--color-background);
 }
 
-.site-title a:link, .site-title a:visited {
+.site-title a:link, .site-title a:visited, .site-title a:active {
 	color: currentColor;
 }
 
-.site-title a:hover {
+.site-title a:hover, .site-title a:focus {
 	color: var(--branding--color-link-hover);
 }
 
@@ -3099,11 +3115,17 @@ nav a {
 	color: var(--primary-nav--color-link);
 }
 
-.primary-navigation .menu-item > a:hover,
-.woo-navigation .menu-item > a:hover {
+.primary-navigation .menu-item > a:hover, .primary-navigation .menu-item > a:focus,
+.woo-navigation .menu-item > a:hover,
+.woo-navigation .menu-item > a:focus {
 	color: var(--primary-nav--color-link-hover);
 }
 
+.primary-navigation .menu-item > a:active,
+.woo-navigation .menu-item > a:active {
+	color: var(--primary-nav--color-link);
+}
+
 .primary-navigation a,
 .woo-navigation a {
 	color: currentColor;
@@ -3222,10 +3244,14 @@ nav a {
 	padding: 0 var(--social-nav--padding);
 }
 
-.social-navigation a:hover {
+.social-navigation a:hover, .social-navigation a:focus {
 	color: var(--social-nav--color-link-hover);
 }
 
+.social-navigation a:active {
+	color: var(--social-nav--color-link);
+}
+
 .social-navigation svg {
 	fill: currentColor;
 	vertical-align: middle;
@@ -3265,11 +3291,11 @@ nav a {
 	color: currentColor;
 }
 
-.site-footer > .site-info a:link, .site-footer > .site-info a:visited {
+.site-footer > .site-info a:link, .site-footer > .site-info a:visited, .site-footer > .site-info a:active {
 	color: currentColor;
 }
 
-.site-footer > .site-info a:hover {
+.site-footer > .site-info a:hover, .site-footer > .site-info a:focus {
 	color: var(--footer--color-link);
 }
 
@@ -3323,11 +3349,11 @@ nav a {
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:link, .site-footer > .footer-navigation .footer-menu a:visited {
+.site-footer > .footer-navigation .footer-menu a:link, .site-footer > .footer-navigation .footer-menu a:visited, .site-footer > .footer-navigation .footer-menu a:active {
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:hover {
+.site-footer > .footer-navigation .footer-menu a:hover, .site-footer > .footer-navigation .footer-menu a:focus {
 	color: var(--footer--color-link-hover);
 }
 
@@ -3346,10 +3372,14 @@ nav a {
 	color: var(--entry-header--color-link);
 }
 
-.entry-title a:hover, .entry-title a:active {
+.entry-title a:hover, .entry-title a:focus {
 	color: var(--entry-header--color-hover);
 }
 
+.entry-title a:active {
+	color: var(--entry-header--color-link);
+}
+
 /**
  * Entry Content
  */
@@ -3438,12 +3468,17 @@ nav a {
 	color: var(--entry-meta--color-link);
 }
 
-.entry-meta a:hover, .entry-meta a:active,
+.entry-meta a:hover, .entry-meta a:focus,
 .entry-footer a:hover,
-.entry-footer a:active {
+.entry-footer a:focus {
 	color: var(--entry-meta--color-hover);
 }
 
+.entry-meta a:active,
+.entry-footer a:active {
+	color: var(--entry-meta--color-link);
+}
+
 .entry-meta .svg-icon,
 .entry-footer .svg-icon {
 	fill: currentColor;
@@ -3501,10 +3536,14 @@ nav a {
 	color: var(--global--color-primary);
 }
 
-.navigation a:hover {
+.navigation a:hover, .navigation a:focus {
 	color: var(--global--color-primary-hover);
 }
 
+.navigation a:active {
+	color: var(--global--color-primary);
+}
+
 @media only screen and (min-width: 482px) {
 	.navigation .nav-links {
 		display: flex;
@@ -3715,10 +3754,14 @@ nav a {
 	color: currentColor;
 }
 
-.comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
+.comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:focus {
 	color: var(--global--color-primary-hover);
 }
 
+.comment-meta .comment-metadata a:active {
+	color: currentColor;
+}
+
 .comment-meta .comment-metadata .edit-link {
 	float: right;
 }