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 4c9f41fe..f23f9bc3 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 @@ -26,4 +26,6 @@

This page doesn't exist.

+ + diff --git a/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss b/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss index cb2e9033..116f2c04 100644 --- a/source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss +++ b/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; -} diff --git a/source/wp-content/themes/wporg-news-2021/sass/components/_404.scss b/source/wp-content/themes/wporg-news-2021/sass/components/_404.scss new file mode 100644 index 00000000..819f6ea9 --- /dev/null +++ b/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; +} diff --git a/source/wp-content/themes/wporg-news-2021/sass/components/_style.scss b/source/wp-content/themes/wporg-news-2021/sass/components/_style.scss index 833f565d..9b272af5 100644 --- a/source/wp-content/themes/wporg-news-2021/sass/components/_style.scss +++ b/source/wp-content/themes/wporg-news-2021/sass/components/_style.scss @@ -1 +1,2 @@ @import "header"; +@import "404";