diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts index 0124e1f..5f2da36 100644 --- a/quartz/components/scripts/search.inline.ts +++ b/quartz/components/scripts/search.inline.ts @@ -20,8 +20,8 @@ type SearchType = "basic" | "tags" let searchType: SearchType = "basic" const contextWindowWords = 30 -const numSearchResults = 5 -const numTagResults = 3 +const numSearchResults = 8 +const numTagResults = 5 function highlight(searchTerm: string, text: string, trim?: boolean) { // try to highlight longest tokens first const tokenizedTerms = searchTerm diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index 5304618..fb7dd74 100644 --- a/quartz/components/styles/search.scss +++ b/quartz/components/styles/search.scss @@ -91,12 +91,22 @@ flex-direction: row; justify-content: space-between; opacity: 0; + border: 1px solid var(--lightgray); - & > * { + & > div { height: calc(75vh - 20em); background: none; - border-radius: 5px; - border: 1px solid var(--lightgray); // Border to define the box + + &:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border-right: 1px solid var(--lightgray); + } + + &:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } } @media all and (max-width: $mobileBreakpoint) { @@ -122,7 +132,6 @@ box-sizing: border-box; overflow-y: auto; font-family: inherit; - font-size: 1.1em; color: var(--dark); line-height: 1.5em; font-weight: 400; @@ -141,6 +150,7 @@ padding: 1em; cursor: pointer; transition: background 0.2s ease; + border-bottom: 1px solid var(--lightgray); width: 100%; display: block; box-sizing: border-box;