style: formatting for readability

[aparajita]

• Left align column headers.
• Remove code styling.
• Remove bold in most places.
• Add vertical white space between tables.
• Split alternate type value lists > 3 into separate lines.
• Don’t put index into <li>.
• Separate methods in index.

Motivation

I have 30 years experience in typography, graphic design and readability that guided these changes.

I removed the code styles (except for fenced code blocks) for a few reasons:

• Code style is really meant to distinguish a span of text within a larger context, for example like this. In the case of docgen, every chunk of code is either on its own line or within a table cell.
• In the case of table cells, styling as code adds a box around the text. So there is a box within a box, which is much harder for the eye to parse.
• Monospaced fonts are more difficult to read in the context of mixed typography. Using a proportional font aids readability.

I added more vertical space between tables to make it easier for the eye to pick out the beginning of the table.

If a type has more than three alternates, it is split up into multiple lines, which greatly improves readability. For example, instead of this:

Prop	Type	Details
iosImageDisplayMode	"top" | "center" | "bottom" | "fill" | "aspectFill" | "fit" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"	The mode used to place and scale an image splash screen. Ignored for storyboard-based splash screens.

you get this:

Prop	Type	Details
iosImageDisplayMode	| "top" | "center" | "bottom" | "fill" | "aspectFill" | "fit" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"	The mode used to place and scale an image splash screen. Ignored for storyboard-based splash screens.

[adamdbradley]

Would you be able to separate these into different PRs? I like the multiline Type, and correct table headers, but we prefer to keep in the code blocks where we have them. Thanks