More Ninja CSS (experimental add-ons)

/npm/@anyblades/blades@3/css/ninja.min.css

super   and   subheadings


Parent page Page title Subtitle

How it works:

sup[style] {
  display: block;
  font-size: min(50%, 0.75rem);
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
sub[style] {
  display: block;
  line-height: 1.1;
  bottom: 0;
  font-weight: 300;
  opacity: 75%;

  &:where(h1 > *) {
    font-size: 50%;
  }
}

Teasers

Blades CSS

Fully compatible and actively maintained successor to Pico CSS.

How it works:

a[role="button"]:has(h1, h2, h3, h4, h5, h6) {
  text-align: start;
  border-width: 1px 0 0 1px;
  margin: 0 0 0.5rem -1rem;
}

.optional content

How it works:

.opt:not(.does-not-exist) {
  @media (width < 1024px) {
    display: none;
  }
}

Nicer GitHub favicons

/anyblades/blades

How it works:

img[src*="?domain=github.com&"] {
  border-radius: 50%;

  @media (prefers-color-scheme: dark) {
    filter: invert(1);
  }
}
```*/