diff options
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/search.tsx | 46 | ||||
| -rw-r--r-- | styles/globals.css | 2 | ||||
| -rw-r--r-- | styles/navbar.css | 11 | ||||
| -rw-r--r-- | styles/search.css | 38 |
5 files changed, 94 insertions, 4 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index bc96369..62c1c9b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,6 +7,7 @@ import '../styles/navbar.css'; import '../styles/button.css'; import '../styles/image.css'; import '../styles/tags.css'; +import '../styles/search.css'; export default function Blog({ Component, pageProps }) { return <div> diff --git a/pages/search.tsx b/pages/search.tsx new file mode 100644 index 0000000..11cfe2c --- /dev/null +++ b/pages/search.tsx @@ -0,0 +1,46 @@ +import Navbar from '../components/navbar'; +import { FormEvent } from 'react'; +import { ArticleMeta } from './post/[id]'; + +import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined'; + +function SearchBar(props: { + searchFunction: (event?: FormEvent<HTMLFormElement>) => void; +}) { + return <div className="searchBar"> + <form onSubmit={props.searchFunction}> + <input className="input" placeholder="Search for posts..." autoComplete="off"/> + <button className="button" onClick={() => props.searchFunction()}><SearchOutlinedIcon/></button> + <input type="submit" style={{ display: "none" }}/> + </form> + </div> +} + +export default function SearchPage(props: { + posts: Array<{ + props: { + meta: ArticleMeta + } + }> +}) { + return <div> + <div className="centeredPage"> + <div className="titleWrapper"> + <h1>Search for posts</h1> + </div> + <div className="navAreaWrapper"> + <div className="sticky"> + <Navbar page="search"/> + </div> + </div> + <div className="contentWrapper"> + <SearchBar searchFunction={(event?: FormEvent<HTMLFormElement>) => { + event?.preventDefault(); + }}/> + </div> + </div> + </div> +} + +// grep -Por "^\[meta\]:\s+<tags>\s+\(\K(.+)(?=\)$)" posts + diff --git a/styles/globals.css b/styles/globals.css index d0e0e4b..5650240 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -64,6 +64,8 @@ h3 { font-size: 32px; } background-color: var(--fg); } +:focus { outline: none; } + @media (prefers-color-scheme: light) { .subtile { opacity: .6; diff --git a/styles/navbar.css b/styles/navbar.css index 2e10091..607c3d7 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -85,16 +85,19 @@ height: 24px; } -.navbarItem > div > svg { - vertical-align: super; -} +.navbarItem > div > svg { vertical-align: super; } @media (prefers-color-scheme: light) { .navbarItem .inner { background-color: var(--heliotrope-gray); } .navbarItem.active .inner, - .navbarItem:not(.chapter):hover .inner { + .navbarItem.link:hover .inner { color: var(--bg); background-color: var(--fg); } + + .navbarItem.pinned .inner .title { + opacity: .6; + color: var(--oxford-blue) + } } diff --git a/styles/search.css b/styles/search.css new file mode 100644 index 0000000..5a63500 --- /dev/null +++ b/styles/search.css @@ -0,0 +1,38 @@ +.searchBar { + background-color: var(--heliotrope-gray); + border-radius: 8px; + padding: 12px; +} + +.searchBar .input { + background-color: transparent; + border: 0; + + color: var(--bg); + + margin-left: 12px; + width: calc(100% - 48px - 12px); + padding: 14px 0; + + vertical-align: top; + + font-family: "Inter", sans-serif; + font-size: 16px; +} + +.searchBar .input::placeholder { + font-style: italic; + opacity: .75; + + color: var(--bg); +} + +.searchBar .button { + margin: 0; + display: inline-block !important; + line-height: 0; + min-width: unset; + background-color: var(--bg); + color: var(--heliotrope-gray) !important; +} + |