Robert Birming

Footnote styles

An add-on that styles Bear's built-in footnotes with a top border, muted text, and tighter spacing. Keeps them readable without pulling attention from the main content.1

Preview

This sentence has a footnote.2

How to use

Bear handles footnotes automatically when you use the [^1] syntax in your posts. This add-on styles the output.

Markup

This sentence has a footnote.[^1]

[^1]: And here is the footnote text.

Styles

/* Footnote styles | robertbirming.com */
.footnotes {
  margin-block-start: var(--space-block);
  padding-block-start: 1.2rem;
  font-size: var(--font-small);
  color: var(--muted);
  border-block-start: 1px solid var(--border);
}

.footnotes ol {
  padding-inline-start: 1.5rem;
}

.footnotes li {
  margin-block-end: 0.4em;
}

.footnotes p {
  display: inline;
  margin: 0;
}

.footnote-ref a {
  text-decoration: none;
  font-feature-settings: "tnum";
}

.footnote {
  margin-inline-start: 0.2em;
  text-decoration: none;
}

Want more? Check out the add-ons. Happy blogging, and don't forget the small print.

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

  2. And here is the footnote preview text.↩