Style Seedlet mobile navigation (#3911)

* Style Seedlet mobile navigation

* Seedlet Blocks: Add navigation font-family variable

Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>

seedlet-blocks/assets/theme.css

@@ -162,6 +162,19 @@
 	color: var(--wp--style--color--link);
 }
 
+.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-link {
+	font-family: var(--wp--preset--font-family--headings);
+	font-size: 32px;
+	font-weight: 400;
+	line-height: 60px;
+}
+
+.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link {
+	font-style: italic;
+	font-size: 24px;
+	line-height: 30px;
+}
+
 .wp-block-post-comments .reply a {
 	border-radius: var(--wp--custom--button--border--radius);
 	font-size: var(--wp--preset--font-size--small);

seedlet-blocks/sass/blocks/_navigation.scss

@@ -0,0 +1,19 @@
+.wp-block-navigation__responsive-container {
+	&.has-modal-open {
+		.wp-block-navigation-link {
+			//NOTE: For reasons I cannot explain... if I set this to use the --wp--preset--font-family--headings
+			//these values (which are what are set) are not respected in the modal.
+			font-family: var(--wp--preset--font-family--headings);
+			font-size: 32px;
+			font-weight: 400;
+			line-height: 60px;
+			&.has-child {
+				.wp-block-navigation-link{
+					font-style: italic;
+					font-size: 24px;
+					line-height: 30px;
+				}
+			}
+		}
+	}
+}

seedlet-blocks/sass/theme.scss

@@ -1,5 +1,6 @@
 @import 'blocks/latest-posts';
 @import 'blocks/links';
+@import 'blocks/navigation';
 @import 'blocks/post-comments';
 @import 'blocks/pullquote';
 @import 'blocks/site-title';