feat(tup): migrate for-tup-cms assets from tup-ui

tup/README.md

@@ -7,4 +7,7 @@ Custom assets for [TUP](https://github.com/TACC/tup-ui), migrated out of tup-ui'
 Migration in progress, tracked across sub-PRs:
 
 - `html/` — djangocms-snippet reference copies (done)
-- `css/`, `js/` — ad-hoc CSS/JS assets loaded by the ad-hoc snippets (in progress)
+- `css/ad-hoc/`, `js/ad-hoc/` — ad-hoc CSS/JS assets loaded by the ad-hoc snippets (done)
+- `css/cms.css` + `css/_imports/`, `img/logo-*.svg` — assets from tup-ui's `for-tup-cms/` (done)
+- tup-ui's `for-core-cms/` and `for-core-styles/` remainders were dead/superseded, not migrated
+- `s-breadcrumbs.css`/`breadcrumbs.js` were not migrated — Core-CMS already covers 2nd-crumb de-linking (`nav_cms_breadcrumbs.html`); tup-ui's copies are headed for deletion (tup-ui#535), not upstreaming

tup/css/_imports/components/agenda-table.css

@@ -0,0 +1,40 @@
+/* FAQ: Used on https://www.tacc.utexas.edu/events/institutues/sample/ */
+
+/* FAQ: To support <b> as Black */
+/* TODO: If this is needed, add each to Core Styles as appropriate */
+/* SEE: src/lib/_imports/settings/font.css Roboto @import */
+@import url('https://fonts.googleapis.com/css?family=Roboto:900&display=swap');
+.agenda-table { --black: 900; }
+
+/* TODO: Implement in core-styles.cms.css as s-agenda-table aka agenda-table */
+.agenda-table time {
+    font-family: var(--global-font-family--mono);
+    display: block; /* so text-align is effectual */
+    text-align: right;
+}
+.agenda-table p:not(:last-child) {
+    margin-bottom: 0.25em;
+}
+.agenda-table :is(td, th):first-child {
+    border-right: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+}
+.agenda-table :is(td, th):nth-child(2) {
+    text-align: center;
+}
+
+.agenda-table :is(td, th):not([class*="agenda-table__"]) {
+    background: transparent;
+}
+.agenda-table__neutral
+/* FAQ: Phasing out "primary" misnomer by not propogating it */ {
+    background: var(--global-color-primary--x-light);
+}
+.agenda-table__accent {
+    background: var(--global-color-accent--xxx-light);
+}
+[class*="agenda-table__secondary"] {
+    background: var(--global-color-secondary--xx-light);
+}
+.agenda-table__tertiary {
+    background: var(--global-color-tertiary--xx-light);
+}

tup/css/_imports/components/banner.css

@@ -0,0 +1,190 @@
+/* TODO: Support .c-banner-cell */
+
+
+
+
+/* Banner Cell */
+
+[class*="banner-cell--"] {
+  --tag-padding: 0.5rem; /* manually copied from .c-tag styles */
+}
+
+/* Elements */
+
+[class*="banner-cell--"] :where(h1, h2, h3, h4) {
+  margin-bottom: 0;
+}
+
+/* So image caption heights are equal (not an issue on narrow screen) */
+@media (width >= 576px) {
+  [class*="banner-cell--"] > a {
+    height: 100%;
+    display: block;
+  }
+}
+
+/* FAQ: Using after so outline is on top of mix-blend-mode (see .o-colorize) */
+[class*="banner-cell--"] > a { position: relative; }
+[class*="banner-cell--"] > a:hover::after {
+  --border-width: var(--global-border-width--thick);
+
+  /* FAQ: Using `border` shrinks content while `outline` does not */
+	outline-width: var(--border-width);
+  outline-style: solid;
+  outline-color: var(--global-color-primary--xxx-dark);
+	outline-offset: calc( -1 * var(--border-width) );
+
+  /* So ::after stretches to fill parent */
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0; top: 0; bottom: 0; right: 0;
+}
+[class*="banner-cell--"] > a:active {
+	--border-width: var(--global-border-width--normal);
+}
+
+[class*="banner-cell--"] figure {
+  margin-bottom: unset; /* undo core-cms.css and Bootstrap */
+}
+
+[class*="banner-cell--"] figcaption {
+  padding-inline: 3.0rem;
+}
+
+/* To remove standard link text docoration */
+[class*="banner-cell--"] > a {
+  text-decoration: none;
+}
+
+/* To cover a re-sized image box with the full-size image (like a bkgd image) */
+/* FAQ: If user sets dimension via style, we assume they want this feature */
+[class*="banner-cell--"] figure:where([style*="height"], [style*="width"]) img {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+/* Components */
+
+[class*="banner-cell--"] .c-tag,
+[class*="banner-cell--"] [class*="tag--"] {
+  display: block;
+  margin-bottom: 2.0rem;
+}
+
+[class*="banner-cell--"] .u-highlight {
+	padding-inline: var(--tag-padding);
+
+	color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-primary--xxx-dark);
+
+	line-height: 1;
+}
+
+
+/* Banner Cell (Major) */
+
+/* To allow image to be underneath text */
+.banner-cell--major figure {
+  display: grid;
+
+  /* To force % image height to match its container (i.e. <figure>) */
+  /* https://stackoverflow.com/a/52137966/11817077 */
+  grid-template-rows: minmax( 0, 1fr );
+}
+
+.banner-cell--major h2 {
+	font-size: var(--global-font-size--xxx-large);
+  font-weight: var(--bold);
+
+	text-transform: uppercase;
+}
+
+/* To move text atop image */
+.banner-cell--major img,
+.banner-cell--major figcaption {
+  grid-row: 1;
+  grid-column: 1;
+}
+.banner-cell--major figcaption {
+  align-self: end; /* to align text to bottom */
+}
+
+/* To showcase image more on mobile and not let tag be flush against header */
+@media (width < 576px) {
+    .banner-cell--major figcaption {
+        margin-top: 6rem;
+        margin-bottom: 8rem;
+    }
+}
+@media (width >= 576px) {
+    .banner-cell--major figcaption {
+        margin-top: 3.5rem;
+        margin-bottom: 5rem;
+    }
+}
+
+
+
+/* Banner Cell (Minor) */
+
+/* To space out cells */
+@media (width < 576px) {
+  .banner-cell--minor {
+    margin-top: calc( var(--global-space--bootstrap-gap) / 2 );
+  }
+  .banner-cell--minor:last-child {
+    margin-bottom: calc( var(--global-space--bootstrap-gap) / 2 );
+  }
+}
+@media (width >= 576px) {
+  .banner-cell--minor {
+    margin-block: var(--global-space--bootstrap-gap);
+  }
+}
+
+/* To allow image to be underneath text */
+.banner-cell--minor figure {
+  display: grid;
+
+  /* To make image and caption fill, but also fit within, grid */
+  grid-template-rows: auto 1fr;
+  grid-template-columns: minmax( 0, 1fr );
+}
+
+/* To add space under caption text within container */
+.banner-cell--minor figcaption {
+  padding-bottom: 3.0rem;
+}
+
+.banner-cell--minor h2 {
+  color: var(--global-color-primary--xxx-dark); /* undo core-styles.cms */
+  font-weight: revert;
+}
+
+/* To move text atop image */
+.banner-cell--minor figcaption {
+  /* To move by half the height of the .c-tag */
+  /* FAQ: Not using `translateY(-50%)` because h2 must move same amount */
+  --offset: calc( var(--tag-padding) + ( var(--global-font-size--small) / 2 ) );
+
+  /* FAQ: Using variable so styles that extend this can use the value */
+  margin-top: calc( -1 * var(--offset) );
+}
+
+
+
+
+
+/* Conflicts with Core-CMS */
+
+/* Overwrite Core-CMS core-cms.css */
+/* HELP: How can all CMS sites avoid this? */
+[class*="banner-cell--"] figcaption {
+    border-bottom: unset;
+    color: unset;
+    font-size: unset;
+    font-style: normal;
+    line-height: inherit;
+}

tup/css/_imports/components/banner.html

@@ -0,0 +1,56 @@
+<div class='row no-gutters banner-row'>
+  <div class='col banner-cell--major'>
+    <a href='#'>
+      <figure>
+        <img
+          src='https://dev.tup.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/e2/80/e280b7ed-bd66-4374-840b-45bc47b4f266/banner-texascale.jpg__1600x700_q85_subsampling-2.jpg'
+        />
+        <figcaption>
+          <span class='tag'>System News</span>
+          <h2 class='highlight'>Lonestar6 Gets GPU Server Boost</h2>
+        </figcaption>
+      </figure>
+    </a>
+  </div>
+</div>
+<div class='row no-gutters banner-row'>
+  <div class='col banner-cell--minor'>
+    <a href='#'>
+      <figure>
+        <img
+          src='https://dev.tup.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/5a/ec/5aecd15d-09ae-4625-805c-de0828910b88/banner-simulations.jpg__750x500_q85_subsampling-2.jpg'
+        />
+        <figcaption>
+          <span class='tag'>Press Release</span>
+          <h2>TACC Rings in the HPCwire Awards longer title for testing purposes</h2>
+        </figcaption>
+      </figure>
+    </a>
+  </div>
+  <div class='col banner-cell--minor'>
+    <a href='#'>
+      <figure>
+        <img
+          href='https://dev.tup.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/59/14/5914627d-2b3d-4cbc-81d2-a0d57b719fe9/banner-quasar.jpg__576x576_q85_subsampling-2.jpg'
+        />
+        <figcaption>
+          <span class='tag'>Featured News</span>
+          <h2>2022 Magazine Hot Off the Press</h2>
+        </figcaption>
+      </figure>
+    </a>
+  </div>
+  <div class='col banner-cell--minor'>
+    <a href='#'>
+      <figure>
+        <img
+          href='https://dev.tup.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c1/a8/c1a8ece9-8c93-4d75-902e-f4b5219823f1/banner-welcome.jpg__750x500_q85_subsampling-2.jpg'
+        />
+        <figcaption>
+          <span class='tag'>Featured Story</span>
+          <h2>Study Sheds New Insight into X-Shaped Galaxies</h2>
+        </figcaption>
+      </figure>
+    </a>
+  </div>
+</div>

tup/css/_imports/components/banner.md

@@ -0,0 +1,3 @@
+A list of article previews.
+
+> **⚠️ Warning**: Styles are heavily dependent on the tags in the sample markup.

tup/css/_imports/components/c-data-list.css

@@ -0,0 +1,15 @@
+/* SEE: https://dev.tup.tacc.utexas.edu/systems/frontera/ */
+
+table[class*="data-list--"] {
+    /* TODO: Consider this for all tables */
+    margin-bottom: 40px;
+}
+table[class*="data-list--"] :is(th, td) {
+    background: unset;
+}
+table[class*="data-list--"] th {
+    font-weight: var(--black); /* undo core-styles.base table */
+}
+table[class*="data-list--"] td {
+    color: unset; /* undo core-styles.base table */
+}