Update markup and styling for coverage report #674

hogansghost · 2022-02-21T20:43:12Z

I've tried to leave the template files alone as much as possible, beyond adding the updated class names, but this is mostly a complete update for the CSS with modern approaches with as wide support as possible. I'm not overly attached to the colours or anything, they were just tweaked to feel a little more modern.

No more horizontal scrolling for the entire document either anymore on narrower screens!

Rewrite CSS with modern standards and BEM naming for clarity within the code.
We're replacing the util classes with explicit naming to make it easier
to discern what is what.
Update colours to make use of CSS vars and tweak values.
Update markup, where possible, to modern semantic elements, updating their
class names and structure.
Replace sorting icons with ASCII characters instead of images and wrap in buttons
to make keyboard accessible for sorting.
Delete now unused graphics for sorting icons.
Remove import of unused graphics for sorting icons.
Change document wrapper functions into single function that accepts
all the other template elements as a string argument, so we no
longer need multiple .write functions and separated opening and
closing <body> functions.

- Rewrite CSS with modern standards and BEM naming for clarity within the code. We're replacing the util classes with explicit naming to make it easier to discern what is what. - Update colours to make use of CSS vars and tweak values. - Update markup, where possible, to modern semantic elements, updating their class names and structure. - Replace sorting icons with ASCII characters instead of images and wrap in buttons to make keyboard accessible for sorting. - Delete now unused graphics for sorting icons. - Remove import of unused graphics for sorting icons. - Change document wrapper functions into single function that accepts all the other template elements as a string argument, so we no longer need multiple `.write` functions and separated opening and closing `<body>` functions.