Club: update 404 template design (#6282)

* update 404 template design

* add support for small devices

* Club: 404 pattern: adding spacers

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>

club/patterns/404.php

@@ -7,10 +7,22 @@
 
 ?>
 
-<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"medium"} -->
-<h1 class="has-text-align-center has-medium-font-size" id="oops-that-page-can-t-be-found"><?php echo esc_html__( 'Oops! That page can&rsquo;t be found.', 'club' ); ?></h1>
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group"><!-- wp:spacer {"height":"4rem"} -->
+<div style="height:4rem" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading {"textAlign":"left","level":1,"style":{"typography":{"textTransform":"uppercase"}}} -->
+<h1 class="has-text-align-left" id="oops-that-page-can-t-be-found" style="text-transform:uppercase"><?php echo esc_html__( 'Uh Oh :((((((((((', 'club' ); ?></h1>
 <!-- /wp:heading -->
 
-<!-- wp:paragraph -->
-<p><?php echo  esc_html__( 'It looks like nothing was found at this location. Maybe try a search?', 'club' ); ?></p>
+<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size"><?php echo esc_html__( 'This page could not be found. Try searching posts using the search field.', 'club' ); ?></p>
 <!-- /wp:paragraph -->
+
+<!-- wp:search {"label":"","showLabel":false,"placeholder":"<?php echo esc_html__( 'Search...', 'club' ); ?>","buttonText":"<?php echo esc_html__( 'WHAT R U WAITING FOR?', 'club' ); ?>"} /-->
+
+<!-- wp:spacer {"height":"4rem"} -->
+<div style="height:4rem" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></main>
+<!-- /wp:group -->

club/style.css

@@ -178,3 +178,24 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	padding-right: var(--wp--custom--gap--horizontal);
 	padding-left: var(--wp--custom--gap--horizontal);
 }
+
+/*
+ * style seach input
+ */
+.wp-block-search__input {
+	border-radius: 999px;
+	padding: .5rem 2rem;
+	background-color: transparent;
+	border-color: var(--wp--preset--color--primary);
+	border-width: 1.5px;
+}
+@media screen and (max-width: 768px) {
+	.wp-block-search__inside-wrapper {
+		flex-wrap: wrap
+	}
+	.wp-block-search__button {
+		flex-grow: 1;
+		margin-left: 0;
+		margin-top: .625rem;
+	}
+}

club/templates/404.html

@@ -1,12 +1,5 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
-<main class="wp-block-group">
-
-	<!-- wp:pattern {"slug":"club/404"} /-->
-	<!-- wp:search {"label":""} /-->
-
-</main>
-<!-- /wp:group -->
+<!-- wp:pattern {"slug":"club/404"} /-->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->