improve: nav search

usr/themes/classic-22/header.php

@@ -49,9 +49,10 @@
                     <a href="<?php $pages->permalink(); ?>"<?php if ($this->is('page', $pages->slug)): ?> class="active"<?php endif; ?>><?php $pages->title(); ?></a>
                 </li>
                 <?php endwhile; ?>
-
                 <li>
-                    <a href="<?php $this->options->index('search/keywords'); ?>" aria-label="<?php _e('搜索'); ?>"><img src="<?php $this->options->themeUrl('static/img/search.svg'); ?>" alt="Search"></a>
+                    <form method="post" action="<?php $this->options->siteUrl(); ?>">
+                        <input type="search" id="s" name="s">
+                    </form>
                 </li>
             </ul>
         </nav>

usr/themes/classic-22/search.php

@@ -4,7 +4,7 @@
 <main class="container">
     <div class="container-thin">
 
-        <h1 class="text-center"><?php _e('搜索关键词'); ?></h1>
+        <h1 class="text-center"><?php _e('搜索'); ?></h1>
         
         <form method="post" action="<?php $this->options->siteUrl(); ?>">
             <input type="search" id="s" name="s" placeholder="<?php _e('搜索关键字'); ?>" value="<?php $this->archiveTitle('','',''); ?>">

usr/themes/classic-22/static/scss/style.scss

@@ -182,6 +182,29 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
     margin: calc(var(--spacing) * -.5);
     padding: calc(var(--spacing) * .5);
   }
+
+  form {
+    margin-bottom: 0;
+
+    input[type=search] {
+      height: 50px;
+      background-image: url("../img/search.svg");
+      background-size: auto;
+      color: rgb(255,255,255);
+
+      &:focus {
+        --form-element-focus-color: rgba(255,255,255,0.5);
+      }
+
+      &:not(:focus) {
+        padding: 0;
+        border: none;
+        width: 30px;
+        padding-inline-start: 0;
+        background-position: center center;
+      }
+    }
+  }
 }
 
 .nav-toggler-btn {