search

web-illinois / ilw-call-to-action

Call to action component for the toolkit.
MIT License
0 stars 0 forks source link

Make font formatting more explicit #1

Closed bryanjonker-illinois closed 4 weeks ago

bryanjonker-illinois commented 1 month ago

https://builder3.toolkit.illinois.edu/sample_page/index.html and https://builder3.toolkit.illinois.edu/sample_page_alternate/index.html

Can you ensure that the font stays the same in the call to action component? It looks like the page is overriding something. Thanks!

marvel-uiuc commented 1 month ago

The page CSS in the demo is more specific than the CSS in the component, so in some ways it's working as intended.

The rule overriding the color is ilw-page[illinois] main h2, which has a high specificity. I think we're better off coming up with rules on how these are handled than just increasing the specificity.

For example, the ilw-page rule could override the --ilw-heading--color variable rather than the color CSS. That way the component, which sets a different variable as the color, would retain its customization without a CSS specificity race.

bryanjonker-illinois commented 1 month ago

Note -- was happening because there was an extra <div> in the markup. Going to make the rules more generic.