More Ninja CSS (experimental add-ons)

/npm/@anyblades/blades@3/css/blades.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);
  }
}

Dark auto

.dark-auto automatically creates a simple dark version of any element:

Look how cool 🔥🕷️🐦‍⬛🐄🦓 can look in the dark!

How it works:

/* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
:root {
  --blades-dark-filter: invert(100%) hue-rotate(180deg);
}
.dark-auto {
  /* Dark color scheme (Auto) */
  @media (prefers-color-scheme: dark) {
    filter: var(--blades-dark-filter);
  }
  /* Dark color scheme (Forced) */
  &[data-theme="dark"],
  &:where([data-theme="dark"] *) {
    filter: var(--blades-dark-filter);
  }
}

Faded

.faded reduces the opacity of an element:

Hover to unfade me!

How it works:

.faded {
  opacity: 50%;

  &:hover {
    opacity: 87.5%;
  }
}