✨ adds google search

Issue: #36

static/css/styles.css

@@ -887,14 +887,18 @@ input[type=file] {
   left: 0px;
 }
 
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
 .inset-x-0 {
   left: 0px;
   right: 0px;
 }
 
-.inset-y-0 {
-  top: 0px;
-  bottom: 0px;
+.right-3 {
+  right: 0.75rem;
 }
 
 .top-0 {
@@ -917,10 +921,6 @@ input[type=file] {
   left: 0px;
 }
 
-.right-3 {
-  right: 0.75rem;
-}
-
 .top-14 {
   top: 3.5rem;
 }
@@ -1277,6 +1277,10 @@ input[type=file] {
   width: 33.333333%;
 }
 
+.w-\[100px\] {
+  width: 100px;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -1313,6 +1317,10 @@ input[type=file] {
   width: 200px;
 }
 
+.w-\[110px\] {
+  width: 110px;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1877,6 +1885,10 @@ input[type=file] {
   padding-left: 0.75rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-8 {
   padding-left: 2rem;
 }
@@ -1897,10 +1909,6 @@ input[type=file] {
   padding-bottom: 0.25rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pb-16 {
   padding-bottom: 4rem;
 }

templates/includes/_header.html

@@ -7,7 +7,7 @@
     <div>
       <div class="hidden md:block mx-auto px-3 sm:px-6 bg-charcoal">
         <nav class="relative flex items-center justify-between sm:h-10 pt-6 pb-6" aria-label="Global">
-          <div class="md:flex md:space-x-10 pt-3 pb-3 pl-3">
+          <div class="md:flex md:space-x-10 pt-3 pb-3 pl-3 items-center">
             <a href="{% url 'boost-about' %}" class="font-medium text-white hover:text-orange">About</a>
 
             <a href="{% url 'support' %}" class="font-medium text-white hover:text-orange">Support</a>
@@ -26,9 +26,21 @@
               <a href="{% url 'account_logout' %}" class="font-medium text-white hover:text-orange">Log Out</a>
             {% endif %}
 
-            <a href="#" class="font-medium text-white hover:text-orange">
-              <img class="mt-1" src="{% static 'img/icons/icon-search.svg' %}" alt="Search" />
-            </a>
+            <form action="https://www.google.com/search" class="items-center relative" method="get" name="searchform" target="_blank">
+              <input name="sitesearch" type="hidden" value="boost.org">
+              <input autocomplete="on"
+                     class="rounded-lg border-slate py-2 px-3 text-xs bg-charcoal text-white"
+                     name="q"
+                     placeholder="Search Boost.org"
+                     required="required"
+                     type="text"
+              >
+              <span class="absolute inset-y-0 right-3 flex items-center pl-2">
+                <button type="submit">
+                  <img class="" src="{% static 'img/icons/icon-search.svg' %}" alt="Search" />
+                </button>
+              </span>
+            </form>
           </div>
           <div class="items-center flex">
             <span id="icon-container" class="inline-block w-6 h-6"></span>