update search bar style, add font awesome cdn

src/css/header.css

@@ -86,15 +86,28 @@ body {
   justify-content: flex-end;
 }
 
+#search-field {
+  position: relative;
+}
+
+#search-field > i {
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  color: #dbdbdb;
+}
+
 #search-input {
+  box-sizing: border-box;
   color: #333;
   font-family: inherit;
   font-size: 0.95rem;
   width: 150px;
+  height: 45px;
   border: 1px solid #dbdbdb;
-  border-radius: 0.1em;
+  border-radius: 28px;
   line-height: 1.5;
-  padding: 0 0.25em;
+  padding: 0 1rem;
 }
 
 #search-input:disabled {
@@ -110,6 +123,11 @@ body {
 
 #search-input:focus {
   outline: none;
+  border: 2px solid var(--color-bwg-main);
+}
+
+#search-input:focus + i {
+  color: var(--color-bwg-main);
 }
 
 .navbar-burger {
@@ -246,7 +264,7 @@ body {
 
 @media screen and (min-width: 769px) {
   #search-input {
-    width: 200px;
+    width: 250px;
   }
 }
 

src/partials/head.hbs

+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
 {{> head-prelude}}
 {{> head-title}}
 {{> head-info}}

src/partials/header-content.hbs

@@ -11,7 +11,9 @@
       {{#if env.SITE_SEARCH_PROVIDER}}
       <div class="navbar-item search hide-for-print">
         <div id="search-field" class="field">
-          <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}>
+          {{!-- <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}> --}}
+          <input id="search-input" type="text">
+          <i class="fas fa-search"></i>
         </div>
       </div>
       {{/if}}