[bug][docs] Fix numerous docs style issues

[markcaron]

There are multiple style issues throughout PFE doc pages:

• Add new site header style (@markcaron — [docs] Update header bar #2396)
  • Add new PFE logo docs: adding new PFE logo SVG #2401
  • Fix v1/v2 toggle to be consistent in style (see comment below)
  • Have v1/v2 toggle go directly to All Components (not individual components) (see comment below)
• Page headings
  • Add back in gray background behind page headings docs: improvements #2398
  • Move overview description into page heading (see comment below)
• Add max-width to content docs: improvements #2398
• Bands
  • Fix spacing between "bands" (see comment below)
  • Remove extra <p> between bands ([docs][bug] Remove extra spacing between bands coming from extra <p> #2419) docs: hide empty <p> elements #2421
• Components
  • Accordion
    • API content/sections doesn't match PF (should mimic) docs(accordion): improve docs to more closely match PFv4 #2417
  • Clipboard copy
    • Icon doesn't match PatternFly's (see comment below)
    • Icon size fix(clipboard-copy): icon size and input-group styles #2418
    • Bottom border doesn't lineup is both versions fix(clipboard-copy): icon size and input-group styles #2418
• Font changes on in-page demos, like accordion's constructed stylesheet (i.e., "Red Hat Text" vs "RedHatTextUpdated") fix(accordion): fixing font-family styling, fixed height demo  #2427
• Get Started theming example uses cornflowerblue which seems to be a poor color choice. docs: update developer content #2409
• Blog fixes Fixed in docs: fix blog layout and component headers #2459
• Fix favicon Fixed in docs: fix favicon not appearing in url bar #2456
• Fix "Get Started" CTA on homepage (@eyevana in progress) docs: set text color to white on hover #2457
• Accordion page focus bug PR fix(accordion): removing auto focus on expanded in the header #2458

[zeroedin]

• Fix v1/v2 toggle to be consistent in style
• Have v1/v2 toggle go directly to All Components (not individual components)

I believe we are deferring these due to symlinking to the v1 docs and not directly maintaining their templates.

[zeroedin]

• Move overview description into page heading

Due to the usage of pfe-tools to render these pages we can't modify these without a breaking change to child repos.

[zeroedin]

• Icon doesn't match PatternFly's

The difference is between font awesome version 6 and version 5

https://fontawesome.com/v6/icons/copy?s=solid&f=classic

https://fontawesome.com/v5/icons/copy?s=solid&f=classic

@bennypowers was this the intent of pf-icon to use version 6 of fontawesome rather then version 5?

[zeroedin]

• Icon size

The icon sizes are not the same as PFv4 clipboard. Currently, the copy icon is showing up at 10px which is the default size of a <pf-icon> with no-size variant given (eg. size="sm|md|lg").

pf-icon size API does not allow for a 16px icon, even though this is the size that PFv4 itself uses for many of its components, this issue has come up in several places including pf-tabs and downstream in RHDS. You can override this with CSS prop --pf-icon--size: 16px.

Patternfly icon states this same intent of 10px = sm,18px = md, 24px = lg, 54px = xl. Even though use cases throughout PFv4 of a 16px size <svg> are used in components for many icons.

The reason this is being exposed is that these components are not directly using the PF <Icon/> react component like we are reusing the <pf-icon> in our web components. This is the discrepancy that is causing the size issue differences.

[zeroedin]

[ ] Font changes on in-page demos, like accordion's constructed stylesheet (i.e., "Red Hat Text" vs "RedHatTextUpdated")

@brianferry will you take a look at this one with Accordion? I'm pretty sure the solution here is just to remove "RedHatTextUpdated" and replace it with "Red Hat Text" as we won't serve "RedHatTextUpdated" on any of the sites this gets used on. If I understand the issue correctly. I believe @markcaron can expand on that if needed.

[markcaron]

@zeroedin No need to adjust the band padding. I marked off the item from the checklist above. But, I added a item below it to remove the extra <p> between bands.