framework icon indicating copy to clipboard operation
framework copied to clipboard

support images and fonts url() in css

Open Fil opened this issue 1 year ago • 1 comments

closes #786

here's an example application (which I wouldn't necessarily recommend!) with a background image from docs/assets/ and fonts saved in docs/fonts/:

:root {
  --serif: Cardo, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-image: url("assets/paper-texture.jpeg");
}

@font-face {
  font-family: "Cardo";
  src: url("fonts/cardo.woff") format("woff");
  font-display: swap;
}

inline-css-images

You can also use static assets to modify the toggle or caret with the docs/toggle.svg file :

:root {
  --theme-toggle: url("toggle.svg");
}

~~The resources are inlined in text (for svg) base64 (for binary images and fonts), so use with some caution. Note that inlining fonts avoids FOUC, and the style.css is cached, so it's not necessarily bad. Just put these definitions at the bottom of stylesheet? The alternative is to use absolute URLs to an assets server.~~ I'm working on saving these as assets.

Fil avatar Feb 14 '24 13:02 Fil

related #423

Fil avatar Mar 04 '24 20:03 Fil

superseded by #1372 😓

Fil avatar May 20 '24 18:05 Fil