| | |
|---|
| | | .centered { |
|---|
| | | margin-top: 30vh; |
|---|
| | | } |
|---|
| | | |
|---|
| | | header { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | & > nav { |
|---|
| | | @media all and (max-width: 600px) { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > a { |
|---|
| | | margin-left: 2em; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > .spacer { |
|---|
| | | flex: 1 1 auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > svg { |
|---|
| | | cursor: pointer; |
|---|
| | | width: 18px; |
|---|
| | | min-width: 18px; |
|---|
| | | margin: 0 1em; |
|---|
| | | |
|---|
| | | &:hover .search-path { |
|---|
| | | stroke: var(--tertiary); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-path { |
|---|
| | | stroke: var(--gray); |
|---|
| | | stroke-width: 2px; |
|---|
| | | transition: stroke 0.5s ease; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | #search-container { |
|---|
| | | position: fixed; |
|---|
| | | z-index: 9999; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | width: 100vw; |
|---|
| | | height: 100vh; |
|---|
| | | display: none; |
|---|
| | | backdrop-filter: blur(4px); |
|---|
| | | -webkit-backdrop-filter: blur(4px); |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | width: 50%; |
|---|
| | | margin-top: 15vh; |
|---|
| | | margin-left: auto; |
|---|
| | | margin-right: auto; |
|---|
| | | |
|---|
| | | @media all and (max-width: 1200px) { |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > * { |
|---|
| | | width: 100%; |
|---|
| | | border-radius: 4px; |
|---|
| | | 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: Inter, sans-serif; |
|---|
| | | color: var(--dark); |
|---|
| | | font-size: 1.1em; |
|---|
| | | border: 1px solid var(--outlinegray); |
|---|
| | | |
|---|
| | | &:focus { |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > #results-container { |
|---|
| | | & > .result-card { |
|---|
| | | padding: 1em; |
|---|
| | | cursor: pointer; |
|---|
| | | transition: background 0.2s ease; |
|---|
| | | border: 1px solid var(--outlinegray); |
|---|
| | | border-bottom: none; |
|---|
| | | |
|---|
| | | &:hover { |
|---|
| | | background: rgba(180, 180, 180, 0.15); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &: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(--outlinegray); |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > h3, & > p { |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & .search-highlight { |
|---|
| | | background-color: #afbfc966; |
|---|
| | | padding: 0.05em 0.2em; |
|---|
| | | border-radius: 3px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
