[matrix] Refactor JS & add searchbar to mobile.

1 files changed, 42 insertions, 14 deletions

diff --git a/docs/_static/style.css b/docs/_static/style.css
index ae9b8032..b32e5464 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -233,22 +233,44 @@ a:hover {
 
 /* headers */
 
-header {
+header.grid-item {
   grid-area: h;
-  background-color: var(--sub-header-background);
   color: var(--main-text);
+  position: relative;
+  z-index: 1;
+  padding: 0;
 }
 
 header > nav {
+  background-color: var(--sub-header-background);
+  padding: 0.8em;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
 }
 
-header > nav > a {
+header > nav a {
   color: var(--white);
 }
 
+header > nav.mobile-only {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: -1;
+  padding-top: 0;
+  transition: top 0.5s ease-in-out;
+}
+
+header > nav.mobile-only .search {
+  width: 100%;
+}
+
+header > nav.mobile-only .search-wrapper {
+  background-color: var(--sub-header-background);
+}
+
 .main-heading {
   margin-right: auto;
 }
@@ -402,18 +424,20 @@ aside .material-icons,
 
 /* search button stuff */
 
-.searchwrapper {
+.search-wrapper {
   display: flex;
   align-items: stretch;
 }
 
-.searchwrapper > input[type=search] {
+.search-wrapper > input[type=search] {
   font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
+  outline: none;
+  appearance: none;
   font-size: 1em;
 }
 
-.searchwrapper > input[type=search],
-.searchwrapper > button[type=submit] {
+.search-wrapper > input[type=search],
+.search-wrapper > button[type=submit] {
   background-color: var(--sub-header-background);
   border: none;
   color: var(--search-text);
@@ -422,28 +446,28 @@ aside .material-icons,
   flex: 9;
 }
 
-.searchwrapper {
+.search-wrapper {
   border-bottom: 1px solid var(--search-border);
 }
 
-.searchwrapper:focus-within {
+.search-wrapper:focus-within {
   border-bottom: 1px solid var(--search-focus);
 }
 
-/* .searchwrapper > input[type=search] {
+/* .search-wrapper > input[type=search] {
   border: 1px solid var(--search-border);
   border-right: none;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.searchwrapper > input[type=search]:focus,
+.search-wrapper > input[type=search]:focus,
 button[type=submit]:focus ~ input[type=search] {
   border: 1px solid var(--search-focus);
   border-right: none;
 } */
 
-.searchwrapper > button[type=submit] {
+.search-wrapper > button[type=submit] {
   color: var(--search-button);
   /* border: 1px solid var(--search-border); */
   /* border-left: none; */
@@ -453,13 +477,13 @@ button[type=submit]:focus ~ input[type=search] {
   flex: 1;
 }
 
-/* .searchwrapper > button[type=submit]:focus,
+/* .search-wrapper > button[type=submit]:focus,
 input[type=search]:focus ~ button[type=submit] {
   border: 1px solid var(--search-focus);
   border-left: none;
 } */
 
-.searchwrapper > button[type=submit]:hover {
+.search-wrapper > button[type=submit]:hover {
   background-color: var(--search-border);
   color: var(--search-button-hover);
 }
@@ -1088,6 +1112,10 @@ div.code-block-caption {
     background-color: var(--black);
   }
 
+  header > nav {
+    background-color: unset;
+  }
+
   .sub-header {
     display: flex;
     align-items: center;