search redesing

assets/styles/misc.css

@@ -282,119 +282,30 @@ time.countdown.expired {
   }
 }
 
-#search-modal {
-  position: fixed;
-  inset: 0;
-  display: grid;
-  place-items: start center;
-  padding: clamp(1rem, 7vh, 4.5rem) 1rem 1rem;
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-  z-index: 10000;
-  transition: opacity 150ms ease, visibility 150ms ease;
-}
-
-#search-modal.is-open {
-  opacity: 1;
-  pointer-events: auto;
-  visibility: visible;
-}
-
-.search-open {
-  overflow: hidden;
-}
-
-.search-modal-backdrop {
-  position: absolute;
-  inset: 0;
-  background:
-    color-mix(in oklab, var(--bg) 34%, transparent);
-  backdrop-filter: blur(10px);
-}
-
-.search-modal-content {
+.site-actions {
   position: relative;
-  width: min(720px, 100%);
-  max-height: min(74vh, 780px);
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+.search-inline-panel {
+  position: absolute;
+  top: calc(100% + 0.55rem);
+  right: 0;
+  width: min(38rem, calc(100vw - 2rem));
+  max-height: min(64vh, 34rem);
+  display: none;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   overflow: hidden;
   background: color-mix(in oklab, var(--surface) 94%, var(--bg));
   border: 1px solid color-mix(in oklab, var(--border) 78%, var(--fg));
   border-radius: 8px;
   box-shadow:
-    0 24px 80px rgba(0, 0, 0, 0.28),
+    0 18px 56px rgba(0, 0, 0, 0.22),
     0 2px 12px rgba(0, 0, 0, 0.12);
+  z-index: 1000;
 }
 
-.search-pane-head {
+.site-actions.search-inline-open .search-inline-panel {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.8rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.search-pane-field {
-  display: grid;
-  grid-template-columns: 1.9rem minmax(0, 1fr);
-  align-items: center;
-  min-width: 0;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  color: var(--muted);
-}
-
-.search-pane-field:focus-within {
-  border-color: color-mix(in oklab, var(--accent) 58%, var(--border));
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
-}
-
-.search-pane-icon {
-  display: grid;
-  place-items: center;
-  min-height: 2.7rem;
-  font-size: 1.1rem;
-}
-
-#search-pane-input {
-  width: 100%;
-  min-width: 0;
-  min-height: 2.7rem;
-  padding: 0.45rem 0.75rem 0.45rem 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: var(--fg);
-  font: 500 1rem/1.4 var(--font-body);
-}
-
-#search-pane-input::placeholder {
-  color: var(--muted);
-}
-
-.search-pane-close {
-  display: inline-grid;
-  place-items: center;
-  width: 2.7rem;
-  height: 2.7rem;
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--surface-soft);
-  color: var(--fg);
-  cursor: pointer;
-  font-size: 1.45rem;
-  line-height: 1;
-}
-
-.search-pane-close:hover,
-.search-pane-close:focus-visible {
-  outline: 0;
-  border-color: color-mix(in oklab, var(--accent) 58%, var(--border));
-  background: var(--accent-bg);
 }
 
 .search-pane-meta {
@@ -420,13 +331,13 @@ time.countdown.expired {
 }
 
 .search-pane-results {
-  min-height: 10rem;
+  min-height: 8rem;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 0.45rem;
 }
 
-.search-modal-result {
+.search-result {
   display: grid;
   gap: 0.26rem;
   padding: 0.7rem 0.8rem;
@@ -437,27 +348,27 @@ time.countdown.expired {
   text-decoration: none;
 }
 
-.search-modal-result:hover,
-.search-modal-result.active {
+.search-result:hover,
+.search-result.active {
   background: var(--accent-bg);
   border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
   text-decoration: none;
 }
 
-.search-modal-title {
+.search-result-title {
   color: var(--fg);
   font-weight: 600;
   font-size: 0.95rem;
   line-height: 1.25;
 }
 
-.search-modal-preview {
+.search-result-preview {
   color: var(--muted);
   font-size: 0.82rem;
   line-height: 1.35;
 }
 
-.search-modal-path {
+.search-result-path {
   color: color-mix(in oklab, var(--muted) 82%, var(--accent));
   font-size: 0.72rem;
   line-height: 1.25;
@@ -501,20 +412,45 @@ mark {
   border-radius: 3px;
 }
 
-.search-modal-result.active mark {
+.search-result.active mark {
   background: rgba(255, 230, 150, 0.9);
 }
 
+@media (max-width: 700px) {
+  .site-actions.search-inline-open {
+    flex-wrap: wrap;
+  }
+
+  .site-actions.search-inline-open .site-search {
+    display: block;
+    order: 1;
+    flex: 1 1 calc(100% - 2.75rem);
+    min-width: 0;
+  }
+
+  .site-actions.search-inline-open #search-input {
+    display: block;
+  }
+
+  .site-actions.search-inline-open #search-btn,
+  .site-actions.search-inline-open .theme-toggle {
+    order: 2;
+  }
+
+  .search-inline-panel {
+    position: static;
+    order: 3;
+    flex: 1 1 100%;
+    width: 100%;
+    max-height: min(58vh, 30rem);
+  }
+
+  .search-pane-results {
+    min-height: 7rem;
+  }
+}
+
 @media (max-width: 560px) {
-  #search-modal {
-    place-items: start stretch;
-    padding: 0.75rem;
-  }
-
-  .search-modal-content {
-    max-height: calc(100vh - 1.5rem);
-  }
-
   .search-pane-meta {
     align-items: flex-start;
     flex-direction: column;