Blog post redesign, center content, and about-page redesign

[schwartzadev]

Closes #1109

Merge in changes to centering content from #1130
Merge in changes to about page #1121

Pre-merge

• Choose and implement behavior for copying a link
• Mock feature image styles, like blog/its-not-just-testing

[netlify]

This is a preview version of the site.

Built with commit ad16f87

https://deploy-preview-1119--upbeat-lovelace-3e9fff.netlify.app

[calibre-analytics]

Comparing Blog post redesign, center content, and about-page redesign Snapshot #25 to median since last deploy of The COVID Tracking Project.

	Performance	FCP?	TTI?
Overall Median across all pages and test profiles	72  from 76	910ms  from 603ms	5.69s  from 4.46s
Chrome Desktop Chrome • Cable	76  from 79	680ms  from 320ms	2.75s  from 2.3s
MotoG4, 3G connection Motorola Moto G4 • Regular 3G	68  from 75	1.21s  from 1.02s	8.16s  from 7.33s

2 pages tested

 Home

Browser previews

Chrome Desktop	MotoG4, 3G connection

Most significant changes

	Value	Budget
Total JSON size in bytes MotoG4, 3G connection	144 Bytes  from 56.7 KB
Total JSON size in bytes Chrome Desktop	113 KB  from 165 KB

 Data page

Browser previews

Chrome Desktop	MotoG4, 3G connection

Most significant changes

	Value	Budget
First Contentful Paint Chrome Desktop	938ms  from 298ms
Largest Contentful Paint MotoG4, 3G connection	3.77s  from 1.43s
First Meaningful Paint MotoG4, 3G connection	3.77s  from 1.45s
Speed Index Chrome Desktop	1.07s  from 500ms
Largest Contentful Paint Chrome Desktop	1.12s  from 548ms

_{8 other significant changes: First Meaningful Paint on Chrome Desktop, Total JSON size in bytes on MotoG4, 3G connection, Speed Index on MotoG4, 3G connection, Total HTML size in bytes on Chrome Desktop, Total HTML size in bytes on MotoG4, 3G connection, Lighthouse Performance Score on MotoG4, 3G connection, Total Page size in bytes on MotoG4, 3G connection, Total Page size in bytes on Chrome Desktop}

_{Calibre: Site dashboard | View this PR | Edit settings}

[netlify]

This is a preview version of the site.

Built with commit d182fc3

https://deploy-preview-1119--upbeat-lovelace-3e9fff.netlify.app

[tealtan]

Yay! A few more notes:

• There’s double margin coming from the li and the p elements inside - see screenshot
• The author name and date should be 13px.
• Can we swap out the ampersand with an "and"?
• The horizontal rule in the footer should go full-width - see screenshot
• I really think we can remove the underlines on the headlines in the Related posts area.
• Can we have equal spacing above and below the horizontal rule on related posts? It should be 4rems above 768px and 3rems below 768px. (We are standardizing on this kind of vertical spacing to divide sections of a page, so it may be worth creating a reusable thing in our CSS.)
• There should be spacing below the image (we can match the spacing that’s on paragraphs) - see screenshot

Lastly, can we add some styling to the copy link message that appears after clicking on the button? Something like this:
https://www.figma.com/file/GwkYSPVlTkdgLyGNgeMrLz/v3-Refresh?node-id=779%3A7585

This is looking so close, thank you!