OddSite 4.0.0

Replaced Media Defaults

audio, canvas, iframe, video

scss
audio,
canvas,
iframe,
video {
  margin-bottom: var(--newline);
}

Replaced media elements get a new-line of spacing after.

img

scss
img {
  filter: brightness(var(--img-bright, var(--img-bright--default, 1)))
    contrast(var(--img-contrast, var(--img-contrast--default, 1)));
}

Adjust image brightness depending on mode & contrast

audio

scss
audio {
  width: 100%;
}

Audio is full-width by default.

svg

scss
svg {
  fill: var(--fill, currentColor);
  padding: 1px;
}

Unless otherwise defined, embedded SVGs will take on the color of surrounding content. Adding 1px padding helps with overflow clipping errors on rounded paths.

[data-face='miriam']

scss
[data-face='miriam'] {
  --mia-svg-animate: none;
  --mia-svg-eyes: darkslategray;
}

The “miriam” icon has a few special features, including a potential animation, and the ability to change eye colors (for light/dark modes). We may need to extend this to all face icons…