bring back old style search box

quartz/components/styles/search.scss

@@ -2,14 +2,11 @@
 
 .search {
   min-width: fit-content;
-  // min-width: auto;
+  max-width: 14rem;
-  max-width: 18px; // 14rem
   flex-grow: 0.3;
-  padding-right: 1rem;
 
   & > #search-icon {
-    // background-color: var(--lightgray);
+    background-color: var(--lightgray);
-    background-color: transparent;
     border-radius: 4px;
     height: 2rem;
     display: flex;
@@ -62,13 +59,9 @@
       margin-left: auto;
       margin-right: auto;
 
-      @media all and (max-width: $fullPageWidth) {
-        width: 90%;
-      }
-
       & > * {
         width: 100%;
-        border-radius: 7px;
+        border-radius: 5px;
         background: var(--light);
         box-shadow:
           0 14px 50px rgba(27, 33, 48, 0.12),
@@ -90,85 +83,71 @@
       }
 
       & > #search-layout {
-        display: none;
-        flex-direction: row;
-        border: 1px solid var(--lightgray);
-        flex: 0 0 100%;
-        box-sizing: border-box;
-
-        &.display-results {
         display: flex;
-        }
+        flex-direction: row;
-
+        opacity: 0;
-        &[data-preview] > #results-container {
+        border: 1px solid var(--lightgray);
-          flex: 0 0 min(30%, 450px);
-        }
-
-        @media all and (min-width: $tabletBreakpoint) {
-          &[data-preview] {
-            & .result-card > p.preview {
-              display: none;
-            }
 
         & > div {
+          // vh - #search-space.margin-top
+          height: calc(75vh - 12vh);
+          background: none;
+
           &:first-child {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
             border-right: 1px solid var(--lightgray);
-                border-top-right-radius: unset;
-                border-bottom-right-radius: unset;
           }
 
           &:last-child {
-                border-top-left-radius: unset;
+            border-top-right-radius: 5px;
-                border-bottom-left-radius: unset;
+            border-bottom-right-radius: 5px;
           }
         }
-          }
-        }
-
-        & > div {
-          height: calc(75vh - 12vh);
-          border-radius: 5px;
-        }
 
         @media all and (max-width: $tabletBreakpoint) {
-          & > #preview-container {
+          display: block;
+          & > *:not(#results-container) {
             display: none !important;
           }
 
-          &[data-preview] > #results-container {
+          & > #results-container {
             width: 100%;
             height: auto;
-            flex: 0 0 100%;
           }
         }
 
         & .highlight {
-          background: color-mix(
+          background: color-mix(in srgb, var(--tertiary) 60%, transparent);
-            in srgb,
-            var(--tertiary) 60%,
-            rgba(255, 255, 255, 0)
-          );
           border-radius: 5px;
-          scroll-margin-top: 2rem;
         }
 
         & > #preview-container {
           display: block;
+          box-sizing: border-box;
           overflow: hidden;
-          font-family: inherit;
-          color: var(--dark);
-          line-height: 1.5em;
-          font-weight: $normalWeight;
-          overflow-y: auto;
-          padding: 0 2rem;
 
           & .preview-inner {
             margin: 0 auto;
-            width: min($pageWidth, 100%);
+            padding: 1em;
+            height: 100%;
+            width: 100%;
+            box-sizing: border-box;
+            overflow-y: auto;
+            font-family: inherit;
+            color: var(--dark);
+            line-height: 1.5em;
+            font-weight: 400;
+            background: var(--light);
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+            box-shadow:
+              0 14px 50px rgba(27, 33, 48, 0.12),
+              0 10px 30px rgba(27, 33, 48, 0.16);
           }
 
-          a[role="anchor"] {
+          a.internal {
-            background-color: transparent;
+            background-color: none;
           }
         }
 
