`font: inherit` overrides heading `--accentFont`

josh-collinsworth / sveltekit-blog-starter

A preconfigured SvelteKit static blog starter, with Sass, Markdown, MDSvex, Rehype, background preloading, and more. See the README for full details.

https://sveltekit-static-starter.netlify.app/

MIT License

419 stars 81 forks source link

Closed acidtone closed 2 years ago

acidtone commented 2 years ago

Problem: Changing the --accentFont CSS Variable does not affect heading font-family.

Root cause: Line 7 of _layout.scss is causing the headings to inherit from the body text --primaryFont CSS Variable.

Potential Solutions:

Remove Line 7. This fixes the heading font-family issue but may cause other problems?
Increase the specificity of the :where declaration on Line 3 of _typography.scss

josh-collinsworth commented 2 years ago

Good spot. Thanks for letting me know! I've changed :where to :is, which allows the heading styles to override the generic styles.

acidtone commented 2 years ago

I knew there was a scss fix for that. Not my strongest area :)