basic search implementation

quartz/components/styles/backlinks.scss

@@ -0,0 +1,22 @@
+.backlinks {
+  & > h3 {
+    font-size: 1rem;
+    margin: 0;
+  }
+
+  & > ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    & > li {
+      margin: 0.5rem 0;
+      padding: 0.25rem 1rem;
+      border: var(--lightgray) 1px solid;
+      border-radius: 5px;
+      & > a {
+        background-color: transparent;
+      }
+    }
+  }
+}

quartz/components/styles/popover.scss

@@ -23,6 +23,8 @@
     height: 20rem;
     padding: 0 1rem 1rem 1rem;
     font-weight: initial;
+    line-height: initial;
+    font-size: initial;
     border: 1px solid var(--gray);
     background-color: var(--light);
     border-radius: 5px;
@@ -30,6 +32,10 @@
     overflow: scroll;
   }
 
+  h1 {
+    font-size: 1.5rem;
+  }
+
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s ease, visibility 0.3s ease;

quartz/components/styles/search.scss

@@ -0,0 +1,134 @@
+.search {
+  min-width: 5rem;
+  max-width: 12rem;
+  flex-grow: 0.3;
+  margin: 0 1.5rem;
+
+  & > #search-icon {
+    background-color: var(--lightgray);
+    border-radius: 4px;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    & > div {
+      flex-grow: 1;
+    }
+
+    & > p {
+      display: inline;
+      padding: 0 1rem;
+    }
+
+    & svg {
+      cursor: pointer;
+      width: 18px;
+      min-width: 18px;
+      margin: 0 0.5rem;
+
+      .search-path {
+        stroke: var(--darkgray);
+        stroke-width: 2px;
+        transition: stroke 0.5s ease;
+      }
+    }
+  }
+
+  & > #search-container {
+    position: fixed;
+    z-index: 999;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: scroll;
+    display: none;
+    backdrop-filter: blur(4px);
+
+    &.active {
+      display: inline-block;
+    }
+
+    & > #search-space {
+      width: 50%;
+      margin-top: 15vh;
+      margin-left: auto;
+      margin-right: auto;
+
+      @media all and (max-width: 1200px) {
+        width: 90%;
+      }
+
+      & > * {
+        width: 100%;
+        border-radius: 5px;
+        background: var(--light);
+        box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16);
+        margin-bottom: 2em;
+      }
+
+      & > input {
+        box-sizing: border-box;
+        padding: 0.5em 1em;
+        font-family: var(--bodyFont);
+        color: var(--dark);
+        font-size: 1.1em;
+        border: 1px solid var(--lightgray);
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      & > #results-container {
+        & .result-card {
+          padding: 1em;
+          cursor: pointer;
+          transition: background 0.2s ease;
+          border: 1px solid var(--lightgray);
+          border-bottom: none;
+          width: 100%;
+
+          // normalize button props
+          font-family: inherit;
+          font-size: 100%;
+          line-height: 1.15;
+          margin: 0;
+          text-transform: none;
+          text-align: left;
+          background: var(--light);
+          outline: none;
+
+          & .highlight {
+            color: var(--secondary);
+          }
+
+          &:hover, &:focus {
+            background: var(--lightgray);
+          }
+
+          &:first-of-type {
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+          }
+
+          &:last-of-type {
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-bottom: 1px solid var(--lightgray);
+          }
+
+          & > h3 {
+            margin: 0;
+          }
+
+          & > p { 
+            margin-bottom: 0;
+          }
+        }
+      }
+
+    }
+  }
+}

quartz/components/styles/toc.scss

@@ -30,7 +30,6 @@ button#toc {
   overflow: hidden;
   max-height: none;
   transition: max-height 0.3s ease;
-  font-size: 0.9rem;
 
   & ul {
     list-style: none;