joshbairstow/jb-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
1 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/molecules/BlogSearch.astro
View file

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