@tacc/core-styles 2.25.2 → 2.26.1

package/src/lib/_imports/trumps/s-app-card.css

@@ -13,13 +13,14 @@
 @custom-selector :--s-app-card__desc
   :--s-app-card > p;
 
-@custom-selector :--s-app-card__list
+@custom-selector :--s-app-card__types
   :--s-app-card > ul:not(:last-of-type);
 
-@custom-selector :--s-app-card__tags
+@custom-selector :--s-app-card__flags
   :--s-app-card > ul:last-of-type;
-@custom-selector :--s-app-card__tags--no-list
-  :--s-app-card > ul:only-of-type;
+
+@custom-selector :--s-app-card__repo
+  :--s-app-card > li:last-of-type;
 
 @custom-selector :--s-app-card__link
   :--s-app-card > a:last-child;
@@ -33,7 +34,7 @@
 
   text-align: center;
 }
-:--s-app-card__list {
+:--s-app-card__types {
   flex-grow: 1;
 }
 
@@ -47,7 +48,7 @@
 
 
 /* Items */
-:--s-app-card__list {
+:--s-app-card__types {
   padding-inline-start: 0;
 
   display: flex;
@@ -59,10 +60,10 @@
   margin-block: auto;
   flex-grow: 0;
 }
-:--s-app-card__list > li {
+:--s-app-card__types > li {
   display: inline;
 }
-:--s-app-card__list > li:not(:last-child)::after {
+:--s-app-card__types > li:not(:last-child)::after {
   content: "•";
   display: inline;
   margin-inline: 0.25em;
@@ -71,25 +72,23 @@
 
 
 /* Tags */
-:--s-app-card__tags {
-  list-style: none;
-  padding-inline-start: 0;
-  margin-block: unset;
-
+:--s-app-card__flags {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-:--s-app-card__tags--no-list {
+:--s-app-card__flags {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block: unset;
+}
+:--s-app-card__flags:not(:--s-app-card__types ~ *) {
   /* To fill parent with this item, but keep text aligned to bottom */
   flex-grow: 1;
   align-items: end;
 }
-:--s-app-card__tags > li:where(
-  :not(:first-child),
-  :only-child
-) {
-    margin-left: auto;
+:--s-app-card__flags > :only-child {
+  margin-left: auto;
 }
 
 

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;
+}