Wave changes

assets/styles/misc.css

@@ -232,21 +232,23 @@ nav {
   gap: 0.5rem;
 }
 
-/* Push search to the far right */
+/* SEARCH */
 #search-input,
 #search-btn {
   margin-left: auto;
 }
 
-/* Input styling */
 #search-input {
   width: 12rem;
   padding: 0.3rem 0.5rem;
   font-size: 0.9rem;
   border: 1px solid var(--border-color, #ccc);
   border-radius: 4px;
-  background: var(--bg-color, #fff);
-  color: var(--text-color, #000);
+  font-family: var(--font-body);
+  font-weight: 300;
+  background-color: var(--kb-card-bg);
+  color: var(--fg);
+
 }
 
 /* Button styling */
@@ -363,3 +365,58 @@ mark {
 .search-result.active mark {
   background: rgba(255, 230, 150, 0.9);
 }
+
+
+/* Table of contents */
+#table-of-contents{
+  float: left;
+  width: var(--margin);
+  /* margin-left: calc(-1 * ( (95vw - var(--content)) / 2 )); */
+  margin-left: calc(-1 * ((100vi - var(--content)) / 2));
+  padding-left: var(--gutter);
+  box-sizing: border-box;
+
+  position: sticky;
+  top: 5.5rem;
+  max-height: calc(100vh - 6rem);
+  overflow: auto;
+
+  font-size: .95rem;
+  border-right: 1px solid var(--border, #d7d7d7);
+  padding-top: .25rem;
+}
+
+#table-of-contents > h2{
+  margin: 0 0 .5rem;
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: .02em;
+  color: var(--muted, #666);
+}
+
+#text-table-of-contents ul{
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+#text-table-of-contents li{
+  margin: .25rem 0;
+}
+#text-table-of-contents a{
+  text-decoration: none;
+}
+#text-table-of-contents a:hover{
+  text-decoration: underline;
+}
+
+#text-table-of-contents ul ul { margin-left: .75rem; opacity: .9; }
+
+h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
+
+#text-table-of-contents a.is-active{
+    /* font-weight: 700; */
+    text-decoration: underline;
+    background-color: var(--active-toc);
+    /* border: 1px solid var(--border, #ccc); */
+}
+