feat: reduce CSS in Core-CMS

[wesleyboar]

Overview

Reduce the amount of CSS in TACC/Core-CMS.¹

Related

• required by feat: reduce CSS in Core-CMS Core-CMS#782

Changes

• added c-button--cms.css (from TACC/Core-CMS)
• renamed :--cms-edit-mode and :--cms-logged-in to :--django-cms-…
• added elements/irregular-link (imported by TACC/Core-CMS)
• added elements/mailto-link (imported by core-styles.cms)
• changed --global-color-link-on-dark--normal to --global-color-accent--xxx-light (as it was in TACC/Core-CMS)
• added @custom-media xx-narrow-… (from TACC/Core-CMS)
• added s-drop-cap (from TACC/Core-CMS)

Testing

c-button--cms

1. Start a TACC/Core-CMS using this branch of Core-Styles.
2. Create a button on the CMS.
3. Verify the button has c-button styles from core-styles.cms.css.

irregular-link

Skip. No Core-Styles v2 site uses irregular links.

mailto-link

1. Start a TACC/Core-CMS using this branch of Core-Styles.
2. Create a <a href="mailto:__REMOVE_THIS__@[email protected]" data-user="someone" data-domain="here.there"> link on the CMS.
3. Verify e-mail address appears as [email protected] not [email protected].

s-drop-cap

Core-Styles

1. Verify "Trumps (Utilities & Scopes)" has "S-Drop-Cap".
2. Verify http://localhost:3000/components/detail/s-drop-cap looks like https://dev.tup.tacc.utexas.edu/static/ui/components/detail/s-drop-cap.html.

Core-CMS

1. Start a TACC/Core-CMS using this branch of Core-Styles.
2. Create a paragraph with a parent that has the s-drop-cap class.
3. Verify first letter of paragraph is large and takes three lines.

UI

c-button--cms, mailto-link, s-drop-cap	s-drop-cap

Footnotes

1. End goal is to remove CSS pre-processing from TACC/Core-CMS. ↩