Suggestion: Design for page references

[eryc-cc]

Summary:

Suggestion to make the Page References look cooler, without the brackets, and more like a pill/card with a P inside, indicating that it's a page:

The brackets still show when you're editing the text. They just won't show on the rendered blocks.

CSS:

.page-ref {
  display: inline-flex;
  align-items: center;

  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;

  padding: .125rem .375rem;
  padding-left: .25rem;

  border: 1px solid var(--color-level-2);
  border-radius: .375rem;
  background-color: var(--color-level-1);
}
.page-ref:hover {
  border-color: var(--color-level-3);
  background-color: var(--color-level-2);
}

.page-ref:before {
  content: "P";

  font-size: .875em;
  font-weight: 600;
  line-height: 1;

  padding: .125rem .25rem;
  margin-right: 0.25rem;

  color: slategray;
  border: 1px solid var(--color-level-3);
  border-radius: .25rem;
  background: var(--color-level-2);

  transition: all 260ms ease;
}
.page-ref:hover:before {
  border-color: var(--color-level-4);
  background-color: var(--color-level-3);
}

.page-reference .bracket {
  display: none;
}

[gavinmn]

I won't be adding this to the theme because I don't feel as tho it aligns with my goals for the theme but feel free to use the @import statement + this add on in custom.css