@tacc/core-styles 2.55.1 → 2.56.1

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

@@ -1,48 +1,77 @@
 <main>
+  {{#if bodyContent}}
   <p>
-    {{#if bodyContent}}
-      {{{bodyContent}}}
-    {{else}}
-      Sample body content. Footer is at bottom of page.
-    {{/if}}
+    {{{bodyContent}}}
   </p>
-    {{#if shouldLoadCMS}}
-  <p>
-    CMS always uses <a href="{{path '../detail/s-footer--thick'}}" target="_parent">thick</a> footer.
-  </p>
-    {{/if}}{{#if shouldLoadPortal}}
-  <p>
-    Portal always uses <a href="{{path '../detail/s-footer--thin'}}" target="_parent">thin</a> footer.
-  </p>
-    {{/if}}{{#if shouldLoadBootstrap}}
+  {{/if}}
+  {{#if isPortalOrCMS}}
   <p>
-    This pattern is not protected from Bootstrap side-effects (e.g. heading margin).
+    Note:
   </p>
-    {{/if}}
+  <ul>
+    <li>CMS footer is always <a href="{{path '../detail/s-footer--thick'}}" target="_parent">thick</a>.</li>
+    <li>Portal footer is always <a href="{{path '../detail/s-footer--thin'}}" target="_parent">thin</a>.</li>
+  </ul>
+  {{/if}}
 </main>
-<footer class="s-footer{{#if modifier }} s-footer--{{ modifier }}{{/if}}">
-  {{#if isComplex}}
-  <div style="text-align:left;">
+<footer class="
+  s-footer
+  {{#if width }}
+  s-footer--{{ width }}
+  {{/if}}
+  {{#if weight }}
+  s-footer--{{ weight }}
+  {{/if}}
+  {{#if hasIdentityColumn}}
+  row no-gutters pr-md-0
+  {{/if}}
+">
+  {{#if hasIdentityColumn}}
+  <nav class="col col-auto col-lg-2
+              mr-5 mb-lg-0">
     <h4>About</h4>
     <p>
-      <a href="#">About TACC</a><br>
-      <a href="#">Jobs at TACC</a><br>
+      <a href="#">Mission</a><br>
       <a href="#">Contact</a><br>
-      <a href="#">Staff Directory</a><br>
+      <a href="#">Staff</a><br>
+    </p>
+  </nav>
+  <nav class="col col-auto col-lg-2
+              mr-5 mb-lg-0">
+    <h4>Services</h4>
+    <p>
+      <a href="#">Data</a><br>
+      <a href="#">AI</a><br>
+      <a href="#">HPC</a><br>
+    </p>
+  </nav>
+  <nav class="col col-lg-2
+              mr-5 mb-lg-0">
+    <h4>Resources</h4>
+    <p>
+      <a href="#">Jobs</a><br>
       <a href="#">Tours</a><br>
-      <a href="#">Citing TACC</a><br>
-      <a href="#">Security and Compliance</a><br>
-      <a href="#">Help</a>
+      <a href="#">Security</a>
     </p>
     <hr>
-    <a href="#" class="c-button c-button--primary">Button</a>
-  </div>
-  {{else}}
+    <a href="#" class="c-button c-button--primary">Help</a>
+  </nav>
+  <aside class="col col-12 col-md-4
+                ml-md-auto
+                s-footer__identity">
     <p>
-      ©2023
-      <a href="https://www.tacc.utexas.edu/" target="_blank">Texas Advanced Computing Center</a>,
-      <a href="https://www.utexas.edu/" target="_blank">The University of Texas at Austin</a>,
-      <a href="https://research.utexas.edu/" target="_blank">Office of the Vice President for Research</a>.
+      The <a href="https://www.tacc.utexas.edu/" target="_blank">Texas Advanced Computing Center</a> is part of the
+      <a href="https://research.utexas.edu/" target="_blank">Office of the Vice President for Research</a> at
+      <a href="https://www.utexas.edu/" target="_blank">The University of Texas at Austin</a>.
+      Pack my red box with five dozen quality jugs. <a href="#">Inline link in prose</a>.
     </p>
+  </aside>
+  {{else}}
+  <p>
+    ©2023
+    <a href="https://www.tacc.utexas.edu/" target="_blank">Texas Advanced Computing Center</a>,
+    <a href="https://www.utexas.edu/" target="_blank">The University of Texas at Austin</a>,
+    <a href="https://research.utexas.edu/" target="_blank">Office of the Vice President for Research</a>.
+  </p>
   {{/if}}
 </footer>

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

@@ -1,24 +1,46 @@
 @import url("../tools/selectors.css");
 @import url("../components/c-button.selectors.css");
+@import url("../tools/media-queries.css");
 
 @import url("./s-footer.properties.css");
 
-.s-footer {
-  padding-block: 15px;
+/* MIXINS */
+
+@define-mixin footer-link {
+  color: inherit;
+
+  text-decoration-line: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+
+  &:hover {
+    text-decoration-color: inherit;
+  }
+}
+
+/* BASE */
 
-  color: var(--global-color-primary--x-light);
+.s-footer {
+  color: var(--global-color-primary--light);
   background-color: var(--global-color-primary--xx-dark);
 
   font-size: var(--global-font-size--small);
-  text-align: center;
 
   & h2 {
     color: currentColor;
   }
-  & a:not(:--c-button) {
-    color: var(--global-color-accent--light-alt);
+
+  &:not(:has(.s-footer__identity)) {
+    text-align: center;
+
+    & a:not(:--c-button) {
+      @mixin footer-link;
+    }
   }
 }
+
+
+/* MODIFIERS */
+
 .s-footer--thick {
   padding-inline: var(--pad-horz--thick);
 }
@@ -26,6 +48,33 @@
   padding-inline: var(--pad-horz--thin);
 }
 
+.s-footer:not(.s-footer--fat) {
+  padding-block: var(--pad-vert--thin);
+}
+.s-footer--fat {
+  padding-block: var(--pad-vert--thick);
+}
+
+/* ELEMENTS */
+
+.s-footer__identity {
+  background-color: var(--global-color-primary--x-dark);
+
+  /* To stretch identity column to fill height */
+  .s-footer--fat & {
+    padding-inline: var(--pad-horz--thick);
+
+    margin-block: calc(-1 * var(--pad-vert--thick));
+    padding-block: var(--pad-vert--thick);
+  }
+
+  & a:not(:--c-button) {
+    @mixin footer-link;
+  }
+}
+
+/* HTML ELEMENTS */
+
 /* Let paragraphs behave normally */
 .s-footer > p {
   margin: revert;
@@ -36,4 +85,5 @@
 /* To suggest semantic solution for horiontal lines */
 .s-footer hr {
     margin-block: 1rem;
+    border-color: var(--global-color-primary--xx-light);
 }

package/src/lib/_imports/trumps/s-footer.properties.css

@@ -1,4 +1,6 @@
 .s-footer {
+  --pad-vert--thick: 36px;
+  --pad-vert--thin: 15px;
   --pad-horz--thick: 36px; /* mimic `.s-header.navbar { --nav-padding-horz }` */
   --pad-horz--thin: 15px;
 }