Typography blades

Heading anchors #

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;

  [data-is-anchor] {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 100%;
    padding-right: 0.2ch;
    color: silver;
    text-decoration: none;
  }
  &:hover {
    [data-is-anchor] {
      visibility: visible;
    }
  }
}

List markers #

ul,
ol {
  li[data-marker]::marker {
    content: attr(data-marker) " ";
  }
}

---

Extends /picocss/pico/blob/main/scss/content/_link.scss

Link [fav]icons #

How it works

a {
  /* Helper to handle icons in links */
  > i {
    display: inline-block;
    font-style: normal;
  }

  /* Helper for favicons in links */
  &[data-has-favicon] {
    display: inline-block;

    > img {
      max-height: 1.25em;
      margin-top: calc(-0.25em / 2);
      margin-inline-end: 0.375ch; /* =3/8 */

      /* for tw-typography (.prose) */
      display: inline-block;
      margin-bottom: 0;
    }
  }
}

---