[live-demo] Plugin styles should be more specific than default styles (defined in style/partials/code.css)

[DmitrySharabin]

This PR addresses the issue of low text contrast on live demo slides (when projecting them). Turns out it's a specificity issue: text color should be canvas

inspire.js/plugins/live-demo/plugin.css

Line 13 in 2ede9e5

color: canvas;

instead of the inherited one

inspire.js/style/partials/code.css

Line 5 in 2ede9e5

color: inherit;

Before

After

[netlify]

✅ Deploy Preview for inspirejs ready!

Name	Link
🔨 Latest commit	bd12f7a
🔍 Latest deploy log	https://app.netlify.com/sites/inspirejs/deploys/67adf2657a15110008771791
😎 Deploy Preview	https://deploy-preview-170--inspirejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[LeaVerou]

I think the :where() was intentional, so that host code can override it easily. I'm not sure removing it is the right fix, perhaps the right fix is to reduce the overeager specificity of whatever was overriding it.

[DmitrySharabin]

I think the :where() was intentional, so that host code can override it easily. I'm not sure removing it is the right fix, perhaps the right fix is to reduce the overeager specificity of whatever was overriding it.

Will try. Thanks!

[LeaVerou]

Also, even wrt the issue of the live demo styling, that is not a correct fix. Check out the lecture videos for what is should look like.