diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss index df6dc4d7..cfa62ebd 100644 --- a/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss +++ b/source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss @@ -1,9 +1,9 @@ // Setup the main container to use a flex box-model // allowing us to simplify the layout and "sticky" bar. .wp-site-blocks { - min-height: 100vh; display: flex; flex-direction: column; + min-height: calc(100vh - var(--wp-global-header-offset) - var(--local-header-height)); > .site-content-container { // Make the content area grow to fill any remaining space on the screen, so that the footer is pushed to diff --git a/source/wp-content/themes/wporg-news-2021/sass/page/_404.scss b/source/wp-content/themes/wporg-news-2021/sass/page/_404.scss index a97ffbd4..1561a75e 100644 --- a/source/wp-content/themes/wporg-news-2021/sass/page/_404.scss +++ b/source/wp-content/themes/wporg-news-2021/sass/page/_404.scss @@ -20,19 +20,27 @@ body.error404 { */ position: relative; // needed for overflow to work overflow: hidden; + margin-top: 0; color: var(--wp--preset--color--off-white-2); padding-left: var(--wp--custom--alignment--edge-spacing); padding-right: var(--wp--custom--alignment--edge-spacing); @include break-small() { + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 100px; + padding-bottom: 100px; + // has a `margin-top` that assumes the local header is present. That creates a gap when when // hide the local nav. We can't change without affecting other pages, so instead we just push // this element up to cover the gap. margin-top: calc(-1 * var(--local-header-height)); + // Prevent the gap under the content container from growing too big. // The max will start cutting off the text after ~2500px, but that's an edge case. - min-height: min( var(--oops-font-size), 975px ); + min-height: min(var(--oops-font-size), 975px); } } @@ -59,8 +67,7 @@ body.error404 { line-height: 40px; @include break-small() { - // Keep it stuck to roughly the same position on top of "Oops" as the viewport grows. - margin-top: calc(var(--oops-font-size) * 0.31); + margin-top: 0; font-size: 70px; line-height: 72px; } @@ -126,7 +133,7 @@ body.error404 { border-top: 1px solid var(--wp--preset--color--darker-grey); @include break-small() { - margin-top: 115px; + margin-top: 0; } } }