zzstoatzz.io
semantic bufo search
find-bufo.com
bufo
add credits, links, favicon, and mobile responsive layout
- add bufo favicon
- link to bufo.zone and turbopuffer hybrid search docs
- link to source code on tangled.sh
- mobile-first responsive layout (single column on mobile)
- larger images on mobile for better visibility
馃 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
static/favicon.png
static/favicon.png
This is a binary file and will not be displayed.
+55
-4
static/index.html
+55
-4
static/index.html
···
4
4
<meta charset="UTF-8">
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
<title>find bufo</title>
7
+
<link rel="icon" type="image/png" href="/static/favicon.png">
7
8
<style>
8
9
* {
9
10
margin: 0;
···
24
25
.container {
25
26
max-width: 800px;
26
27
width: 100%;
28
+
padding: 0 10px;
27
29
}
28
30
29
31
.header {
···
42
44
.subtitle {
43
45
color: rgba(255, 255, 255, 0.9);
44
46
font-size: 1.1em;
47
+
margin-bottom: 15px;
48
+
}
49
+
50
+
.info {
51
+
color: rgba(255, 255, 255, 0.85);
52
+
font-size: 0.9em;
53
+
text-align: center;
54
+
margin-top: 10px;
55
+
}
56
+
57
+
.info a {
58
+
color: rgba(255, 255, 255, 0.95);
59
+
text-decoration: none;
60
+
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
61
+
transition: border-color 0.2s;
62
+
}
63
+
64
+
.info a:hover {
65
+
border-bottom-color: rgba(255, 255, 255, 0.9);
45
66
}
46
67
47
68
.search-box {
···
94
115
95
116
.results {
96
117
display: grid;
97
-
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
98
-
gap: 20px;
118
+
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
119
+
gap: 15px;
120
+
}
121
+
122
+
@media (max-width: 600px) {
123
+
.results {
124
+
grid-template-columns: 1fr;
125
+
max-width: 400px;
126
+
margin: 0 auto;
127
+
}
128
+
129
+
h1 {
130
+
font-size: 2.5em;
131
+
}
132
+
133
+
.subtitle {
134
+
font-size: 1em;
135
+
}
136
+
137
+
.info {
138
+
font-size: 0.85em;
139
+
}
99
140
}
100
141
101
142
.bufo-card {
···
115
156
116
157
.bufo-image {
117
158
width: 100%;
118
-
height: 120px;
159
+
height: 150px;
119
160
object-fit: contain;
120
161
margin-bottom: 10px;
162
+
}
163
+
164
+
@media (max-width: 600px) {
165
+
.bufo-image {
166
+
height: 200px;
167
+
}
121
168
}
122
169
123
170
.bufo-name {
···
159
206
<div class="container">
160
207
<div class="header">
161
208
<h1>find bufo</h1>
162
-
<p class="subtitle">search the bufo zone</p>
209
+
<p class="subtitle">semantic search for <a href="https://bufo.zone" target="_blank" style="color: inherit; text-decoration: underline;">bufo.zone</a></p>
210
+
<p class="info">
211
+
<a href="https://turbopuffer.com/docs/hybrid-search" target="_blank">multimodal hybrid search</a> 路
212
+
<a href="https://git.tangled.sh/zzstoatzz.io/find-bufo" target="_blank">source</a>
213
+
</p>
163
214
</div>
164
215
165
216
<div class="search-box">