404: Vertically align content.

WordPress · Feb 18, 2022 · 388a4f0 · 388a4f0
1 parent 3c3da03
commit 388a4f0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
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
@@ -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
@@ -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;
+
 			// <html> 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 <html> 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;
 		}
 	}
 }