Bladeren bron

Pixel: update 404 page styles (#6505)

* update 404 page styles

* add spacer in 404 page

* Invert button styles.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Madhu Dollu 2 jaren geleden
bovenliggende
commit
0618d17c8e
4 gewijzigde bestanden met toevoegingen van 36 en 12 verwijderingen
  1. 9 3
      pixel/patterns/404.php
  2. 20 1
      pixel/style.css
  3. 0 1
      pixel/templates/404.html
  4. 7 7
      pixel/theme.json

+ 9 - 3
pixel/patterns/404.php

@@ -7,10 +7,16 @@
 
 ?>
 
-<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"medium"} -->
-<h1 class="has-text-align-center has-medium-font-size" id="oops-that-page-can-t-be-found"><?php echo esc_html__( 'Oops! That page can&rsquo;t be found.', 'pixel' ); ?></h1>
+<!-- wp:heading {"textAlign":"center","level":1} -->
+<h1 class="has-text-align-center"><?php echo esc_html__( 'Oh, nooooooooooooooooo!', 'pixel' ); ?></h1>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php echo  esc_html__( 'It looks like nothing was found at this location. Maybe try a search?', 'pixel' ); ?></p>
+<p><?php echo  esc_html__( 'The page you’re looking doesn’t seem to exist. Maybe try a search?', 'pixel' ); ?></p>
 <!-- /wp:paragraph -->
+
+<!-- wp:search {"label":"","showLabel":false,"placeholder":"<?php echo esc_attr__( 'Type Something...', 'pixel' ); ?>"} /-->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

+ 20 - 1
pixel/style.css

@@ -36,4 +36,23 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 
 .wp-block-post-title a:active {
 	text-decoration-style: solid;
-}
+}
+
+/*
+ * Form elements
+ */
+:is(textarea, input:not([type="submit"],[type="checkbox"])) {
+	color: var(--wp--preset--color--foreground);
+	background-color: var(--wp--preset--color--background);
+	border: 2px solid var(--wp--preset--color--primary) !important;
+	outline: none;
+    font-size: 0.875rem;
+}
+:is(textarea, input:not([type="submit"],[type="checkbox"]))::placeholder {
+    color: var(--wp--preset--color--foreground);
+    font-weight: 300;
+}
+.wp-block-search :is(textarea, input:not([type="submit"],[type="checkbox"])) {
+    box-shadow: var(--wp--custom--shadow);
+    margin-right: var(--wp--preset--spacing--20);
+}

+ 0 - 1
pixel/templates/404.html

@@ -4,7 +4,6 @@
 <main class="wp-block-group">
 
 	<!-- wp:pattern {"slug":"pixel/404"} /-->
-	<!-- wp:search {"label":""} /-->
 
 </main>
 <!-- /wp:group -->

+ 7 - 7
pixel/theme.json

@@ -362,8 +362,8 @@
                     "width": "2px"
                 },
                 "color": {
-                    "background": "var(--wp--preset--color--background)",
-                    "text": "var(--wp--preset--color--primary)"
+                    "background": "var(--wp--preset--color--primary)",
+                    "text": "var(--wp--preset--color--background)"
                 },
                 "typography": {
                     "fontSize": "var(--wp--preset--font-size--small)",
@@ -380,8 +380,8 @@
                 },
                 ":hover": {
                     "color": {
-                        "background": "var(--wp--preset--color--primary)",
-                        "text": "var(--wp--preset--color--background)"
+                        "background": "var(--wp--preset--color--background)",
+                        "text": "var(--wp--preset--color--primary)"
                     },
                     "border": {
                         "color": "var(--wp--preset--color--primary)"
@@ -389,13 +389,13 @@
                 },
                 ":active": {
                     "color": {
-                        "background": "var(--wp--preset--color--background)",
-                        "text": "var(--wp--preset--color--primary)"
+                        "background": "var(--wp--preset--color--primary)",
+                        "text": "var(--wp--preset--color--background)"
                     },
                     "border": {
                         "color": "var(--wp--preset--color--primary)"
                     },
-                    "shadow": "2px 2px !important"
+                    "shadow": "2px 2px var(--wp--preset--color--primary) !important"
                 }
             },
             "heading": {