feat(ecep): migrate CSS snippets to stylesheets (#416)

* chore(ecep): migrate CSS snippets to stylesheets

* chore(ecep): add homepage styles

* chore(ecep): delete moot styles

* refactor(ecep): rename a stylesheet

* chore(ecep): remove unused styles

Homepage news layout changed.

Also, improve comments on homepage banner styles.

* feat: add disabled links

* chore(ecep): css already present not via snippet

Something —
- not a snippet
- seemingly not Core-CMS
— is already providing the `max-height: inherit` code.

The background-color style is unnecessaty (even in dark mode).

This snippet is moot.

* fix(ecep): typo in css to retrofit core-styles v2

TACC/Core-CMS#910

* docs(ecep): clearer css comments

ecep_assets/css/djangocms-picture.css

@@ -0,0 +1,32 @@
+/* TODO: Use `TACC_CORE_STYLES_VERSION = 2` to obviate this stylesheet */
+
+/* To apply djangocms-bootstrap4/…_picture class styles from parent to image */
+/* FAQ: TACC/Core-CMS moves (side effect) Picture classes to <figure> or <a> */
+/* SEE: taccsite_cms/templates/djangocms_picture/default/picture.html */
+:is(figure, a).img-fluid img {
+  max-width: 100%;
+  height: auto;
+}
+:is(figure, a).img-thumbnail img {
+  padding: 0.25rem;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 1rem; /* NOTE: Bootstrap used 0.25rem */
+  max-width: 100%;
+  height: auto;
+}
+:is(figure, a).rounded img {
+  /* NOTE: Bootstrap used 0.25rem */
+  border-radius: 1rem !important; /* overwrite Bootstrap (uses !important) */
+}
+/* To undo some djangocms-bootstrap4/…_picture class styles on parent */
+/* FAQ: The duplicate styles on parent tags look odd or are unnecessary */
+:is(figure, a).img-thumbnail {
+  padding: unset;
+  background-color: unset;
+  border: unset;
+  border-radius: unset;
+}
+:is(figure, a).rounded {
+  border-radius: unset !important; /* overwrite Bootstrap (uses !important) */
+}

ecep_assets/css/homepage.css

@@ -0,0 +1,17 @@
+/* BANNER */
+
+/* to center-align banner image when it's too narrow to fill screen */
+figure#homepage-banner {
+    background-color: var(--global-color-accent--x-dark);
+    display: grid;
+    justify-content: center;
+}
+/* to hide caption */
+#homepage-banner figcaption {
+    display: none;
+}
+/* to remove extra space below banner */
+figure#homepage-banner /* overwrites Bootstrap reboot.css */,
+figure#homepage-banner > img /* overwrites ecep-cms/…/site.css */ {
+    margin-bottom: 0;
+}

ecep_assets/css/links.css

@@ -0,0 +1,31 @@
+/* To support DISABLED LINK feature */
+/* TODO: Remove when `TACC_CORE_STYLES_VERSION = 2` */
+[disabled] {
+    pointer-events: none;
+}
+
+/* To apply IRREGULAR LINK styles */
+/* TODO: Do this the right way:
+    1. Add "s-irregular-links" class to a root element.
+    2. Delete this stylesheet.
+*/
+:is(main, .c-footer) :where(
+  a,
+  .c-button--as-link
+) {
+    text-decoration-line: underline;
+}
+:is(main, .c-footer) :where(
+  a:hover,
+  .c-button--as-link:hover
+) {
+    text-decoration-style: dashed;
+    text-decoration-thickness: from-font; /* TODO: Add to Core-Styles */
+}
+:is(main, .c-footer) :where(
+  a:active,
+  .c-button--as-link:active
+) {
+    text-decoration-style: dotted;
+    text-decoration-thickness: from-font; /* TODO: Add to Core-Styles */
+}