report: responsive styles

[paulirish]

This is the lighthouse side of some work for Lightsights.

changes

• 2 columns squeeze to 1. rename column classes to be more general]
• drop the left padding on audit details always. even when we're in a wide viewport
• updated icons for metrics & diagnostics
• filmstrip responsiveness
• top nav score headers dont squish so much anymore.
• a few other small things

Demo:

https://bitter-care.surge.sh/cnn.html
https://bitter-care.surge.sh/z.devtools.cnn.html

This plus some more PSI styles gives the.. Lightsights report:
https://goto.google.com/anxlo (🔒 googlers only)

[paulirish]

cc @hwikyounglee take a look at both. :)

[wardpeet]

feeling left out here @paulirish 😛

was just wondering if there is any browser list that lightsights should support?

[paulirish]

Updated the demo URLs. The PSI one gets a fix to the dancing width bug that Rui noticed.

@hwikyounglee any feedback from your side?

---

later: hwi hooked me up with https://paste.googleplex.com/6062741227831296

[paulirish]

Revised styles applied. Most noticeably there are fewer horizontal rules in the report (between passed audits/notapplicable) and between perf/pwa/a11y categories. Also some whitespace adjustments.

updated links

https://bitter-care2.surge.sh/cnn.html
https://bitter-care2.surge.sh/z.devtools.cnn.html

Lightsights report:
https://goto.google.com/fhofqb (🔒 googlers only)

[paulirish]

@brendankenny anything stand out to you?

[brendankenny]

LGTM!