framework
framework copied to clipboard
support images and fonts url() in css
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;
}
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.
related #423
superseded by #1372 😓