Theme: Add footer archive and basic styles to 404 template

See #8

source/wp-content/themes/wporg-news-2021/block-templates/404.html

@@ -26,4 +26,6 @@ <h1 class="has-large-font-size">This page doesn't exist.</h1>
 </main>
 <!-- /wp:group -->
 
+<!-- wp:template-part {"tagName":"footer","slug":"footer-archive","className":"footer-archive","layout":{"inherit":true}} /-->
+
 <!-- wp:wporg/global-footer /-->

source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss

@@ -62,10 +62,3 @@
 .aligncenter {
 	text-align: center;
 }
-
-// Mimick the Gutenberg-generated rules of the layout container on the 404 template
-.container-404 {
-	max-width: var(--wp--custom--layout--content-size);
-	margin-left: auto !important;
-	margin-right: auto !important;
-}

source/wp-content/themes/wporg-news-2021/sass/components/_404.scss

@@ -0,0 +1,11 @@
+.site-content-container.content-404 {
+	/*
+	 * calc() is only necessary here to work around legacy SCSS.
+	 *
+	 * @link https://stackoverflow.com/questions/54090345/sass-incompatible-units-vw-and-px
+	 * @link https://github.com/WordPress/wporg-news-2021/issues/34
+	 */
+	margin-top: calc( max( 100px, 15vh ) );
+	margin-bottom: calc( min( 100px, 15vh ) );
+	text-align: center;
+}

source/wp-content/themes/wporg-news-2021/sass/components/_style.scss

@@ -1 +1,2 @@
 @import "header";
+@import "404";