@tacc/core-styles 2.25.3 → 2.27.0

package/src/lib/_imports/components/c-app-card.css

@@ -28,7 +28,7 @@
 
   text-align: center;
 
-  &:is(a) {
+  &:where(a) {
     color: inherit;
 
     &:hover {
@@ -60,11 +60,11 @@
   margin-block: auto;
   flex-grow: 0;
 
-  &:is(ul) {
+  &:where(ul) {
     padding-inline-start: 0;
   }
 }
-:--c-app-card__types > :is(li, div, p) {
+:--c-app-card__types > :where(li, div, p) {
   display: inline;
 }
 :--c-app-card__types > :not(:last-child)::after {
@@ -81,7 +81,7 @@
   flex-direction: row;
   justify-content: space-between;
 
-  &:is(ul) {
+  &:where(ul) {
     list-style: none;
     padding-inline-start: 0;
     margin-block: unset;

package/src/lib/_imports/components/django-cms-forms.hacks.css

@@ -11,7 +11,7 @@ Styleguide Components.DjangoCMS.Forms.Hacks
 */
 @custom-selector :--django-cms-logged-in   .cms-ready;
 @custom-selector :--django-cms-edit-mode   [class*="cms-structure-mode-"];
-/* IDEA: import and extend `.c-message(...)` */
+/* IDEA: @import and @mixin `.c-message(...)` */
 /* IDEA: WP-280 use postcss mixin for message styles */
 /* @tacc/core-styles/src/lib/_imports/components/c-message.css */
 
@@ -20,7 +20,6 @@ Styleguide Components.DjangoCMS.Forms.Hacks
 
 /* To inform user or admin about unsupported required multi-checkbox field */
 /* HACK: This does not solve the problem; it just announces it */
-/* NOTE: Were we to @extend :--c-message, generated selectors become messy */
 :--problem-field > label::after {
   display: block;
   margin-top: 0.5em;

package/src/lib/_imports/components/tacc-docs/tacc-docs.hbs

@@ -41,3 +41,18 @@ ibrun gmx_mpi mdrun -s topol.tpr -o traj.trr -c confout.gro -e ener.edr -g md.lo
     </dl>
   </dd>
 </dl>
+<dl>
+  <dt>Breadcrumbs</dt>
+  <dd class="rst-content">
+    <div role="navigation" aria-label="breadcrumbs navigation">
+      <ul class="wy-breadcrumbs">
+        <li><a href="../.." class="icon icon-home" aria-label="Docs">⌂</a> »</li>
+        <li>HPC User Guides »</li>
+        <li>Corral</li>
+        <!--<li class="wy-breadcrumbs-aside">
+        </li>-->
+      </ul>
+      <hr>
+    </div>
+  </dd>
+</dl>

package/src/lib/_imports/components/tacc-docs.css

@@ -1,4 +1,4 @@
-@import url("../trumps/s-breadcrumbs.css");
+@import url("../tools/x-breadcrumbs.css");
 
 .cmd-line,
 .job-script {
@@ -7,5 +7,17 @@
 }
 
 .rst-content > [role="navigation"] {
-  @extend .s-breadcrumbs-via-ul;
+  @mixin x-breadcrumbs;
+  @mixin x-breadcrumbs-major;
+}
+.rst-content > [role="navigation"] ul {
+  @mixin x-breadcrumbs__list;
+  @mixin x-breadcrumbs-major__list;
+}
+.rst-content > [role="navigation"] li {
+  @mixin x-breadcrumbs__list-item;
+  @mixin x-breadcrumbs-major__list-item;
+}
+.rst-content > [role="navigation"] li + li {
+  @mixin x-breadcrumbs__list-item--prefix-separator;
 }

package/src/lib/_imports/core-styles.cms.css

@@ -53,3 +53,4 @@
 @import url("./trumps/s-footer.css");
 @import url("./trumps/s-footer--thick.css");
 @import url("./trumps/s-truncated-table.css");
+@import url("./trumps/s-hero-banner.css");

package/src/lib/_imports/objects/o-section.css

@@ -159,6 +159,7 @@
 
   /* To size image to cover section dimensions but maintain ratio */
   /* CAVEAT: This causes image to overflow beyond section */
+  /* TODO: Try `max-width: 100%` as in Core-Styles#331 */
   /* CAVEAT: The `vw` causes shrinkage on screen narrower than body min-width */
   /* SEE: "Tricks" section */
   width: 100vw;

package/src/lib/_imports/tools/x-breadcrumbs.css

@@ -0,0 +1,82 @@
+/*
+Breadcrumbs
+
+A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
+
+.x-breadcrumbs                              - The breadcrumbs container
+.x-breadcrumbs-major                          (for major navigation)
+.x-breadcrumbs--list                        - The list element as the container
+.x-breadcrumbs-major--list                    (for major navigation)
+.x-breadcrumbs__list                        - The list element as a child of the container
+.x-breadcrumbs-major__list                    (for major navigation)
+.x-breadcrumbs__list-item                   - All list items
+.x-breadcrumbs-major__list-item               (for major navigation)
+.x-breadcrumbs__list-item--suffix-separator - Add spearator after list items
+.x-breadcrumbs__list-item--prefix-separator - Add spearator before list items
+
+Styleguide Tools.Mixins.Breadcrumbs
+*/
+
+
+
+/* Container */
+
+@define-mixin x-breadcrumbs {}
+@define-mixin x-breadcrumbs-major {
+  padding-top: var(--global-space--above-breadcrumbs, 45px);
+  margin-bottom: var(--global-space--under-breadcrumbs, 40px);
+  font-size: var(--global-font-size--x-small, 1.4rem);
+}
+
+/* Content */
+
+@define-mixin x-breadcrumbs--list {
+  /* To remove whitespace between items (but still allow text wrap) */
+  display: flex;
+  flex-wrap: wrap;
+
+  /* To undo default browser list (`<ol>`, `<ul>`) styles */
+  list-style: none;
+  padding-left: unset;
+  margin-top: unset;
+}
+@define-mixin x-breadcrumbs-major--list {
+  font-weight: var(--global-font-weight--medium, 500);
+}
+
+@define-mixin x-breadcrumbs__list {
+  @mixin x-breadcrumbs--list;
+
+  /* To undo default browser list (`<ol>`, `<ul>`) styles */
+  margin-bottom: unset;
+}
+@define-mixin x-breadcrumbs-major__list {
+  @mixin x-breadcrumbs-major--list;
+}
+
+@define-mixin x-breadcrumbs__list-item {
+  /* To remove whitespace around text */
+  display: inline-flex;
+}
+@define-mixin x-breadcrumbs-major__list-item {
+  &:last-child {
+    font-weight: var(--global-font-weight--bold, 700);
+  }
+}
+
+@define-mixin x-breadcrumbs__list-item--separator {
+  &::after,
+  &::before {
+    padding-inline: 0.5ch;
+  }
+}
+@define-mixin x-breadcrumbs__list-item--suffix-separator {
+  @mixin x-breadcrumbs__list-item--separator;
+
+  &::after { content: ">"; }
+}
+@define-mixin x-breadcrumbs__list-item--prefix-separator {
+  @mixin x-breadcrumbs__list-item--separator;
+
+  &::before { content: ">"; }
+}

package/src/lib/_imports/trumps/s-breadcrumbs/s-breadcrumbs.hbs

@@ -0,0 +1,73 @@
+<dl>
+
+  <dt>Major Navigation</dt>
+  <dd>
+    <nav class="s-breadcrumbs">
+      <ol>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Home</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a>Fruit</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Tropical</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Yellow</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          Bananas
+        </li>
+      </ol>
+    </nav>
+  </dd>
+
+  <dt>Other Navigation</dt>
+  <dd>
+    <ol class="s-breadcrumbs">
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        <a href="#">Home</a>
+      </li>
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        <a>Fruit</a>
+      </li>
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        <a href="#">Tropical</a>
+      </li>
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        <a href="#">Yellow</a>
+      </li>
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        Bananas
+      </li>
+    </ol>
+  </dd>
+</dl>
+
+<hr />
+
+<dl>
+  <dt><em>Deprecated</em> Major Navigation</dt>
+  <dd>
+    <div class="s-breadcrumbs-via-ul">
+      <ul>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Home</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a>Fruit</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Tropical</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Yellow</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          Bananas
+        </li>
+      </ul>
+    </div>
+  </dd>
+</dl>

package/src/lib/_imports/trumps/s-breadcrumbs/s-breadcrumbs.readme.md

@@ -0,0 +1,20 @@
+A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
+
+- `.s-breadcrumbs`: root class for `<nav>` (major nav) or `<ol>` (other nav)
+- `.s-breadcrumbs-via-ul`: alternate root class for `<ul>` (not recommended)
+
+> **ⓘ Notice**
+>
+> A scope class is used to enforce appropriate semantic HTML.
+
+> **ⓘ Notice**
+>
+> The markup uses embedded [Breadcrumb microdata](https://schema.org/ListItem).
+
+| Class & Markup | Description | Notes |
+| - | - | - |
+| `nav.s-breadcrumb ol` | Major navigation |
+| `ol.s-breadcrumb` | Other navigation |
+| `div.s-breadcrumb ul` | Major navigation (Inaccurate markup) | Use when markup cannot be changed. |
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/trumps/s-breadcrumbs.css

@@ -1,77 +1,37 @@
-/*
-Breadcrumbs
+@import url("../tools/x-breadcrumbs.css");
 
-A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
-
-- `.s-breadcrumbs`: root class for <nav>, <... [role="nav"]>, or <ol>
-- `.s-breadcrumbs-via-ul`: alternate root class for <ul> (not recommended)
-
-Notice: A scope class is used to enforce appropriate semantic HTML.
-
-Markup:
-<!-- Major Navigation -->
-<!-- FAQ: Use this major navigation markup for global breadcrumbs -->
-<!-- SEE: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#usage_notes -->
-<nav class="s-breadcrumbs">
-  <ol>
-      <li><a href="/"><span>Home</span></a></li>
-      <li><a href="/"><span>Science</span></a></li>
-      <li><span>Publications</span></li>
-  </ol>
-</nav>
-<!-- Minor Navigation -->
-<ol class="s-breadcrumbs">
-    <li><a href="/"><span>Home</span></a></li>
-    <li><a href="/"><span>Science</span></a></li>
-    <li><span>Publications</span></li>
-</ol>
-
-Styleguide Trumps.Scopes.Breadcrumbs
-*/
-@import url("../tools/selectors.css");
-@import url("../tools/x-truncate.css");
-
-
-
-
-
-/* Base i.e. Container */
-
-.s-breadcrumbs:is(nav),
+.s-breadcrumbs:where(nav),
+.s-breadcrumbs:where(ol),
 .s-breadcrumbs-via-ul {
-  padding-top: var(--global-space--above-breadcrumbs);
-  margin-bottom: var(--global-space--under-breadcrumbs);
-
-  font-size: var(--global-font-size--x-small);
+  @mixin x-breadcrumbs;
+}
+.s-breadcrumbs:where(nav),
+.s-breadcrumbs-via-ul {
+  @mixin x-breadcrumbs-major;
 }
 
-
-
-/* Elements i.e. Content */
-
-/* To undo default list styles */
-.s-breadcrumbs:is(nav) ol,
+.s-breadcrumbs:where(nav) ol,
+.s-breadcrumbs:where(ol),
 .s-breadcrumbs-via-ul ul {
-  list-style: none; /* overwrite browser styles */
-  padding-left: unset; /* undo html-elements.css */
-  margin-bottom: unset; /* undo html-elements.css */
-
-  font-weight: var(--global-font-weight--medium);
+  @mixin x-breadcrumbs__list;
+}
+.s-breadcrumbs:where(nav) ol,
+.s-breadcrumbs-via-ul ul {
+  @mixin x-breadcrumbs-major__list;
 }
 
-.s-breadcrumbs:is(ol) li,
-.s-breadcrumbs:is(nav) ol li,
+.s-breadcrumbs:where(nav) ol li,
+.s-breadcrumbs:where(ol) li,
 .s-breadcrumbs-via-ul ul li {
-  display: inline-block;
+  @mixin x-breadcrumbs__list-item;
 }
-
-.s-breadcrumbs:is(ol) li + li::before,
-.s-breadcrumbs:is(nav) ol li + li::before,
-.s-breadcrumbs-via-ul ul li + li::before {
-  content: ' > ';
+.s-breadcrumbs:where(nav) ol li,
+.s-breadcrumbs-via-ul ul li {
+  @mixin x-breadcrumbs-major__list-item;
 }
 
-.s-breadcrumbs:is(nav) ol li:last-child,
-.s-breadcrumbs-via-ul ul li:last-child {
-  font-weight: var(--bold);
+.s-breadcrumbs:where(nav) ol li + li,
+.s-breadcrumbs:where(ol) li + li,
+.s-breadcrumbs-via-ul ul li + li {
+  @mixin x-breadcrumbs__list-item--prefix-separator;
 }

package/src/lib/_imports/trumps/s-hero-banner/config.yml

@@ -0,0 +1,2 @@
+context:
+  shouldLoadCMS: true

package/src/lib/_imports/trumps/s-hero-banner/s-hero-banner.demo.css

@@ -0,0 +1,5 @@
+main {
+    padding-block: unset;
+    width: unset;
+}
+  

package/src/lib/_imports/trumps/s-hero-banner/s-hero-banner.hbs

@@ -0,0 +1,8 @@
+
+<div class="s-home-banner">
+    <article>
+        <h1>Core Experience Portal</h1>
+        <p>The Texas Advanced Computing Center (TACC) provides powerful and intuitive web interfaces that remove technological hurdles.</p>
+    </article>
+    <img class="s-home-banner__media" src="https://utrc.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/72/18/72183c36-229e-4b56-a341-4591b7f5e68f/utrc-hero-1920-555-ratio.jpg__1680x1680_q85_subsampling-2.jpg" alt="hero-banner">
+</div>

package/src/lib/_imports/trumps/s-hero-banner.css

@@ -0,0 +1,61 @@
+@import url("../tools/media-queries.css");
+
+/* Banner */
+/* Banner: Container */
+@media (--medium-and-above) {
+  .s-home-banner {
+    height: 55.5rem;
+    width: 100vw;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media (--medium-and-below) {
+  .s-home-banner {
+    height: auto;
+    display: grid;
+  }
+}
+
+.s-home-banner {
+  position: relative; /* for `position: absolute` children */
+}
+
+
+/* Banner: Overlay */
+@media (--medium-and-above) {
+  .s-home-banner article {
+    position: absolute;
+    height: auto;
+    width: 475px;
+    left: 116px;
+    bottom: 50px;
+
+  }
+}
+
+.s-home-banner article {
+  color: var(--global-color-primary--xx-dark);
+  background-color: rgba(var(--global-color-primary--xx-light-rgb), 0.9);
+  z-index: 2;
+  padding: 24px 84px 36px 48px;
+  font-weight: bold;
+
+  & h1 {
+    margin-top: 0;
+    padding-bottom: 14px;
+    margin-bottom: 18px;
+    font-size: 2.4rem; /* design deviates from standard to fit text on 2 lines */
+    border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);
+  }
+}
+
+/* Banner: Image */
+.s-home-banner__media {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  z-index: 1;
+}

package/src/lib/_imports/components/bootstrap/bootstrap.readme.md

@@ -1,9 +0,0 @@
-> **ⓘ Notice**
->
-> [Despite high usage and awareness of Bootstrap, it has low and decreasing satisfaction and interest.](https://2021.stateofcss.com/en-US/technologies/css-frameworks) TACC Core use its components only when building our own would be more work than overwriting Bootstrap.
-
-> **ⓘ Notice**
->
-> Overwriting Bootstrap is cumbersome and **not** the [appropriate way to theme Bootstrap](https://getbootstrap.com/docs/4.0/getting-started/theming/), but TACC Core is **not** using SASS; it uses PostCSS.
-
-<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />