LeaVerou
[live-demo] Plugin styles should be more specific than default styles (defined in `style/partials/code.css`)
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 https://github.com/LeaVerou/inspire.js/blob/2ede9e5b8aca57c252cefa1d218b153dc3ac15ff/plugins/live-demo/plugin.css#L13 instead of the inherited one https://github.com/LeaVerou/inspire.js/blob/2ede9e5b8aca57c252cefa1d218b153dc3ac15ff/style/partials/code.css#L5
Before
After
Deploy Preview for inspirejs ready!
| Name | Link |
|---|---|
| Latest commit | bd12f7a6820552f1cc9baa641bd800de5f881cbf |
| 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.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
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!
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.
