Add Search and Improve Contrast

7 files changed, 76 insertions, 53 deletions

diff --git a/sass/_variables.scss b/sass/_variables.scss
index 72adc3e..6fa3915 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -15,8 +15,8 @@ $enable-responsive-spacings: false !default;
 // Enable a centered viewport for <header>, <main>, <footer> inside <body>
 // Fluid layout until it reaches a defined size, then becomes a centered viewport
 $enable-maxwidth: true !default;
-$mw:60% !default;// max-width
-$mb:1200px !default;// value at which to switch from fluid layout to using max-width
+$mw:50% !default;// max-width
+$mb:1000px !default;// value at which to switch from fluid layout to using max-width
 
 // Enable a centered viewport for <header>, <main>, <footer> inside <body>
 // This option will only work if $enable-maxwidth: false
diff --git a/sass/abridge.scss b/sass/abridge.scss
index d69bd5d..6b8733a 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -31,6 +31,8 @@
 @import "include/code"; // pre, code, ...
 @import "include/hr"; // hr
 
+@import "include/search"; // Zola Search - elasticlunr site-wide search
+
 @import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right)
 
 //@import "include/scroller"; // figure
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%;
+    }
+  }
+}
diff --git a/sass/themes/_auto.scss b/sass/themes/_auto.scss
index 012aa9b..0c59f07 100644
--- a/sass/themes/_auto.scss
+++ b/sass/themes/_auto.scss
@@ -17,9 +17,9 @@
   --c3: #ddd; //color 3 333
   --c4: #777; //color 4 888
 
-  --a1: #f90; //accent color 1 link
-  --a2: #fb0; //accent color 2 hover,focus
-  --a3: #fb0; //accent color 3 h1-h2 hover,focus
+  --a1: #c40; //accent color 1 link
+  --a2: #e60; //accent color 2 hover,focus
+  --a3: #e60; //accent color 3 h1-h2 hover,focus
 
   --cg: #483; //ins green
   --cr: #d33; //del red
@@ -67,6 +67,10 @@
     --c2: #222; //color 2
     --c3: #333; //color 3
     --c4: #888; //color 4
+
+    --a1: #f90; //accent color 1 link
+    --a2: #fb0; //accent color 2 hover,focus
+    --a3: #fb0; //accent color 3 h1-h2 hover,focus
     }
 }
 
diff --git a/sass/themes/_light.scss b/sass/themes/_light.scss
index 127073c..1848f4e 100644
--- a/sass/themes/_light.scss
+++ b/sass/themes/_light.scss
@@ -17,9 +17,9 @@
   --c3: #ddd; //color 3 333
   --c4: #777; //color 4 888
 
-  --a1: #f90; //accent color 1 link
-  --a2: #fb0; //accent color 2 hover,focus
-  --a3: #fb0; //accent color 3 h1-h2 hover,focus
+  --a1: #c40; //accent color 1 link
+  --a2: #e60; //accent color 2 hover,focus
+  --a3: #e60; //accent color 3 h1-h2 hover,focus
 
   --cg: #483; //ins green
   --cr: #d33; //del red