From 237b7df77bddd516a9e348884ce740b617bf326f Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Mon, 14 Feb 2022 11:22:11 -0800
Subject: [PATCH 1/3] 404: Add styling to match mockup.

---
 .../wporg-news-2021/block-templates/404.html  | 29 +++---
 .../wporg-news-2021/sass/page/_404.scss       | 98 ++++++++++++++++---
 2 files changed, 98 insertions(+), 29 deletions(-)

diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/404.html b/source/wp-content/themes/wporg-news-2021/block-templates/404.html
index e16cd2ee..3c34c312 100644
--- a/source/wp-content/themes/wporg-news-2021/block-templates/404.html
+++ b/source/wp-content/themes/wporg-news-2021/block-templates/404.html
@@ -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:html -->
+	<div>
+		Go to
+		<ul class="is-inline"><!-- wp:home-link {"label":"the homepage","tagName":"div"} /--></ul>,
+		or try searching News posts from the field below.
+	</div>
+	<!-- /wp:html -->
 
-<!-- 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 /-->
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 e3221956..738b9298 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
@@ -1,24 +1,48 @@
 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;
+		}
 	}
 
 	ul.is-inline {
@@ -31,5 +55,49 @@ body.error404 {
 		}
 	}
 
-	@extend %bottom-banner-dark;
+	.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. */
+
+				@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;
+					}
+				}
+			}
+		}
+	}
+
+	.global-footer {
+		margin-top: 150px;
+		border-top: 1px solid var(--wp--preset--color--darker-grey);
+	}
 }

From 811d0bc0e3f59aad79ea75eec36cc25a3b5d1308 Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Tue, 15 Feb 2022 10:33:33 -0800
Subject: [PATCH 2/3] homepage like - correct color and add underline

---
 source/wp-content/themes/wporg-news-2021/sass/page/_404.scss | 5 +++++
 1 file changed, 5 insertions(+)

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 738b9298..a9c224a1 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
@@ -52,6 +52,11 @@ body.error404 {
 
 		li {
 			display: inline;
+
+			a {
+				color: var(--wp--preset--color--blue-3);
+				text-decoration: underline;
+			}
 		}
 	}
 

From 7bd6a80b0eecf72ae3d9bf0e30184f9efa8cc216 Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Tue, 15 Feb 2022 10:50:56 -0800
Subject: [PATCH 3/3] convert home link to a tag

---
 .../wporg-news-2021/block-templates/404.html     | 10 +++++-----
 .../themes/wporg-news-2021/sass/page/_404.scss   | 16 +++-------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/404.html b/source/wp-content/themes/wporg-news-2021/block-templates/404.html
index 3c34c312..a4b4fe92 100644
--- a/source/wp-content/themes/wporg-news-2021/block-templates/404.html
+++ b/source/wp-content/themes/wporg-news-2021/block-templates/404.html
@@ -10,13 +10,13 @@
 	<h1>This page doesn't exist.</h1>
 	<!-- /wp:heading -->
 
-	<!-- wp:html -->
-	<div>
+	<!-- wp:paragraph -->
+	<p>
 		Go to
-		<ul class="is-inline"><!-- wp:home-link {"label":"the homepage","tagName":"div"} /--></ul>,
+		<a href="https://wordpress.org/news/">the homepage</a>,
 		or try searching News posts from the field below.
-	</div>
-	<!-- /wp:html -->
+	</p>
+	<!-- /wp:paragraph -->
 
 	<!-- wp:search {"label":"","placeholder":"Search...","buttonText":"Search","buttonUseIcon":true,"buttonPosition":"button-inside"} /-->
 </main>
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 a9c224a1..52d862ec 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
@@ -45,19 +45,9 @@ body.error404 {
 		}
 	}
 
-	ul.is-inline {
-		display: inline;
-		margin: 0;
-		padding: 0;
-
-		li {
-			display: inline;
-
-			a {
-				color: var(--wp--preset--color--blue-3);
-				text-decoration: underline;
-			}
-		}
+	a {
+		color: var(--wp--preset--color--blue-3);
+		text-decoration: underline;
 	}
 
 	.wp-block-search.wp-block-search__button-inside {