(PDS-370) Augment existing Content styles with rules defined in Nebula

[sebastian-adam]

Resolves PDS-370

For transparency, here are the few TODOs I added to the Content component:

• Define margins for h1 -- was not relevant for Nebula
• Define margins for h2 -- was not relevant for Nebula
• Create a system whereby an infinite number of ordered and unordered lists have appropriate bullets

[vine77]

@scotje Here is the PR to upstream Nebula's in-app documentation styles to the Content component. Can you take a look to see how this would impact the Forge? I know you have also been adding styles to HTML elements inside the Content comonent (puppetlabs/puppet-forge-web:js/webpack/khepri/HowtoContent/HowtoContent.scss#L84-L113). At a glance, it looks like the img styles and code styles are different. I'd like to resolve the differences and get something that works for both Nebula and the Forge.

[sebastian-adam]

At a glance, it looks like the img styles and code styles are different. I'd like to resolve the differences and get something that works for both Nebula and the Forge.

Yea, I hesitated on bringing default image styles in, but decided they are helpful if the content is completely arbitrary. That said, happy to reduce or port back whatever is needed. For what it's worth, we have a a custom class in Nebula that we put on special case images. We've also done the same for a unique table cell rule.

So, per images, happy to accommodate. Per code, also happy to accommodate, but I think it's more valuable we standardize on a shared pattern there. Easier for users to jump between product documentation is my thought.

[vine77]

Looks awesome! Just added a few comments on using our common Sass variables where we can.

[vine77]

Looks like you don't need to prefix white-space: pre-wrap, which has pretty good support: https://caniuse.com/#search=white-space

[vine77]

LGTM! Thanks for reviewing for the Forge Casey!