Refactor: Remove CA State Web Template

[machikoyasuda]

closes #2491

What this PR does

• Remove CA State Web Template CSS, which will then remove the call to the CA State Web Template font
• Remove CA State Web Template domain from CSP
• Makes any CSS fixes necessary

Changelog

• fix:text-left to text-start
• fix: add css to fix skip nav
• fix: button focuses
• slight refactor: buttons in general. could be greatly refactored to mostly be written with css variables instead, reducing the number of new classes/modified classes.

QA

• Trigger the skip nav
• Go through the whole app via keyboard, paying attention to the way the modals behave with the radio buttons
• Manually enable the JavaScript/Cookies warnings via HTML (remove the no display class) and compare it visually with the current one
• Check the app on responsive widths

[github-actions]

Coverage report

Click to see where and how coverage changed

File	Statements	Missing	Coverage	Coverage (new stmts)	Lines missing
benefits
settings.py
Project Total

This report was generated by python-coverage-comment-action

[thekaveman]

fix:text-left to text-start

Was this a CA State Web Template class, and now we use the Bootstrap version or?

[thekaveman]

I'm noticing some slight differences between this branch and prod -- not necessarily a bad thing, just wondering if you have any more insight:

Homepage text is better aligned

	This branch	prod
992px
1200px

Overall container/spacing is better on larger screen sizes

	This branch	prod
1280px
1280px

[machikoyasuda]

fix:text-left to text-start

Was this a CA State Web Template class, and now we use the Bootstrap version or?

In general: In short, yes. I believe the CA State Web Template had copied and pasted lots of Bootstrap utility classes but modified some of them. By using the new start/end syntax, we're now on the updated modern version.

In length - It's actually more of a CSS change. text-align: start works now. Check it out here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Using start/end instead of left/right is a way for CSS to be more "content-aware" (is the term I've seen used) which in this context means that if the language of the HTML document is a Right to Left language, the text-align: start woould set text-align: right, and on Left to Right language, text-align: start would set text-align: left. And so when CSS changed to allow this, Bootstrap changed the naming of its classes appropriately. The Bootstrap docs call these changes "logical" descriptions vs. directional for RTL support:

https://getbootstrap.com/docs/5.0/migration/#rtl

https://getbootstrap.com/docs/5.0/migration/#utilities

[machikoyasuda]

@thekaveman Your width change noticings also reflect how CA State Web Template had some different numbers for container max-widths, and now we're on Bootstrap's defaults.

[thekaveman]

• Triggered skip nav ✅
• Went through the app with keyboard only ✅
• Manually enabled JavaScript/cookie warnings (the text on these is still not contrasted enough) ✅
• Checked the app on various responsive widths ✅