From 813a4edde8c9fdf57307aacc25729198b4d7b882 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 3 Feb 2025 16:21:00 -0600
Subject: [PATCH] feat(ecep): migrate CSS snippets to stylesheets (#416)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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

https://github.com/TACC/Core-CMS/pull/910

* docs(ecep): clearer css comments
---
 ecep_assets/css/djangocms-picture.css | 32 +++++++++++++++++++++++++++
 ecep_assets/css/homepage.css          | 17 ++++++++++++++
 ecep_assets/css/links.css             | 31 ++++++++++++++++++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 ecep_assets/css/djangocms-picture.css
 create mode 100644 ecep_assets/css/homepage.css
 create mode 100644 ecep_assets/css/links.css

diff --git a/ecep_assets/css/djangocms-picture.css b/ecep_assets/css/djangocms-picture.css
new file mode 100644
index 00000000..968d28ae
--- /dev/null
+++ b/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) */
+}
diff --git a/ecep_assets/css/homepage.css b/ecep_assets/css/homepage.css
new file mode 100644
index 00000000..20b69022
--- /dev/null
+++ b/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;
+}
diff --git a/ecep_assets/css/links.css b/ecep_assets/css/links.css
new file mode 100644
index 00000000..431a7f15
--- /dev/null
+++ b/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 */
+}