@tacc/core-styles 0.5.1

package/source/_imports/components/c-data-list.css

@@ -0,0 +1,222 @@
+/*
+Data List
+
+A list of pairs of values, where the titles/names of the values are aligned with each other and the values themselves are aligned with each other.
+
+Features:
+- Layout can be horizontal or vertical, wide or narrow.
+- Narrow layouts have minimal spacing. Wide layouts have extra spacing.
+- All layouts truncate keys. Some layouts truncate values.
+- Table keys do not have colons. Other keys do have colons.
+
+Notices:
+- User _should_ add arrangement and spacing modifiers. See Caveats #1.
+- The _recommended_ markup is a description list (`<dl>`) or a `<table>`.
+
+Caveats:
+1. With no modifiers added, the result is feature-limited vertical arrangement.
+2. No provided repsonsive design solutions; users must apply their own.
+3. Inflexible support for `<table>`s (flex and truncation in table is fragile).
+    - No protection from nesting caveats (whether is-wide or is-narrow takes precedence when one is nested inside the other).
+    - Specific (yet semantic) markup is required to benefit from all features.
+
+.c-data-list--is-horz - (arrangement) A horizontal list
+.c-data-list--is-vert - (arrangement) A vertical list
+.c-data-list--is-narrow - (spacing) A list that has limited horizontal space
+.c-data-list--is-wide - (spacing) A list that has ample horizontal space
+
+Markup: c-data-list.html
+
+Styleguide Components.DataList
+*/
+@import url("_imports/tools/x-truncate.css");
+
+
+
+
+
+/* Base i.e. Container */
+
+table.c-data-list {
+  border-left: 0;
+  border-right: 0;
+}
+
+
+
+
+
+/* Elements i.e. Children */
+
+/* To truncate text */
+.c-data-list__key {
+  @extend %x-truncate--one-line;
+}
+@supports(text-overflow: ':') {
+  .c-data-list__key:not(th) {
+    --text-overflow: ':';
+  }
+}
+
+/* To space out elements (tables) */
+th.c-data-list__key,
+td.c-data-list__value {
+  padding-block: 0.5em;
+}
+
+/* To add colon (non-tables) */
+.c-data-list__key:not(th)::after {
+  content: ':';
+  display: inline;
+  padding-right: 0.25em;
+}
+
+/* To add space (instead of colon) (tables) */
+th.c-data-list__key {
+  padding-right: 0.25em;
+}
+
+
+
+
+/* Modifiers i.e. Types */
+/* FAQ: The `:not(table)` selectors avoid nesting caveats by using `>` */
+
+
+
+/* Horizontal */
+
+.c-data-list--is-horz {
+  display: flex;
+  flex-direction: row;
+}
+dl.c-data-list--is-horz,
+.c-data-list--is-horz dd.c-data-list__value {
+  margin-bottom: 0; /* overwrite Bootstrap's `_reboot.scss` */
+}
+
+/* To propogate flexbox layout so cells are flex items */
+table.c-data-list--is-horz tr,
+table.c-data-list--is-horz tbody {
+  min-width: 0;
+
+  display: flex;
+  flex-direction: row;
+}
+
+/* To space out key and value (non-tables) */
+.c-data-list--is-horz:not(table).c-data-list--is-narrow
+  > .c-data-list__key ~ .c-data-list__key::before {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.c-data-list--is-horz:not(table).c-data-list--is-wide
+  > .c-data-list__key ~ .c-data-list__key::before {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+/* To space out key and value (tables) */
+table.c-data-list--is-horz.c-data-list--is-narrow
+  tr:not(:first-child) th.c-data-list__key {
+  padding-left: 0.5em;
+}
+table.c-data-list--is-horz.c-data-list--is-narrow
+  td.c-data-list__value {
+  margin-right: 0.5em; /* use margin because text would show through padding */
+}
+table.c-data-list--is-horz.c-data-list--is-wide
+  tr:not(:first-child) th.c-data-list__key {
+  padding-left: 1em;
+}
+table.c-data-list--is-horz.c-data-list--is-wide
+  td.c-data-list__value {
+  margin-right: 1em; /* use margin because text would show through padding */
+}
+
+
+
+/* Vertical */
+
+table.c-data-list--is-vert {
+  width: 100%;
+  table-layout: fixed;
+}
+
+/* To overwrite Bootstrap `_reboot.scss` */
+.c-data-list--is-vert:not(table) > .c-data-list__value {
+  margin-left: 0;
+}
+
+/* To space out key and value (tables) */
+.c-data-list--is-vert:not(table).c-data-list--is-narrow > .c-data-list__value,
+table.c-data-list--is-vert.c-data-list--is-narrow td.c-data-list__value {
+  padding-left: 0;
+}
+.c-data-list--is-vert:not(table).c-data-list--is-wide > .c-data-list__value,
+table.c-data-list--is-vert.c-data-list--is-wide td.c-data-list__value {
+  padding-left: 2.5em; /* font-size 10px gives 40px (Firefox default margin) */
+}
+
+
+
+
+
+/* Edge Cases */
+
+
+
+/* Element Borders */
+
+/* To remove most borders (tables) */
+table.c-data-list--is-vert th.c-data-list__key,
+td.c-data-list__value {
+  border-left: 0;
+  border-right: 0;
+}
+table.c-data-list--is-horz th.c-data-list__key,
+table.c-data-list--is-horz td.c-data-list__value {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+/* To keep real border between key and value (tables) */
+/* CAVEAT: Certain fonts may limit border height (see "Font Alignment") */
+table.c-data-list--is-horz tr:first-child th.c-data-list__key {
+  border-left: 0;
+}
+table.c-data-list--is-horz th.c-data-list__key {
+  border-right: 0;
+}
+
+/* To add fake border between key and value (non-tables) */
+.c-data-list--is-horz:not(table)
+  > .c-data-list__key ~ .c-data-list__key::before {
+  content: '|';
+  display: inline-block;
+}
+
+
+
+/* Truncate Values */
+/* FAQ: Truncate when doing is unlikely to almost entirely obscure text */
+
+.c-data-list--should-truncate-values .c-data-list__value {
+  @extend %x-truncate--one-line;
+}
+
+
+
+/* Font Alignment */
+/* NOTE: If font has different internal baseline per weight, use these */
+/* FAQ: "Benton Sans" needs this solution (as of 2021-07) */
+
+/* NOTE: This assumes key and value are flex items, not inline display */
+.c-data-list--is-horz:not(table) { align-items: baseline; }
+
+/* CAVEAT: On Firefox (for "Benton Sans"), `align-items` is ineffectual */
+/* CAVEAT: This causes <th> and <td> cell borders to be offset */
+table.c-data-list--is-horz tr { align-items: baseline; }
+
+/* NOTE: This assumes key and value are inline display, not flex items */
+table.c-data-list--is-vert th.c-data-list__key,
+table.c-data-list--is-vert td.c-data-list__value { vertical-align: baseline; }

package/source/_imports/components/c-data-list.html

@@ -0,0 +1,145 @@
+<!-- D. Lists -->
+<article>
+  <h4>Horizontal &amp; Wide &amp; Truncate Values</h4>
+  <dl class="c-data-list
+             c-data-list--is-horz
+             c-data-list--is-wide
+             c-data-list--should-truncate-values">
+    <dt class="c-data-list__key">Name</dt>
+    <dd class="c-data-list__value">King</dd>
+    <dt class="c-data-list__key">Surname</dt>
+    <dd class="c-data-list__value">Kong</dd>
+    <dt class="c-data-list__key">Favorite Fruit</dt>
+    <dd class="c-data-list__value">Banana</dd>
+  </dl>
+</article>
+<article>
+  <h4>Horizontal &amp; Narrow</h4>
+  <dl class="c-data-list
+             c-data-list--is-horz
+             c-data-list--is-narrow">
+    <dt class="c-data-list__key">Name</dt>
+    <dd class="c-data-list__value">King</dd>
+    <dt class="c-data-list__key">Surname</dt>
+    <dd class="c-data-list__value">Kong</dd>
+    <dt class="c-data-list__key">Favorite Fruit</dt>
+    <dd class="c-data-list__value">Banana</dd>
+  </dl>
+</article>
+<article>
+  <h4>Vertical &amp; Wide</h4>
+  <dl class="c-data-list
+             c-data-list--is-vert
+             c-data-list--is-wide">
+    <dt class="c-data-list__key">Name</dt>
+    <dd class="c-data-list__value">King</dd>
+    <dt class="c-data-list__key">Surname</dt>
+    <dd class="c-data-list__value">Kong</dd>
+    <dt class="c-data-list__key">Favorite Fruit</dt>
+    <dd class="c-data-list__value">Banana</dd>
+  </dl>
+</article>
+<article>
+  <h4>Vertical &amp; Narrow &amp; Truncate Values</h4>
+  <dl class="c-data-list
+             c-data-list--is-vert
+             c-data-list--is-narrow
+             c-data-list--should-truncate-values">
+    <dt class="c-data-list__key">Name</dt>
+    <dd class="c-data-list__value">King</dd>
+    <dt class="c-data-list__key">Surname</dt>
+    <dd class="c-data-list__value">Kong</dd>
+    <dt class="c-data-list__key">Favorite Fruit</dt>
+    <dd class="c-data-list__value">Banana</dd>
+  </dl>
+</article>
+
+
+
+<!-- Tables -->
+<article>
+  <h4>Horizontal &amp; Wide</h4>
+  <table class="c-data-list
+                c-data-list--is-horz
+                c-data-list--is-wide">
+    <tbody>
+      <tr>
+        <th class="c-data-list__key">Name</th>
+        <td class="c-data-list__value">King</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Surname</th>
+        <td class="c-data-list__value">Kong</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Favorite Fruit</th>
+        <td class="c-data-list__value">Banana</td>
+      </tr>
+    </tbody>
+  </table>
+</article>
+<article>
+  <h4>Horizontal &amp; Narrow</h4>
+  <table class="c-data-list
+                c-data-list--is-horz
+                c-data-list--is-narrow">
+    <tbody>
+      <tr>
+        <th class="c-data-list__key">Name</th>
+        <td class="c-data-list__value">King</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Surname</th>
+        <td class="c-data-list__value">Kong</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Favorite Fruit</th>
+        <td class="c-data-list__value">Banana</td>
+      </tr>
+    </tbody>
+  </table>
+</article>
+<article>
+  <h4>Vertical &amp; Wide &amp; Truncate Values</h4>
+  <table class="c-data-list
+                c-data-list--is-vert
+                c-data-list--is-wide
+                c-data-list--should-truncate-values">
+    <tbody>
+      <tr>
+        <th class="c-data-list__key">Name</th>
+        <td class="c-data-list__value">King</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Surname</th>
+        <td class="c-data-list__value">Kong</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Favorite Fruit</th>
+        <td class="c-data-list__value">Banana</td>
+      </tr>
+    </tbody>
+  </table>
+</article>
+<article>
+  <h4>Vertical &amp; Narrow &amp; Truncate Values</h4>
+  <table class="c-data-list
+                c-data-list--is-vert
+                c-data-list--is-narrow
+                c-data-list--should-truncate-values">
+    <tbody>
+      <tr>
+        <th class="c-data-list__key">Name</th>
+        <td class="c-data-list__value">King</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Surname</th>
+        <td class="c-data-list__value">Kong</td>
+      </tr>
+      <tr>
+        <th class="c-data-list__key">Favorite Fruit</th>
+        <td class="c-data-list__value">Banana</td>
+      </tr>
+    </tbody>
+  </table>
+</article>

package/source/_imports/components/c-footer.css

@@ -0,0 +1,67 @@
+/*
+Footer
+
+The website footer. Project customization should be minimal.
+
+Markup: c-footer.html
+
+Styleguide Components.Footer
+*/
+
+.c-footer {
+  /* TODO: Use global custom property when available */
+  --line-height: 1.5; /* value (not unit) from Bootstrap via `body` */
+  --min-line-count: 2;
+
+  /* The minimum height of the footer should be 2 lines of text, plus padding */
+  box-sizing: content-box;
+  min-height: calc(var(--line-height) * var(--min-line-count) * 1em);
+
+  /* Center content vertically (assuming unknown height) */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  /* FAQ: Value was manually calculated, then rounded to nearest multiple of 5
+          i.e. `orig. value 12px` + `( total vertical padding of content / 2 )`
+          (vertical padding was added via `style` attributes on CMS markup) */
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-primary--xx-dark);
+
+  font-size: 12px;
+  text-align: center;
+}
+/* TODO: Use "custom media query" for each standard Bootstrap media query */
+@media only screen and (max-width: 640px) {
+  .c-footer {
+    padding-left: 5%;
+    padding-right: 5%;
+  }
+}
+@media only screen and (min-width: 641px) and (max-width: 767px) {
+  .c-footer {
+    padding-left: 7.5%;
+    padding-right: 7.5%;
+  }
+}
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .c-footer {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+}
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .c-footer {
+    padding-left: 12.5%;
+    padding-right: 12.5%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .c-footer {
+    padding-left: 15%;
+    padding-right: 15%;
+  }
+}

package/source/_imports/components/c-footer.html

@@ -0,0 +1,3 @@
+<footer class="c-footer {{modifier_class}}">
+  ©2020 Texas Advanced Computing Center
+</footer>

package/source/_imports/components/c-image-map.css

@@ -0,0 +1,26 @@
+/*
+Image Map
+
+An image with (optional) counters and (related) captions.
+
+Caveat: The element for `.c-image-map__item-toggle` must support `:focus`; for options, see https://stackoverflow.com/a/1600194.
+
+Notice: These classes apply opinionated styles (based on https://texascale.org/2019/visualizing-science/whats-in-a-node/) that should be revisited when alternative styles arrive (from future implementations):
+
+- `.c-image-map--has-caption-toggle-alignment`
+- `.c-image-map__item--unmapped`
+
+.c-image-map--should-position-items - Allow items to respect absolute position that is relative to the image
+.c-image-map--has-item-counters - Renders counter element and text for each item
+.c-image-map--has-toggle-counters - Renders counter text inside each toggle
+.c-image-map--has-caption-toggle-alignment - Standard alignment of captions and toggles
+
+Markup: c-image-map.html
+
+Styleguide Components.ImageMap
+*/
+
+/* Styles are organized by OOCSS methodology */
+/* SEE: https://confluence.tacc.utexas.edu/x/VwALBg */
+@import url("./c-image-map.structure.css");
+@import url("./c-image-map.skin.css");

package/source/_imports/components/c-image-map.html

@@ -0,0 +1,4 @@
+<ul>
+    <li><a href="https://github.com/TACC/Core-CMS-Resources/blob/main/texascale-org/templates/snippets/image-map-whats-in-a-node-markup.html">Texascale's "What's in a Node?"</a></li>
+    <li><a href="https://github.com/TACC/Core-CMS-Resources/blob/main/texascale-org/templates/snippets/image-map-frontera-secret-sauce-markup.html">Texascale's "Frontera Secret Sauce"</a></li>
+</ul>

package/source/_imports/components/c-image-map.skin.css

@@ -0,0 +1 @@
+/* No skin styles exist, yet */