Fix search rendering, exclude SUMMARY from search. (#197)

Author: kattni

docs/en/SUMMARY.md

@@ -1,3 +1,8 @@
+---
+search:
+  exclude: true
+---
+
 - Section one
     - [Section one](section_one/index.md)
     - [Section one - page two](section_one/page_two.md)

src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css

@@ -54,10 +54,15 @@ body {
     font-family: var(--brand-font);
 }
 
-nav.md-tabs, .md-header {
+.md-header {
     background-color: var(--md-primary-fg-color);
 }
 
+/* Resolves header tabs color issue with search overlay */
+.md-tabs {
+    background-color: unset;
+}
+
 .md-header__title {
     font-size: 1.24rem;
     line-height: 3.3rem;
@@ -103,6 +108,7 @@ nav.md-tabs, .md-header {
 /* Search */
 .md-search {
     margin-left: 1rem;
+    margin-right: 1rem;
 }
 
 input.md-search__input,
@@ -126,12 +132,50 @@ input.md-search__input,
     height: 2.5rem;
 }
 
+input.md-search__input, .md-search__suggest, .md-search-result__meta {
+    font-family: var(--brand-font);
+}
+
+.md-search__suggest {
+    padding-top: 1px;
+}
+
+.md-search-result .md-typeset h1 {
+    font-size: 1.6rem;
+}
+
+.md-search-result .md-typeset h2,
+.md-search-result .md-typeset {
+    font-size: 1rem;
+}
+
+/* The widths in the rest of this section are to correct rendering of the search input */
 @media screen and (min-width: 60em) {
-  .md-search__inner {
-      width: unset;
-  }
+    .md-search {
+      max-width: 30rem;
+      width: 100%;
+    }
+}
+
+@media screen and (min-width: 60em) and (max-width: 76.2344em) {
+    .md-search__scrollwrap,
+    [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
+        width: 100%;
+    }
 }
 
+@media screen and (min-width: 76.25em) {
+    .md-search__scrollwrap,
+    [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
+        width: 100%;
+    }
+}
+
+.md-search__inner {
+    width: 100%;
+}
+
+
 /* Link colors */
 /* Remove link color from section headers that are not links */
 .md-nav__link[for]:focus,
@@ -587,24 +631,6 @@ svg.copy-icon {
     padding-left: 8px;
 }
 
-/* Search */
-input.md-search__input, .md-search__suggest, .md-search-result__meta {
-    font-family: var(--brand-font);
-}
-
-.md-search__suggest {
-    padding-top: 1px;
-}
-
-.md-search-result .md-typeset h1 {
-    font-size: 1.6rem;
-}
-
-.md-search-result .md-typeset h2,
-.md-search-result .md-typeset {
-    font-size: 1rem;
-}
-
 /* Footer and footer navigation color */
 .md-footer, .md-footer-meta {
     background-color: light-dark(#f5f5f5, #343A40);