-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
404: Add styling to match mockup (#314)
- Loading branch information
Showing
2 changed files
with
99 additions
and
35 deletions.
There are no files selected for viewing
29 changes: 15 additions & 14 deletions
29
source/wp-content/themes/wporg-news-2021/block-templates/404.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,25 @@ | ||
| <!-- wp:template-part {"slug":"header","align":"full","className":"site-header-container"} /--> | ||
|
|
||
| <!-- wp:group {"layout":{"inherit":true},"tagName":"main"} --> | ||
| <!-- wp:group {"tagName":"main","className":"site-content-container"} --> | ||
| <main class="wp-block-group site-content-container"> | ||
| <p class="error404__oops" aria-hidden="true"> | ||
| Oops! | ||
| </p> | ||
|
|
||
| <!-- wp:heading {"level":1,"fontSize":"large"} --> | ||
| <h1 class="has-large-font-size">This page doesn't exist.</h1> | ||
| <!-- /wp:heading --> | ||
| <!-- wp:heading {"level":1} --> | ||
| <h1>This page doesn't exist.</h1> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:html --> | ||
| <div> | ||
| Go to | ||
| <ul class="is-inline"><!-- wp:home-link {"label":"the homepage","tagName":"div"} /--></ul>, | ||
| or try searching from the field below. | ||
| </div> | ||
| <!-- /wp:html --> | ||
| <!-- wp:paragraph --> | ||
| <p> | ||
| Go to | ||
| <a href="https://wordpress.org/news/">the homepage</a>, | ||
| or try searching News posts from the field below. | ||
| </p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:search {"label":"","placeholder":"Search...","buttonText":"Search"} /--> | ||
| <!-- wp:search {"label":"","placeholder":"Search...","buttonText":"Search","buttonUseIcon":true,"buttonPosition":"button-inside"} /--> | ||
| </main> | ||
| <!-- /wp:group --> | ||
|
|
||
| <!-- wp:template-part {"tagName":"footer","slug":"bottom-banner","className":"bottom-banner","layout":{"inherit":true}} /--> | ||
|
|
||
| <!-- wp:wporg/global-footer /--> |
105 changes: 84 additions & 21 deletions
105
source/wp-content/themes/wporg-news-2021/sass/page/_404.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,98 @@ | ||
| body.error404 { | ||
| // Set the page background color to darker-grey | ||
| background-color: var(--wp--preset--color--darker-grey); | ||
| // The min is a "magic number" ala https://css-tricks.com/fitting-text-to-a-container/. | ||
| // The max prevents it from bleeding into the footer. | ||
| --oops-font-size: min(39vw, 48vh); | ||
|
|
||
| // Set the background color for the local-header | ||
| .local-header { | ||
| --bar-background-color: var(--wp--preset--color--dark-grey); | ||
| --bar-text-color: var(--wp--preset--color--white); | ||
| --bar-link-color: var(--wp--preset--color--off-white); | ||
| --bar-link-hover-color: var(--wp--preset--color--off-white-2); | ||
| background-color: var(--wp--preset--color--dark-grey); | ||
|
|
||
| // Since the bar is the same color as the W.org header, we | ||
| // add a border to help separate them. | ||
| border-top: 1px solid var(--wp--preset--color--darker-grey); | ||
| .site-header-container { | ||
| border-bottom: 1px solid var(--wp--preset--color--darker-grey); | ||
| } | ||
|
|
||
| .local-header { | ||
| display: none; | ||
| } | ||
|
|
||
| .site-content-container { | ||
| color: var(--wp--preset--color--off-white-2); | ||
| text-align: center; | ||
| margin-top: max(100px, 15vh); | ||
| margin-bottom: min(100px, 15vh); | ||
| padding-left: var(--wp--custom--alignment--edge-spacing); | ||
| padding-right: var(--wp--custom--alignment--edge-spacing); | ||
| } | ||
|
|
||
| .error404__oops { | ||
| z-index: -1; | ||
| position: absolute; | ||
| top: calc(var(--wp-global-header-offset) + var(--wp--style--block-gap)); | ||
| left: 50%; | ||
| transform: translate(-50%, 0); | ||
| font-family: var(--wp--preset--font-family--eb-garamond); | ||
| color: var(--wp--preset--color--darker-grey); | ||
| font-size: var(--oops-font-size); | ||
| line-height: var(--oops-font-size); | ||
| } | ||
|
|
||
| h1 { | ||
| margin-top: calc(var(--oops-font-size) * 1.6); | ||
| margin-bottom: 30px; | ||
| font-size: 38px; | ||
| line-height: 40px; | ||
|
|
||
| @include break-small() { | ||
| // Keep it stuck to rougly the same position on top of "Oops" as the viewport grows. | ||
| margin-top: calc(var(--oops-font-size) * 0.35); | ||
| font-size: 70px; | ||
| line-height: 72px; | ||
| } | ||
| } | ||
|
|
||
| a { | ||
| color: var(--wp--preset--color--blue-3); | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| ul.is-inline { | ||
| display: inline; | ||
| margin: 0; | ||
| padding: 0; | ||
| .wp-block-search.wp-block-search__button-inside { | ||
| max-width: 400px; | ||
| margin-top: 40px; | ||
| padding: 16px 17px 16px 19px; | ||
| background-color: var(--wp--preset--color--white); | ||
| border-radius: var(--wp--custom--button--border--radius); | ||
|
|
||
| .wp-block-search__inside-wrapper { | ||
| border: none; | ||
| padding: 0; | ||
|
|
||
| .wp-block-search__input { | ||
| font-size: 20px; | ||
| padding: 0; | ||
| -webkit-appearance: none; /* Remove duplicate magnifying glass icon on Safari-mobile. */ | ||
|
|
||
| li { | ||
| display: inline; | ||
| @include break-small() { | ||
| font-size: 14px; | ||
| } | ||
| } | ||
|
|
||
| .wp-block-search__button { | ||
| background-color: transparent; | ||
| color: var(--wp--preset--color--black); | ||
| margin: 0; | ||
| padding: 0; | ||
|
|
||
| svg { | ||
| fill: currentColor; | ||
| height: 36px; | ||
| width: 36px; | ||
|
|
||
| @include break-small() { | ||
| height: 28px; | ||
| width: 28px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @extend %bottom-banner-dark; | ||
| .global-footer { | ||
| margin-top: 150px; | ||
| border-top: 1px solid var(--wp--preset--color--darker-grey); | ||
| } | ||
| } |