Robert Birming

Blog search styles

These styles make the Bear blog search plugin feel like a natural part of your blog rather than a default input dropped onto the page.1

Preview

How to use

Add the blog search plugin script to your footer (Dashboard → Settings → Header and footer directives), then add the styles below to your theme. You now have a simple way for readers to search through your blog post titles.

Styles

/* Blog search | robertbirming.com */
body.blog #searchInput {
  width: min(30rem, 100%);
  margin-block: var(--space-block);
  padding-block: 0.65em;
  padding-inline: 0.85em;
  font: inherit;
  letter-spacing: inherit;
  appearance: none;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

body.blog #searchInput:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--link) 45%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent);
}

@media (hover: hover) {
  body.blog #searchInput:hover {
    border-color: color-mix(in srgb, var(--border) 60%, var(--text));
  }
}

body.blog #searchInput::placeholder {
  color: var(--muted);
}

Want more? Check out all available Bearming add-ons.

Happy blogging, may your readers never search in vain.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