diff options
| author | Loek Le Blansch <loek@pipeframe.xyz> | 2025-01-25 11:56:23 +0100 |
|---|---|---|
| committer | Loek Le Blansch <loek@pipeframe.xyz> | 2025-01-25 11:56:23 +0100 |
| commit | f509e410bca55ff04b79b38a73e3751eff848c95 (patch) | |
| tree | 20a4ba126d57512affbc06ffc06df69cfc4e5706 | |
| parent | c782351577faa451edb0eb386694d9db211200f8 (diff) | |
add search bar to posts
| -rw-r--r-- | _includes/posts.html | 11 | ||||
| -rw-r--r-- | _sass/media.scss | 2 | ||||
| -rw-r--r-- | _sass/theme.scss | 15 | ||||
| -rw-r--r-- | posts/style.scss | 26 | ||||
| -rw-r--r-- | readme.md | 1 |
5 files changed, 52 insertions, 3 deletions
diff --git a/_includes/posts.html b/_includes/posts.html index 5385d1f..05eebe7 100644 --- a/_includes/posts.html +++ b/_includes/posts.html @@ -1,4 +1,12 @@ -<table class="plainlink" width="100%"> +<link rel="stylesheet" href="style.css"> + +<form id="search" method="get" action="https://google.com/search"> + <input type="text" placeholder="search" name="q" spellcheck="false" autocomplete="off"> + <input type="hidden" name="q" value="site:{{ site.domain }}"> + <input type="submit"> +</form> + +<table id="posts" class="plainlink"> <tr> <th><a href="by-date" class="{% if include.sort == "date" %}sortcolumn{% endif %}">date</a></th> <th><a href="by-title" class="{% if include.sort == "title" %}sortcolumn{% endif %}">title</a></th> @@ -11,3 +19,4 @@ </tr> {% endfor %} </table> + diff --git a/_sass/media.scss b/_sass/media.scss index a3fedea..d254674 100644 --- a/_sass/media.scss +++ b/_sass/media.scss @@ -11,7 +11,7 @@ } @media only screen and (prefers-color-scheme: dark) { - .invert { + .invert, input, button { background-color: #222; color: inherit; } diff --git a/_sass/theme.scss b/_sass/theme.scss index 82e54d6..b462301 100644 --- a/_sass/theme.scss +++ b/_sass/theme.scss @@ -94,3 +94,18 @@ table { list-style-type: disclosure-open; } +*:focus { outline: none; } + +input, button { + border: none; + background: #ccc; + color: inherit; + + box-sizing: content-box; + height: 20px; + line-height: 20px; + display: inline-block; + padding: 2px 8px; +} +input[type=submit], buttom { cursor: pointer; } + diff --git a/posts/style.scss b/posts/style.scss new file mode 100644 index 0000000..532f491 --- /dev/null +++ b/posts/style.scss @@ -0,0 +1,26 @@ +--- +--- + +// fill width +#posts { + table-layout: auto; + width: 100%; +} + +// fit date column +#posts td:nth-child(1), +#posts th:nth-child(1) { + white-space: nowrap; + width: 1%; +} + +// dates with table numerals +#posts td:nth-child(1) { font-feature-settings: "tnum"; } + +#search { + display: flex; + gap: 6px; + + margin-bottom: 24px; +} +#search input[type=text] { flex-grow: 1; } @@ -5,5 +5,4 @@ Live at <https://blog.pipeframe.xyz> ## TODO - tag index -- search bar or something |