release search

namachan10777 · Jun 25, 2024 · d749423 · d749423
1 parent 91d1c92
commit d749423
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/src/components/composite/search-dialog.astro b/src/components/composite/search-dialog.astro
@@ -4,27 +4,32 @@ import { Icon } from "astro-icon/components";
 
 <search-dialog>
   <dialog>
-    <search>
+    <search class="contents-root">
       <search class="search-box">
         <Icon name="iconoir:search" class="search-icon" />
         <input type="text" class="text-input" />
         <button class="close-button">
           <Icon name="iconoir:xmark" class="close-icon" />
         </button>
       </search>
-      <nav>
+      <nav class="founds-container">
         <ul class="founds"></ul>
       </nav>
     </search>
   </dialog>
 </search-dialog>
 
 <style>
-  .search-box {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
+  .contents-root {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
+    column-gap: 1rem;
+    row-gap: 2rem;
+  }
+
+  .search-box {
+    display: contents;
     width: 100%;
   }
 
@@ -39,8 +44,6 @@ import { Icon } from "astro-icon/components";
   }
 
   .close-button {
-    border-radius: 999px;
-    background-color: var(--bg-mask);
     opacity: 0.7;
     width: 1.5rem;
     height: 1.5rem;
@@ -58,19 +61,36 @@ import { Icon } from "astro-icon/components";
     height: 2rem;
     color: var(--fg-normal);
     width: 100%;
+    border-bottom: solid var(--fg-hr) 1px;
+  }
+
+  .text-input:focus {
+    border-bottom: solid var(--fg-weak) 1px;
+  }
+
+  .founds-container {
+    display: contents;
   }
 
   .founds {
-    display: flex;
+    display: contents;
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.5rem;
     padding-block: 1rem;
   }
 
+  .founds :global(li) {
+    grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
   .founds :global(.found-title) {
     font-size: var(--font-size-lg);
     color: var(--fg-link);
     font-weight: bold;
+    text-decoration: underline;
   }
 
   .founds :global(.found-excerpt) {
@@ -244,6 +264,7 @@ import { Icon } from "astro-icon/components";
 
     #closeHandler() {
       this.#textInput.value = "";
+      this.#founds.replaceChildren();
       document.body.style.position = "";
       window.scrollTo({
         top: this.#scrollY,

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -83,7 +83,10 @@ function breadcrumbsJsonLD(path: PathFragment[]): string {
 <html lang="ja">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, interactive-widget=overlays-content"
+    />
     <meta name="generator" content={Astro.generator} />
     <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />
     <slot name="head" />