Theming search form

Author: ksuess

docs/_static/custom.css

@@ -7,12 +7,15 @@ pre {
   box-shadow: none;
 }
 a,
-a:visited {
+a:visited,
+main.bd-content #main-content a,
+main.bd-content #main-content a:visited {
   color: #2980b9;
 }
-a:hover {
-  color: #176aa1;
-  text-decoration: underline;
+a:hover,
+main.bd-content #main-content a:hover {
+  color: #1a567e;
+  text-decoration: none;
 }
 ul {
   list-style-type: square;
@@ -129,8 +132,14 @@ p.search-summary {
   list-style-type: none;
   padding-left: 0;
 }
+#search-results ul li,
+ul.search li {
+  margin-bottom: 2rem;
+  padding: 0;
+  background-image: none;
+}
 #search-results ul li h3 {
-  margin: 0.75rem 0 .5rem;
+  margin: 0.4rem 0 .5rem;
   font-size: 1.5rem;
 }
 #search-results ul li .breadcrumbs {
@@ -149,17 +158,6 @@ p.search-summary {
 
   text-overflow: ellipsis;
 }
-#search-results ul li,
-ul.search li {
-  margin-bottom: 2rem;
-  padding: 2px 0 5px 4rem;
-  background-image: url(file.svg);
-  background-blend-mode: hue;
-  background-color: violetred;
-  background-repeat: no-repeat;
-  background-position: 0px 8px;
-  background-size: 56px;
-}
 ul.search li p.context {
   margin-left: 0;
 }

docs/_static/searchtools.js

@@ -264,7 +264,7 @@ var Search = {
       })
       let markup = path
         .map((el, idx) => {
-            return idx===0 ? `<a href="/${el.path}"><b>${el.title}</b></a>` : `<a href="/${el.path}">${el.title}</a>` 
+            return `<a href="/${el.path}">${el.title}</a>` 
           })
       markup.push(`<span class="lastbreadcrumb">${item[1]}</span>`)
       return markup.join('<span class="pathseparator">&gt;</span>');

docs/_templates/search.html

@@ -66,9 +66,9 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
         </div>
       </div>
 
-      <div class="form-row mb-2">
-        <label for="doc_section" class="col">Filter by section</label>
-        <div class="col-sm-10">
+      <div class="form row mb-2">
+        <label for="doc_section" class="col sr-only">Filter by section</label>
+        <div class="col">
           <div class="form-check">
             <input class="form-check-input" type="radio" name="doc_section" id="doc_section_all" value="all">
             <label class="form-check-label" for="doc_section_all">