fix(blog): drop duplicated hairline and align class names

Code review nits:
- .bsearch border-bottom + .feature border-top rendered a doubled
  hairline; removed the bottom border (feature's top is sufficient).
- Renamed bsearch__input / bsearch__hint to binput / bhint to match
  the project's flat single-class convention (postrow, pdate, yr, ln).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Josh Bairstow 2026-06-02 01:25:26 +10:00
parent 8f12b3afe5
commit 8423759f03

View file

@ -8,29 +8,29 @@
<div class="bsearch">
<input
type="search"
class="bsearch__input"
class="binput"
aria-label="Search posts"
placeholder="Search the journal…"
autocomplete="off"
spellcheck="false"
/>
<span class="bsearch__hint" aria-hidden="true">Esc to clear</span>
<span class="bhint" aria-hidden="true">Esc to clear</span>
</div>
<style>
/* No border-bottom: the adjacent .feature article carries a border-top
that already separates this row from the page below. */
.bsearch {
display: flex;
align-items: baseline;
gap: 14px;
padding: clamp(14px, 2.4vh, 22px) 0;
border-top: 1px solid var(--hairline-on-dark);
border-bottom: 1px solid var(--hairline-on-dark);
}
:global(body:not(.dark)) .bsearch {
border-top-color: var(--hairline);
border-bottom-color: var(--hairline);
}
.bsearch__input {
.binput {
flex: 1;
max-width: 28ch;
background: transparent;
@ -44,19 +44,19 @@
outline: none;
transition: border-color var(--dur-base) var(--ease-out);
}
:global(body:not(.dark)) .bsearch__input {
:global(body:not(.dark)) .binput {
color: var(--fg-1);
}
.bsearch__input::placeholder {
.binput::placeholder {
color: var(--fg-on-dark-3);
}
:global(body:not(.dark)) .bsearch__input::placeholder {
:global(body:not(.dark)) .binput::placeholder {
color: var(--fg-3);
}
.bsearch__input:focus {
.binput:focus {
border-bottom-color: var(--accent);
}
.bsearch__hint {
.bhint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-on-dark-3);
@ -64,18 +64,18 @@
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
}
:global(body:not(.dark)) .bsearch__hint {
:global(body:not(.dark)) .bhint {
color: var(--fg-3);
}
.bsearch:focus-within .bsearch__hint {
.bsearch:focus-within .bhint {
opacity: 1;
}
@media (max-width: 800px) {
.bsearch__input {
.binput {
max-width: none;
}
.bsearch__hint {
.bhint {
display: none;
}
}