FIRST branding changes. WIP.

[acharraggi]

Work in Progress PR to try out some FIRST branding changes.

• a better way to make FIRST italic.
• add the Registered symbol to initial uses of FIRST on a page
• update the Copyright notice
• some content changes to the ftcoverview page (About the FIRST Tech Challenge).
• the GP page was also updated to include registered marks in the first line of text, plus alt text updates and resize of the wf_fireworks picture.

[acharraggi]

The about page is live here:
https://first-tech-challenge-ftcdocs--352.com.readthedocs.build/en/352/overview/ftcoverview.html

[emcclurg]

This look such better. Can you space the registered mark and scale down a bit please?

[acharraggi]

I moved the registered mark over a couple of pixels so it' doesn't touch the word FIRST. I also played with the height of the registered mark, which is more inline with the top of the font, and not above the word.

From the FIRST Branding guide:

The page now looks like:

The height of the registered symbol couldn't be placed accurately for both text and headings due to the way line heights and font sizes were specified. However, vertical-align: super; and font-size: 60%; seems to look ok for both headings and text.

The FIRST workmark also looks ok when viewed in Chrome on a phone. I'm not able to test in Safari.
I'll give Edge a try and update if needed.

But I noticed the longer Copyright notice in the footer was not word wrapping and was being overlaid by the RTX logo in the footer. Adjusted the copyright div to 75% width and allowed the copyright text to wrap lines if needed.

[acharraggi]

I added some right padding to the Wordmark in addition to the left padding on the registered mark. Because of the italic text the T was leaning such that in the Edge browser the T would touch the registered symbol despite the padding before the registered mark.

In Chrome this now displays with perhaps a bit more padding than I might like, but I think it's ok and a reasonable compromise. In Edge, this also adds some padding to FIRST when not with the registered symbol so that the italic T is not too close to a following word.

Can someone try viewing this page in Safari?
Add a screenshot if you see a display problem with the FIRST workmark or the registered symbol.
Thanks.

[acharraggi]

I moved the RST substitutions into conf.py as an epilog include so that all pages can use the substitutions.
Also updated the GP page to use the |reg| and |FIRST| substitutions.

One noticeable change is that I removed the registered mark from the heading of the overview and gp pages. If the mark is in a geading, it is repeated at least twice on the page plus in the sidebar. That's not exactly inline with FIRST Branding guidelines that mention adding the registered mark to the first use. I also don't like the registered mark showing up in the sidebar, though that is my opinion.

Rather than clutter all pages with registered marks, I think we should just add the registered mark to the first use in the body content. Here's a link to the GP page that shows what that would look like.

[acharraggi]

I think this set of changes is ready for review, but not to merge.
Both the About FTC and GP page have the changes, plus the footer copyright change.

Prior to merging, we could do a global text change and replace all *FIRST* text with |FIRST| so that the new RST substitution is used everywhere. We just need to coordinate with current PRs and any global reorg PR.

I would also like to add a short FIRST Branding section to the Style Guide section that links to https://www.firstinspires.org/brand and mentions all the registered marks and how to use the RST substitutions to style the following:

• FIRST
• Gracious Professionalism
• Coopertition
• More Than Robots

There are other "branding" changes we could make. FIRST Tech Challenge Docs at the top of the sidebar is not styled correctly, but fixing it requires a RTD template change.

I've been thinking that FTC Docs doesn't really follow the FTC branding guide for colors and we don't use the Roboto font for text. The index page now uses FTC orange on the index page for the grid headers, but I'm not sure I like them as they kind of look like buttons that could be clickable but aren't.

Perhaps we replace the 3 program color bar at the top of the page with a FTC specific color bar.
FYI - frc-docs appear to be using a four program color bar, should FTC Docs do the same?

If we do an update to Sphinx and/or RTD themes we could revisit overall site CSS. For accessibility we should revisit how we style text as there are contrast issues that should be fixed at the theme level (both light and dark).

Some changes like the color bar could be done with this PR.

[qwertychouskie]

s/Knoweledge/Knowledge

[acharraggi]

Thanks for catching that.