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));
  }
}

Happy blogging, and happy replying.

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

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