Inline styles - Githubissues

readthedocs / ext-theme

Read the Docs drop in replacement site templates

3 stars 1 forks source link

Inline styles #395

Open stsewd opened 2 weeks ago

stsewd commented 2 weeks ago

I'm in the process of adding a strict content security policy. I'm going to use this issue to list inline styles, maybe other inlines I find.

https://github.com/readthedocs/ext-theme/blob/b12ae41d49c1e7ef06b5177450a0c18884fe49d4/readthedocsext/theme/templates/includes/header.html#L48-L48

Actually, there are a couple of inline styles, just grepping for style= over html files returns lots of results, is that on purpose or just templates that we still need to migrate?

rg 'style=' **/*.html

agjohnson commented 1 week ago

Ah yes, good catch, I didn't think about removing these as part of the CSP work.

We probably have a couple versions of this inline style:

display: none for when a KO element needs to start off hidden. I've since been using the CSS classes ko hidden instead, but this does take flipping some of the observable logic.
There are a few icons tuned for display with FA rules. These could be custom CSS classes instead, or maybe FA has a newer approach. In some cases, we might just override .fad.fa-bars with the --fa-secondary-opacity var/rule.