enhance: white headings in s-footer (#391)

* enhance: white headings in s-footer * build: :--headings less verbose
TACC · Sep 6, 2024 · fb8147b · fb8147b
1 parent 88dcef4
commit fb8147b
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 15 deletions.
diff --git a/dist/core-styles.cms.css b/dist/core-styles.cms.css
diff --git a/dist/core-styles.portal.css b/dist/core-styles.portal.css
diff --git a/dist/trumps/s-footer.css b/dist/trumps/s-footer.css
diff --git a/src/lib/_imports/tools/selectors.common.css b/src/lib/_imports/tools/selectors.common.css
@@ -11,4 +11,4 @@ Styleguide Tools.CustomSelectors.MultipleElements
 @custom-selector :--main-content    [role="main"], main;
 @custom-selector :--portal-content  #root;
 @custom-selector :--modal           .modal;
-@custom-selector :--heading         :is(h1, h2, h3, h4, h5, h6);
+@custom-selector :--heading         h1, h2, h3, h4, h5, h6;
diff --git a/src/lib/_imports/trumps/s-footer.css b/src/lib/_imports/trumps/s-footer.css
@@ -1,3 +1,5 @@
+@import url("../tools/selectors.css");
+
 @import url("./s-footer.properties.css");
 
 .s-footer {
@@ -23,6 +25,10 @@
   color: var(--global-color-accent--light-old);
 }
 
+.s-footer :--heading {
+  color: var(--global-color-primary--xx-light);
+}
+
 /* Let paragraphs behave normally */
 .s-footer > p {
   margin: revert;

diff --git a/src/lib/_imports/trumps/s-footer/config.yml b/src/lib/_imports/trumps/s-footer/config.yml
@@ -25,3 +25,11 @@ variants:
     context:
       shouldLoadPortal: true
       shouldSkipPattern: true
+  - name: complex
+    status: prototype
+    context:
+      modifier: thick
+      isComplex: true
+      bodyContent: More complex footers may inlcude heading(s) and list(s) of links.
+      shouldLoadCMS: true
+      shouldLoadBootstrap: true
diff --git a/src/lib/_imports/trumps/s-footer/s-footer.hbs b/src/lib/_imports/trumps/s-footer/s-footer.hbs
@@ -6,19 +6,41 @@
       Sample body content. Footer is at bottom of page.
     {{/if}}
   </p>
-  <p>
     {{#if shouldLoadCMS}}
-      CMS always uses <a href="{{path '../detail/s-footer--thick'}}" target="_parent">thick</a> footer.
-    {{else if shouldLoadPortal}}
-      Portal always uses <a href="{{path '../detail/s-footer--thin'}}" target="_parent">thin</a> footer.
-    {{/if}}
+  <p>
+    CMS always uses <a href="{{path '../detail/s-footer--thick'}}" target="_parent">thick</a> footer.
   </p>
-</main>
-<footer class="s-footer{{#if modifier }} s-footer--{{ modifier }}{{/if}}">
+    {{/if}}{{#if shouldLoadPortal}}
   <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>.
+    Portal always uses <a href="{{path '../detail/s-footer--thin'}}" target="_parent">thin</a> footer.
   </p>
+    {{/if}}{{#if shouldLoadBootstrap}}
+  <p>
+    This pattern is not protected from Bootstrap side-effects (e.g. heading margin).
+  </p>
+    {{/if}}
+</main>
+<footer class="s-footer{{#if modifier }} s-footer--{{ modifier }}{{/if}}">
+  {{#if isComplex}}
+  <div style="text-align:left;">
+    <h4>About</h4>
+    <p>
+      <a href="#">About TACC</a><br>
+      <a href="#">Jobs at TACC</a><br>
+      <a href="#">Contact</a><br>
+      <a href="#">Staff Directory</a><br>
+      <a href="#">Tours</a><br>
+      <a href="#">Citing TACC</a><br>
+      <a href="#">Security and Compliance</a><br>
+      <a href="#">Help</a>
+    </p>
+  </div>
+  {{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>