Pendant: add 404 template (#5786)

* Pendant: add 404 template
* Made 404 heading H1 and moved H1 sizes from page to configuration
* Tweaks to search block style overrides
Co-authored-by: Jason Crist <jcrist@pbking.com>
This commit is contained in:
Madhu Dollu 2022-03-31 20:53:25 +05:30 committed by GitHub
parent 7aaeda4aaf
commit 9b41eedf5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 16 deletions

View file

@ -7,10 +7,24 @@
?>
<!-- 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.', 'pendant' ); ?></h1>
<!-- wp:heading {"textAlign":"left","level":1,"align":"wide"} -->
<h1 class="alignwide has-text-align-left" id="oops-that-page-can-t-be-found"><?php echo esc_html__( 'There\'s nothing here.', 'pendant' ); ?></h1>
<!-- /wp:heading -->
<!-- wp:spacer {"height":"0.8em"} -->
<div style="height:0.8em" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide">
<!-- wp:paragraph -->
<p><?php echo esc_html__( 'It looks like nothing was found at this location. Maybe try a search?', 'pendant' ); ?></p>
<p class="has-text-align-left has-medium-font-size">
<?php echo esc_html__( 'This page could not be found. Try searching posts using the search field.', 'pendant' ); ?>
</p>
<!-- /wp:paragraph -->
<!-- wp:search {"showLabel":false,"placeholder":"<?php echo esc_html__( 'Search…', 'pendant' ); ?>","width":500,"widthUnit":"px","buttonText":"<?php echo esc_html__( 'Search', 'pendant' ); ?>","buttonPosition":"button-inside"} /-->
</div>
<!-- /wp:group -->

View file

@ -72,7 +72,7 @@ a:focus {
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--foreground);
border: 2px solid var(--wp--preset--color--foreground);
padding: 0.667em 1.333em;
padding: 0.667em 1.333em !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
@ -87,15 +87,25 @@ a:focus {
* https://github.com/WordPress/gutenberg/issues/36444
* https://github.com/WordPress/gutenberg/issues/27760
*/
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
padding: 0;
border-color: var(--wp--preset--color--foreground);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
padding-left: 1em;
}
.wp-block-search__button,
.wp-block-file .wp-block-file__button {
background-color: var(--wp--preset--color--foreground);
border-radius: 0;
border: none;
color: var(--wp--preset--color--background);
font-size: var(--wp--preset--typography--font-size--normal);
padding: calc(0.667em + 2px) calc(1.333em + 2px);
font-size: var(--wp--preset--typography--font-size--medium);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
line-height: 1.7;
border:none;
padding: calc(0.667em + 2px) calc(1.333em + 2px) !important;
}
/*
@ -157,3 +167,7 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
margin-right: auto !important;
width: inherit;
}
.custom-404-wp-search {
max-width: 500px;
}

View file

@ -1,12 +1,10 @@
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
<main class="wp-block-group">
<!-- wp:pattern {"slug":"pendant/404"} /-->
<!-- wp:search {"label":""} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"72px","bottom":"128px"}}},"layout":{"inherit":true}} -->
<main class="wp-block-group" style="padding-top:72px;padding-bottom:128px">
<!-- wp:pattern {"slug":"pendant/404"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->

View file

@ -182,7 +182,7 @@
},
"layout": {
"contentSize": "820px",
"wideSize": "1000px"
"wideSize": "1240px"
},
"border": {
"color": true,
@ -250,7 +250,7 @@
"typography": {
"fontFamily": "var(--wp--preset--font-family--heading-font)",
"fontWeight": 400,
"fontSize": "clamp(3.75rem, 8vw, 6.25rem)"
"fontSize": "clamp(4rem, 10vw, 8rem)"
}
},
"h2": {