From f509e410bca55ff04b79b38a73e3751eff848c95 Mon Sep 17 00:00:00 2001
From: Loek Le Blansch <loek@pipeframe.xyz>
Date: Sat, 25 Jan 2025 11:56:23 +0100
Subject: add search bar to posts

---
 _includes/posts.html | 11 ++++++++++-
 _sass/media.scss     |  2 +-
 _sass/theme.scss     | 15 +++++++++++++++
 posts/style.scss     | 26 ++++++++++++++++++++++++++
 readme.md            |  1 -
 5 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 posts/style.scss

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; }
diff --git a/readme.md b/readme.md
index 3ebfe4d..4b88963 100644
--- a/readme.md
+++ b/readme.md
@@ -5,5 +5,4 @@ Live at <https://blog.pipeframe.xyz>
 ## TODO
 
 - tag index
-- search bar or something
 
-- 
cgit v1.2.3