diff --git a/source/wp-content/themes/wporg-parent-2021/sass/page/_404.scss b/source/wp-content/themes/wporg-parent-2021/sass/page/_404.scss index 43abab87..535142d1 100644 --- a/source/wp-content/themes/wporg-parent-2021/sass/page/_404.scss +++ b/source/wp-content/themes/wporg-parent-2021/sass/page/_404.scss @@ -4,15 +4,7 @@ body.error404 { background-color: var(--wp--preset--color--charcoal-2); .site-content-container { - - /* - * Prevent "oops" from creating a horizontal scroll. - * In some iOS versions, these rules also have to be applied to , but that would bleed over to other - * pages. It's better to just let there be a scroll, since it's not a commonly used page. - */ - position: relative; // needed for overflow to work - overflow-x: hidden; - + position: relative; z-index: 0; @include break-small() { @@ -28,7 +20,12 @@ body.error404 { } .wporg-parent-oops-container { - position: relative; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + overflow: hidden; > p { display: none; @@ -36,19 +33,19 @@ body.error404 { &::after { content: "Oops!"; - color: inherit; display: block; z-index: -1; - position: absolute; + position: relative; + width: 120vw; top: 22px; - left: -10vw; + left: -4.9vw; font-family: var(--wp--preset--font-family--eb-garamond); font-size: var(--oops-font-size); line-height: var(--oops-font-size); opacity: 0.4; // Make the overlaid text more readable. @include break-small() { - top: calc(var(--oops-font-size) * -0.55); + top: calc(var(--oops-font-size) * -0.25); } } }