UI: Fix package search bar (#643)

* UI: Fix package search bar

---------

Co-authored-by: Joe Wallwork <22053413+joewallwork@users.noreply.github.com>

Author: srinjoy933

source/_static/custom.css

@@ -96,12 +96,40 @@ i.fa-rss:before {
 i.fa-envelope-open-text:before {
   color: #734f96;
 }
-.package-search {
-    margin: auto;
-    text-align: center;
-    width: 100%;
-    max-width: 600px;
-}
-.bd-search {
-    margin-bottom: 2rem;
+.package-search-form {
+  text-align: center;
+  margin: 20px auto 40px auto;
+}
+.package-search-input {
+  width: 100%;
+  max-width: 900px;
+  height: 60px;
+
+  padding: 0 20px;
+
+  border: 3px solid var(--pst-color-primary);
+  border-radius: 12px;
+
+  font-size: 18px;
+  text-align: center;
+
+  display: block;
+  margin: auto;
+}
+html[data-theme="dark"] .package-search-input {
+  background-color: #1e1e1e;
+  color: white;
+}
+
+.package-search-input::placeholder {
+  color: #888;
+}
+
+html[data-theme="dark"] .package-search-input::placeholder {
+  color: #bbb;
+}
+.package-search-input:focus {
+  outline: none;
+  border: 3px solid var(--pst-color-primary);
+  box-shadow: 0 0 8px rgba(115, 79, 150, 0.35);
 }

source/packages.md

@@ -16,8 +16,7 @@ A rich ecosystem of high-performance code
 Find a Package
 :::
 
-<form class="bd-search d-flex align-items-center" align="center" action="../search/index.html" method="get">  <input type="search" class="form-control" name="q" id="search-input" placeholder="Search for a package" aria-label="Search" autocomplete="off" style="margin:auto;text-align:center;width:100%;max-width:600px;">
- </form>
+<form class="package-search-form" action="../search/index.html" method="get"> <input type="search" name="q" id="search-input" class="package-search-input" placeholder="Search for a package" aria-label="Search" autocomplete="off"></form>
 
 :::::{grid} 2
 :gutter: 3
@@ -30,7 +29,7 @@ Package index
 :::
 
 :::{div} sd-fs-6
-The fortran-lang package index is community-maintained and lists open source Fortran-related projects.This includes large-scale scientific applications,function libraries, Fortran interfaces, and developer tools.<br>
+The fortran-lang package index is community-maintained and lists open source Fortran-related projects. This includes large-scale scientific applications, function libraries, Fortran interfaces, and developer tools.<br>
 See [here](../community/packages/) for how to get your project listed. <br>
 Use the box above to search the package index by keyword, package name, or author username.
 :::
@@ -111,4 +110,4 @@ packages/numerical
 packages/programming
 packages/strings
 packages/scientific
-:::
+:::