feat: search bar

static/cache/css/main.css

@@ -97,6 +97,7 @@ a:hover {
 
 .nav__link {
   text-decoration: none;
+  margin: 0 5px;
 }
 
 a {
@@ -254,9 +255,6 @@ button {
   border: none;
 }
 
-
-
-
 /* Inline #1 | http://localhost:7000/ */
 
 .repository__container {
@@ -282,3 +280,43 @@ button {
   border-radius: 5px;
 }
 
+.search__bar {
+  height: 1.6rem;
+  width: 70%;
+  padding: 0;
+  margin: 0 auto;
+  display: flex;
+}
+
+#search {
+  width: 100%;
+  margin: auto;
+  height: 1.3rem;
+}
+
+#search:placeholder-shown {
+  margin: auto;
+  padding-left: 5px;
+  display: inline-block;
+  font-size: 0.8rem;
+}
+
+.search__button {
+  position: relative;
+  left: -30px;
+  background: none;
+  border: none;
+  align-items: center;
+  display: flex;
+}
+
+.search__icon {
+  margin: auto;
+  filter: invert(47%) sepia(1%) saturate(0%) hue-rotate(278deg) brightness(92%)
+    contrast(88%);
+  height: 55%;
+}
+
+.search__icon:hover {
+  cursor: pointer;
+}

templates/components/nav/pub.html

@@ -10,14 +10,12 @@
     </label>
   </div>
 
-  <div class="nav__spacer"></div>
+  {% include "search_bar" %}
 
   <div class="nav__link-group">
     <div class="nav__link-container">
+      <a class="nav__link" rel="noreferrer" href="{{ page.explore }}">Explore</a>
       <a class="nav__link" rel="noreferrer" href="/federate/">Download Data</a>
-    </div>
-
-    <div class="nav__link-container">
       <a class="nav__link" rel="noreferrer" href="{{ page.auth.add }}">Spider Forge</a>
     </div>
   </div>

templates/components/nav/search.html

@@ -0,0 +1,17 @@
+<form class="search__bar" action="{{ page.search }}" method="post">
+    <input
+      placeholder="Search for repositories, builders, and all things software development!"
+      type="text/submit/hidden/button"
+      name="query"
+      required
+      id="query"
+      {% if search_query %}
+      value="{{ search_query }}"
+      {% else %}
+        value=""
+      {% endif %}
+    />
+    <button class="search__button" type="submit">
+      <img class="search__icon" src="search/icon" alt="Search icon" />
+    </button>
+</form>