Robert Birming

Reply via email

A simple way for readers to respond to your posts. No icons, no extra options, just a link at the end of each post.1

Preview

Reply to this post

How to use

Add the markup to the end of your posts. If you prefer not to add it manually each time, you can paste the code into your post template (Bear dashboard → Posts → Edit template). Remember to replace the email address with your own.

Markup

<div class="reply-email">
  <a href="mailto:you@example.com?subject=Re:%20{{ post_title }}">Reply to this post.</a>
</div>

Styles

/* Reply via email | robertbirming.com */
.reply-email {
  margin-block: var(--space-block);
}

.reply-email a {
  display: inline-block;
  padding-block: 0.4em;
  padding-inline: 1em;
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
  background: color-mix(in srgb, var(--link) 6%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--link) 18%, var(--bg));
  border-radius: var(--radius);
}

.reply-email a: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) {
  .reply-email a:hover {
    background: color-mix(in srgb, var(--link) 10%, var(--bg));
    border-color: color-mix(in srgb, var(--link) 28%, var(--bg));
  }
}

Want more? Check out the Bear library.

Happy blogging, and happy replying.

  1. This add-on is built for Bearming. Using a different theme? Add the Bearming tokens to make it work with your setup.↩