Add Search and Improve Contrast

3 files changed, 62 insertions, 45 deletions

diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss
index 543d88c..a1e5402 100644
--- a/sass/include/_nav.scss
+++ b/sass/include/_nav.scss
@@ -13,19 +13,21 @@ main nav a:visited {
 main nav a:hover {
   border-color: var(--a3);
 }
+nav > div:first-of-type {
+  margin-left: auto
+}
+nav > div {
+  ul {
+    line-height: 0;
+    margin-top: 0;
+    padding-bottom: var(--s1);
+  }
+  display: block;
+  margin-left: var(--s1);
+}
 nav {
   align-items: center;
   display: flex;
-  justify-content: space-between;
-  div {
-    ul {
-      line-height: 0;
-      margin-top: 0;
-      padding-bottom: var(--s1);
-    }
-    display: block;
-    margin-left: auto
-  }
   div h2 {
     font-size: 1rem;
     &:hover {
@@ -44,6 +46,10 @@ nav {
     position: relative;
     text-align: left;
   }
+  div div {
+    display: inline-block;
+    position: relative;
+  }
 }
 
 @if map-get($breakpoints, "md") {
diff --git a/sass/include/_recent.scss b/sass/include/_recent.scss
deleted file mode 100644
index 88b5763..0000000
--- a/sass/include/_recent.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-main {
-  .toc {
-    max-width: 260px;
-    min-width: 240px;
-  }
-  .toc-item {
-    padding: 10px 20px;
-    color: var(--f1);
-  }
-  .toc-item a, .toc-item-child a {
-    color: var(--f1);
-    &:hover {
-      cursor: pointer;
-      color: var(--a2);
-      text-decoration: underline;
-    }
-  }
-  .toc-item a.active, .toc-item-child a.active {
-    color: var(--a2);
-  }
-  .toc-item-child {
-    padding: 0 30px 5px;
-    color: var(--f1);
-  }
-}
-.toc-sticky {
-  border-radius: var(--br);
-  border-top: 5px solid var(--a1);
-  background-color: var(--c2);
-  position: sticky;
-  top: 10px;
-  padding: 10px 0 20px;
-  max-height: 100vh;
-  overflow: auto;
-}
diff --git a/sass/include/_search.scss b/sass/include/_search.scss
new file mode 100644
index 0000000..82c06fa
--- /dev/null
+++ b/sass/include/_search.scss
@@ -0,0 +1,46 @@
+div:empty {
+  display: none;
+}
+#suggestions {
+  z-index: 9;
+  background: var(--c1);
+  border: 2px solid var(--c3);
+  position: absolute;
+  right: 0;
+  margin-top: var(--s1);
+  width: 500px;
+  max-height: 500px;
+  overflow: auto;
+}
+#suggestions a {
+  display: block;
+  text-decoration: none;
+  padding: var(--s1);
+  margin: 0 var(--s1);
+}
+#suggestions a:hover,
+#suggestions a:focus {
+  background: var(--c2);
+}
+#suggestions span {
+  line-height: 1.5;
+  display: block;
+}
+#suggestions span:first-child {
+  font-weight: var(--fh);
+}
+#suggestions span:nth-child(2) {
+  color: var(--f1);
+}
+@if map-get($breakpoints, "md") {
+  @media (max-width: map-get($breakpoints, "md")) {
+    nav div:last-of-type, input {
+      width: 100%;
+    }
+    #suggestions {
+      position: static;
+      left: 0;
+      width: 100%;
+    }
+  }
+}