zzstoatzz.io
search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
fix: move search syntax help to header, drop confusing prefix example
move [?] button from search box to header row as a subtle circled ?
next to [src] and stats. removes the "pyth → prefix on last word"
example that was unclear — tooltip now shows 3 rows: OR between terms,
phrase match, explicit OR.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+17
-16
site/index.html
+17
-16
site/index.html
···
125
125
.search-box {
126
126
display: flex;
127
127
gap: 0.5rem;
128
-
margin-bottom: 0.5rem;
128
+
margin-bottom: 0.5rem; /* reduced to accommodate syntax-help popover */
129
129
}
130
130
131
131
.syntax-help-btn {
132
-
padding: 0.5rem 0.5rem;
133
132
font-family: monospace;
134
-
font-size: 11px;
135
-
background: var(--bg-subtle);
136
-
border: 1px solid var(--border-focus);
137
-
color: var(--text-dim);
133
+
font-size: 10px;
134
+
background: none;
135
+
border: 1px solid var(--text-muted);
136
+
color: var(--text-muted);
138
137
cursor: pointer;
139
-
flex-shrink: 0;
138
+
border-radius: 50%;
139
+
width: 14px;
140
+
height: 14px;
141
+
display: inline-flex;
142
+
align-items: center;
143
+
justify-content: center;
144
+
padding: 0;
145
+
vertical-align: middle;
146
+
margin-left: 2px;
140
147
}
141
148
142
-
.syntax-help-btn:hover { color: var(--text-secondary); }
149
+
.syntax-help-btn:hover { color: var(--text-secondary); border-color: var(--text-secondary); }
143
150
.syntax-help-btn.active { color: #1B7340; border-color: #1B7340; }
144
151
145
152
.syntax-help {
···
715
722
width: 100%;
716
723
}
717
724
718
-
.search-box #search-btn {
725
+
.search-box button {
719
726
width: 100%;
720
-
}
721
-
722
-
.search-box .syntax-help-btn {
723
-
width: auto;
724
727
}
725
728
726
729
/* result card mobile tweaks */
···
791
794
</head>
792
795
<body>
793
796
<div class="container">
794
-
<h1><a href="/" class="title">pub search</a> <span class="by">by <a href="https://bsky.app/profile/zzstoatzz.io" target="_blank">@zzstoatzz.io</a></span> <a href="https://tangled.sh/@zzstoatzz.io/leaflet-search" target="_blank" class="src">[src]</a> <a id="header-stats" class="stats-link"></a></h1>
797
+
<h1><a href="/" class="title">pub search</a> <span class="by">by <a href="https://bsky.app/profile/zzstoatzz.io" target="_blank">@zzstoatzz.io</a></span> <a href="https://tangled.sh/@zzstoatzz.io/leaflet-search" target="_blank" class="src">[src]</a> <button class="syntax-help-btn" id="syntax-help-btn" title="search syntax">?</button> <a id="header-stats" class="stats-link"></a></h1>
795
798
796
799
<div class="search-box">
797
800
<input type="text" id="query" placeholder="search content..." autofocus>
798
801
<button id="search-btn">search</button>
799
-
<button class="syntax-help-btn" id="syntax-help-btn" title="search syntax">[?]</button>
800
802
</div>
801
803
802
804
<div class="syntax-help" id="syntax-help">
803
805
<div class="syntax-row"><span class="syntax-example"><code>cat dog</code></span><span class="syntax-desc">OR between terms</span></div>
804
806
<div class="syntax-row"><span class="syntax-example"><code>"exact phrase"</code></span><span class="syntax-desc">phrase match</span></div>
805
-
<div class="syntax-row"><span class="syntax-example"><code>pyth</code></span><span class="syntax-desc">prefix on last word</span></div>
806
807
<div class="syntax-row"><span class="syntax-example"><code>a OR b</code></span><span class="syntax-desc">explicit OR</span></div>
807
808
</div>
808
809