Refactor CSS

[rrcampbell-exe]

Looks for opportunities to refactor the CSS. Consider utility classes as a starting point for things like box-shadow and other repeated styles throughout the codebase. This should also focus on ensuring that light-theme/dark-theme implementation is as streamlined as possible.

[rrcampbell-exe]

Once these refactors are complete, the app should be reorganized into simply "components" and "pages." It shouldn't rely on the "experiences" structure.

[rrcampbell-exe]

Opportunities for global refactors:

• transitions (--transition-standard, --transition-fast, --transition-slow, for example)
• box-shadow
• breakpoints (--mobile)

[rrcampbell-exe]

You cannot use custom properties with var inside of media queries.

Others will be implemented.

[rrcampbell-exe]

This issue is going to be treated as an epic in order to break it up a bit. The following files (taken in order from imported-styles.css) still need to be refactored, however.

@import './experiences/author/pages/Landing/AuthorLanding.scss';
@import './experiences/shared/components/Reviews/Reviews.scss';
@import './experiences/author/pages/Books/BooksLanding.scss';
@import './experiences/tech/pages/Landing/TechLanding.scss';
@import './experiences/author/pages/Podcast/Podcast.scss';
@import './experiences/shared/components/HamburgerMenu/HamburgerMenu.scss';
@import './experiences/shared/components/NotFound/NotFound.scss';
@import './experiences/shared/components/NotificationBanner/NotificationBanner.scss';
@import './experiences/shared/components/Loading/Loading.scss';
@import './experiences/shared/pages/About/GeneralAbout.scss';
@import './experiences/shared/components/Quote/Quote.scss';
@import './experiences/shared/components/TextAndImage/TextAndImage.scss';
@import './experiences/shared/components/Blog/BlogTags.scss';

In the meantime, the work that has been done on the other eight Sass files plus App.css will be merged.