@@ -176,7 +155,6 @@
           overflow-y: auto;
 
           & .result-card {
-            overflow: hidden;
             padding: 1em;
             cursor: pointer;
             transition: background 0.2s ease;
@@ -192,6 +170,7 @@
             margin: 0;
             text-transform: none;
             text-align: left;
+            background: var(--light);
             outline: none;
             font-weight: inherit;
 
@@ -205,23 +184,41 @@
               margin: 0;
             }
 
-            & > ul.tags {
+            & > ul > li {
+              margin: 0;
+              display: inline-block;
+              white-space: nowrap;
+              margin: 0;
+              overflow-wrap: normal;
+            }
+
+            & > ul {
+              list-style: none;
+              display: flex;
+              padding-left: 0;
+              gap: 0.4rem;
+              margin: 0;
               margin-top: 0.45rem;
-              margin-bottom: 0;
+              box-sizing: border-box;
+              overflow: hidden;
+              background-clip: border-box;
             }
 
             & > ul > li > p {
               border-radius: 8px;
               background-color: var(--highlight);
-              padding: 0.2rem 0.4rem;
+              overflow: hidden;
-              margin: 0 0.1rem;
+              background-clip: border-box;
-              line-height: 1.4rem;
+              padding: 0.03rem 0.4rem;
-              font-weight: $boldWeight;
+              margin: 0;
               color: var(--secondary);
-
+              opacity: 0.85;
-              &.match-tag {
-                color: var(--tertiary);
             }
+
+            & > ul > li > .match-tag {
+              color: var(--tertiary);
+              font-weight: bold;
+              opacity: 1;
             }
 
             & > p {

quartz/styles/base.scss

@@ -1,11 +1,7 @@
 @use "./variables.scss" as *;
 @use "./syntax.scss";
 @use "./callouts.scss";
-// @use "custom";
 
-* {
-  scrollbar-width: thin;
-}
 html {
   scroll-behavior: smooth;
   text-size-adjust: none;
@@ -47,20 +43,8 @@ ul,
 .math {
   color: var(--darkgray);
   fill: var(--darkgray);
-  hyphens: auto;
-}
-
-p,
-ul,
-text,
-a,
-li,
-ol,
-ul,
-.katex,
-.math {
   overflow-wrap: anywhere;
-  /* tr and td removed from list of selectors for overflow-wrap, allowing them to use default 'normal' property value */
+  hyphens: auto;
 }
 
 .math {
@@ -69,12 +53,8 @@ ul,
   }
 }
 
-strong {
-  font-weight: $semiBoldWeight;
-}
-
 a {
-  font-weight: $semiBoldWeight;
+  font-weight: $boldWeight;
   text-decoration: none;
   transition: color 0.2s ease;
   color: var(--secondary);
@@ -95,11 +75,6 @@ a {
       border-radius: 0;
       padding: 0;
     }
-    &.tag-link {
-      &::before {
-        content: "#";
-      }
-    }
   }
 
   &.external .external-icon {
@@ -179,7 +154,7 @@ a {
       position: fixed;
       @media all and (max-width: $fullPageWidth) {
         position: initial;
-        flex-direction: column;
+        flex-direction: row;
         padding: 0;
         width: initial;
         margin-top: 2rem;
@@ -284,11 +259,13 @@ thead {
   font-weight: revert;
   margin-bottom: 0;
 
-  article > & > a[role="anchor"] {
+  article > & > a {
     color: var(--dark);
+    &.internal {
       background-color: transparent;
     }
   }
+}
 
 h1,
 h2,
@@ -497,10 +474,6 @@ video {
   flex: 1 1 auto;
 }
 
-div:has(> .overflow) {
-  position: relative;
-}
-
 ul.overflow,
 ol.overflow {
   max-height: 400;
@@ -533,8 +506,3 @@ ol.overflow {
     padding-left: 1rem;
   }
 }
-
-.katex-display {
-  overflow-x: auto;
-  overflow-y: hidden;
-}