Add 404 stylesheet

WordPress · Nov 10, 2022 · 1a09a5b · 1a09a5b
1 parent 48f17f6
commit 1a09a5b
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 0 deletions.
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/404.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/404.scss
@@ -0,0 +1,119 @@
+@import "breakpoints";
+
+body.error404 {
+ --oops-font-size: 47vw; // "Magic number" ala https://css-tricks.com/fitting-text-to-a-container/
+
+ .site-content-container {
+
+ /*
+ * Prevent "oops" from creating a horizontal scroll.
+ * In some iOS versions, these rules also have to be applied to <html>, but that would bleed over to other
+ * pages. It's better to just let there be a scroll, since it's not a commonly used page.
+ */
+ position: relative; // needed for overflow to work
+ overflow: hidden;
+
+ margin-top: 0;
+ 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;
+
+ // 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);
+ }
+ }
+
+ .error404__oops {
+ z-index: -1;
+ position: absolute;
+ top: 22px;
+ left: -4.9vw;
+ font-family: var(--wp--preset--font-family--eb-garamond);
+ font-size: var(--oops-font-size);
+ line-height: var(--oops-font-size);
+ opacity: 0.4; // Make the overlaid text more readable.
+
+ @include break-small() {
+ top: calc(var(--oops-font-size) * -0.26);
+ }
+ }
+
+ h1 {
+ margin-top: calc(var(--oops-font-size) * 0.6);
+ margin-bottom: 30px;
+ font-size: 38px;
+ line-height: 40px;
+
+ @include break-small() {
+ margin-top: 0;
+ font-size: 70px;
+ line-height: 72px;
+ }
+ }
+
+ a {
+ color: var(--wp--preset--color--blue-3);
+ text-decoration: underline;
+ }
+
+ .site-content-container .wp-block-search.wp-block-search__button-inside {
+ width: 100%;
+ margin-top: 40px;
+ background-color: var(--wp--preset--color--white);
+ border-radius: var(--wp--custom--button--border--radius);
+
+ @include break-small() {
+ max-width: 400px;
+ }
+
+ .wp-block-search__inside-wrapper {
+ border: none;
+ padding: 0 15px 0 0;
+
+ @include break-small() {
+ padding: 0 8px 0 0;
+ }
+
+ .wp-block-search__input {
+ font-size: 20px;
+ -webkit-appearance: none; /* Remove duplicate magnifying glass icon on Safari-mobile. */
+
+ padding: 12px 0 12px 19px;
+
+ @include break-small() {
+ padding: 6px 0 6px 14px;
+ font-size: 14px;
+ }
+ }
+
+ .wp-block-search__button {
+ background-color: transparent;
+ color: var(--wp--preset--color--black);
+ margin: 0;
+ padding: 0;
+ border:
+ var(--wp--custom--form--border--width) var(--wp--custom--form--border--style)
+ var(--wp--custom--form--border--color);
+ border-left: 0;
+
+ svg {
+ fill: currentColor;
+ height: 36px;
+ width: 36px;
+
+ @include break-small() {
+ height: 28px;
+ width: 28px;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
@@ -1,3 +1,5 @@
+@import "404";
+
 /*
  * Note: only add styles here in cases where you can't achieve the style with
  * templates or theme.json settings.