Fix spacing & responsive behavior in homepage hero section

See #130
WordPress · Sep 13, 2023 · a5755b5 · a5755b5
1 parent f8f6714
commit a5755b5
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_nav-front.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_nav-front.php
@@ -9,9 +9,7 @@
 
 ?>
 <!-- wp:wporg/local-navigation-bar {"backgroundColor":"charcoal-1","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","top":"16px","bottom":"16px"}},"position":{"type":"sticky"},"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}},"border":{"top":{"color":"#ffffff0a","style":"solid","width":"1px"},"right":{},"bottom":{},"left":{}}},"textColor":"white","fontSize":"small"} -->
-<!-- wp:spacer {"height":"0"} -->
-<div style="height:0" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
+<!-- wp:site-title {"level":1,"fontSize":"small","fontFamily":"inter"} /-->
 
-<!-- wp:navigation {"menuSlug":"showcase","textColor":"white","hasIcon":false,"layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
+<!-- wp:navigation {"menuSlug":"showcase","textColor":"white","backgroundColor":"charcoal-1","hasIcon":false,"layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
 <!-- /wp:wporg/local-navigation-bar -->
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_nav.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_nav.php
@@ -11,5 +11,5 @@
 <!-- wp:wporg/local-navigation-bar {"backgroundColor":"charcoal-2","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","top":"16px","bottom":"16px"}},"position":{"type":"sticky"},"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}},"border":{"top":{"color":"var:preset|color|charcoal-3","style":"solid","width":"1px"},"right":{},"bottom":{},"left":{}}},"textColor":"white","fontSize":"small"} -->
 <!-- wp:site-title {"level":0,"fontSize":"small"} /-->
 
-<!-- wp:navigation {"menuSlug":"showcase","textColor":"white","hasIcon":false,"layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
+<!-- wp:navigation {"menuSlug":"showcase","textColor":"white","backgroundColor":"charcoal-2","hasIcon":false,"layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
 <!-- /wp:wporg/local-navigation-bar -->
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php
@@ -21,8 +21,8 @@
 					<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
 					<!-- /wp:spacer -->
 
-					<!-- wp:heading {"fontSize":"heading-2"} -->
-					<h1 class="wp-block-heading has-heading-2-font-size"><?php esc_html_e( 'Showcase', 'wporg' ); ?></h1>
+					<!-- wp:heading {"fontSize":"heading-2",style":{"spacing":{"margin":{"top":"0"}}}} -->
+					<h1 class="wp-block-heading has-heading-2-font-size" style="margin-top:0"><?php esc_html_e( 'Showcase', 'wporg' ); ?></h1>
 					<!-- /wp:heading -->
 
 					<!-- wp:paragraph {style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}}}} -->

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
@@ -19,6 +19,15 @@ a:where(:not(.wp-element-button)):focus-visible {
 		background-size: clamp(50px, 4vw, 100px);
 	}
 
+	.wp-block-column + .wp-block-column {
+		align-self: stretch;
+		display: flex;
+	}
+
+	.wp-block-cover {
+		align-self: stretch;
+	}
+
 	/* Switch down to one column when image gets squished. */
 	@media (max-width: 1179px) {
 		.wp-block-columns {
@@ -32,6 +41,24 @@ a:where(:not(.wp-element-button)):focus-visible {
 			min-height: 0 !important;
 		}
 	}
+
+	/* Hide the site title on small screens, title appears in local nav. */
+	@media (max-width: 599px) {
+		h1 {
+			display: none;
+
+			+ p {
+				margin-top: 0 !important;
+			}
+		}
+	}
+}
+
+/* Hide the site title on small screens, title appears in local nav. */
+@media (min-width: 600px) {
+	body.home .wp-block-site-title a {
+		display: none;
+	}
 }
 
 /* Style the site grid. */