Address search input and search result layout issues

https://bugs.webkit.org/show_bug.cgi?id=246126 Reviewed by Devin Rousso. * Websites/webkit.org/wp-content/themes/webkit/404.php: * Websites/webkit.org/wp-content/themes/webkit/header.php: * Websites/webkit.org/wp-content/themes/webkit/style.css: (.search-input): (header .search-input): (header .search-input:focus,): (@media only screen and (max-width: 1015px) header .search-input,): (@media only screen and (max-width: 1015px) header .search-input:focus,): (@media only screen and (max-width: 690px) .search-results h1): (@media only screen and (max-width: 690px) .search-results h1,): (#site-nav .search-input): Deleted. (.search-input:focus,): Deleted. (@media only screen and (max-width: 1015px) #site-nav .search-input,): Deleted. (@media only screen and (max-width: 1015px) .search-input:focus,): Deleted. (@media only screen and (max-width: 1015px) .search-results h1,): Deleted. Canonical link: https://commits.webkit.org/255225@main
WebKit · Oct 6, 2022 · 6de86cf · 6de86cf
1 parent fe6a56d
commit 6de86cf
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 54 deletions.
diff --git a/Websites/webkit.org/wp-content/themes/webkit/404.php b/Websites/webkit.org/wp-content/themes/webkit/404.php
@@ -1,9 +1,9 @@
 <?php get_header(); ?>
 <style>
-h1 {
+main h1 {
     font-size: 6rem;
-    font-weight: 100;
     padding-top: 9rem;
+    text-align: left;
 }
 h1, p, form {
     margin-bottom: 3rem;
@@ -15,39 +15,10 @@
     max-width: 800px;
 }
 input {
-    display: inline-block;
-    box-sizing: border-box;
-    vertical-align: top;
-    height: 32px;
+    height: 3.2rem;
     padding-top: 3px;
-    margin-bottom: 16px;
-    padding-left: 15px;
-    padding-right: 15px;
-    font-size: 15px;
-    color: #333333;
-    text-align: left;
-    border: 1px solid #d6d6d6;
-    border-radius: 4px;
-    background: white;
-    background-clip: padding-box;
-    font-family: "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-    font-size: 15px;
-    line-height: 1.33333;
-    font-weight: 400;
-    letter-spacing: normal;
-    font-size: 2rem;
-}
-
-input[type=submit] {
-    background-color: #1d9bd9;
-    background: linear-gradient(#3baee7, #0088cc);
-    border-radius: 4px;
-    color: white;
-    cursor: pointer;
-    font-size: 1.5rem;
-    font-weight: 500;
-    text-align: center;
-    border: 0;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
 }
 </style>
 
@@ -60,5 +31,4 @@
 
 <?php echo get_search_form(); ?>
 
-
 <?php get_footer(); ?>
diff --git a/Websites/webkit.org/wp-content/themes/webkit/header.php b/Websites/webkit.org/wp-content/themes/webkit/header.php
@@ -11,7 +11,7 @@
 
     <meta name="application-name" content="WebKit">
 
-    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>?20221005" media="all">
+    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>?2022100501" media="all">
     <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v1" type="text/css">
     <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Mono,v2" type="text/css">
     <meta name="supported-color-schemes" content="light dark">

diff --git a/Websites/webkit.org/wp-content/themes/webkit/style.css b/Websites/webkit.org/wp-content/themes/webkit/style.css
@@ -2285,7 +2285,7 @@ header .menu-item { /* add bottom dimension to main menu items */
     background-color: transparent;
     background-repeat: no-repeat;
     background-size: 1.8rem;
-    background-position: 6px 5px;
+    background-position: 6px 5.5px;
 
     padding: 3px 3px 3px 30px;
 
@@ -2298,20 +2298,14 @@ header .menu-item { /* add bottom dimension to main menu items */
     transition: 200ms ease-out width, 200ms ease-in background-color;
 }
 
-#site-nav .search-input {
+header .search-input {
     background-image: var(--search-glyph-light);
 }
 
 .search #site-nav ul.menu li:last-child {
     display: none;
 }
 
-.search-input:focus,
-.search-input:not([value=""]) {
-    width: 18rem;
-    background-color: rgba(0,0,0,0.3);
-}
-
 .search-results main {
     padding-bottom: 2rem;
 }
@@ -2373,6 +2367,12 @@ p .search-term {
     color: var(--search-term-text-color);
 }
 
+header .search-input:focus,
+header .search-input:not([value=""]) {
+    width: 18rem;
+    background-color: rgba(0,0,0,0.3);
+}
+
 /** Accessibility **/
 
 @media (prefers-reduced-motion) {
@@ -2554,7 +2554,7 @@ p .search-term {
         padding: 0 3rem 3rem 0;
     }
 
-    #site-nav .search-input,
+    header .search-input,
     .search-input {
         width: 100%;
 
@@ -2569,18 +2569,11 @@ p .search-term {
         color: var(--text-color);
     }
 
-    .search-input:focus,
-    .search-input:not([value=""]) {
+    header .search-input:focus,
+    header .search-input:not([value=""]) {
         width: 100%;
         background-color: rgba(255,255,255,0.1);
     }
-
-    .search-results h1,
-    .search-results main ul {
-        width: 100%;
-        margin: 0 auto;
-    }
-
 }
 
 @media only screen and (max-width: 690px) {
@@ -2674,6 +2667,17 @@ p .search-term {
         display: inline-block;
         padding: 0 3rem;
     }
+
+    .search-results h1 {
+        font-size: 5.4rem;
+    }
+
+    .search-results h1,
+    .search-results main form,
+    .search-results main .results-list {
+        width: 100%;
+        margin: 0 auto;
+    }
 }
 
 @media only screen and (max-width: 600px) {