@tacc/core-styles 0.5.1

package/source/_imports/trumps/s-article-preview.css

@@ -0,0 +1,253 @@
+/*
+Article Preview
+
+A preview of an article (to be used in a `s-article-list`). Content __must__ come in the order and use the tags defined by the example markup.
+
+Markup: s-article-preview.html
+
+Styleguide Trumps.Scopes.ArticlePreview
+*/
+@import url("_imports/tools/x-truncate.css");
+@import url("_imports/tools/x-article-link.css");
+
+
+
+
+
+/* Block */
+
+.s-article-preview {
+  position: relative; /* for absolutely positioned "Children: Link" */
+
+  display: flex;
+  flex-direction: column;
+}
+
+
+
+
+
+/* Children */
+
+
+
+/* Children: Media */
+
+.s-article-preview p:first-child {
+  order: 1;
+
+  overflow: hidden;
+
+  margin-bottom: 0.8rem; /* overwrite Bootstrap */
+}
+.s-article-preview p:first-child > img {
+  /* To center image within container */
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.s-article-preview p:first-child > img.img-fluid {
+  /* To ensure super wide or tall image do not have negative space / gaps */
+  width: 100%;
+  object-fit: cover;
+  height: 100%; /* overwrite `.img-fluid` *//* NOTE: Sould this be standard? */
+}
+/* (List) News */
+.s-article-list--news .s-article-preview p:first-child {
+  height: 180px;
+}
+/* (List) Allocations */
+.s-article-list--allocations .s-article-preview p:first-child {
+  height: 10.0rem;
+}
+/* (List) Events */
+.s-article-list--events .s-article-preview p:first-child {
+  display: none;
+}
+
+
+/* Children: Title */
+
+.s-article-preview h3 {
+  order: 3;
+
+  margin-top: 0; /* overwrite Bootstrap and browser */
+  margin-bottom: 0.8rem; /* overwrite Bootstrap and browser */
+
+  font-size: 1.8rem;
+  font-weight: var(--bold);
+  line-height: 2.4rem;
+}
+/* (List) */
+[class*="s-article-list--"] .s-article-preview h3 {
+  @extend %x-truncate--one-line;
+}
+/* (List) Allocations */
+.s-article-list--allocations .s-article-preview h3 {
+  font-size: 1.6rem;
+  font-weight: var(--bold);
+  color: inherit;
+}
+/* (List) Events */
+.s-article-list--events .s-article-preview h3 {
+  font-size: 1.4rem;
+}
+
+
+
+/* Children: Abstract */
+
+.s-article-preview p:not(:first-child):not(:last-child) {
+  order: 4;
+
+  margin-bottom: 0; /* overwrite Bootstrap and browser */
+
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+/* (List) */
+[class*="s-article-list--"] .s-article-preview p:not(:first-child):not(:last-child) {
+  @extend %x-truncate--many-lines;
+  --lines: 3;
+}
+/* (List) Allocations */
+.s-article-list--allocations .s-article-preview p:not(:first-child):not(:last-child) {
+  display: none;
+}
+/* (List) Events */
+.s-article-list--events .s-article-preview p:not(:first-child):not(:last-child) {
+  font-size: 1.4rem;
+  color: var(--global-color-primary--xx-dark);
+}
+
+
+
+/* Children: Metadata */
+
+.s-article-preview ul {
+  order: 2;
+
+  display: flex;
+  flex-direction: column;
+
+  list-style: none;
+  padding-left: 0; /* overwrite `site.css` and browser */
+
+  margin-bottom: 0.8rem; /* overwrite Bootstrap */
+}
+/* (List) Allocations */
+.s-article-list--allocations .s-article-preview ul {
+  order: 5;
+}
+
+/* Children: Metadata: Date */
+
+.s-article-preview ul > li:nth-child(1) {
+  order: 2;
+
+  font-weight: var(--medium);
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+/* (List) News */
+.s-article-list--news .s-article-preview ul > li:nth-child(1) {
+  margin-bottom: 0.8rem; /* overwrite Bootstrap */
+  font-size: 1.0rem;
+}
+.s-article-list--news .s-article-preview ul > li:nth-child(1)::before {
+  content: 'Published: ';
+  white-space: pre;
+}
+/* (List) Events */
+.s-article-list--events .s-article-preview ul > li:nth-child(1) {
+  font-size: 1.4rem;
+  color: var(--global-color-accent--normal);
+}
+/* (List) Allocations */
+.s-article-list--allocations .s-article-preview ul > li:nth-child(1) {
+  font-size: 1.6rem;
+}
+.s-article-list--allocations .s-article-preview ul > li:nth-child(1)::before {
+  content: 'Submission Deadlines: ';
+  white-space: pre;
+}
+
+/* Children: Metadata: Type */
+
+.s-article-preview ul > li:nth-child(2) {
+  order: 1;
+
+  font-size: 1.2rem;
+  font-weight: var(--bold);
+  text-transform: uppercase;
+}
+/* (List) Events */
+.s-article-list--events .s-article-preview ul > li:nth-child(2),
+/* (List) Allocations */
+.s-article-list--allocations .s-article-preview ul > li:nth-child(2) {
+  display: none;
+}
+
+/* Children: Metadata: Author */
+
+.s-article-preview ul > li:nth-child(3) {
+  order: 3;
+}
+/* (List) News */
+.s-article-list--news .s-article-preview ul > li:nth-child(3),
+/* (List) Events */
+.s-article-list--events .s-article-preview ul > li:nth-child(3),
+/* (List) Allocations */
+.s-article-list--allocations .s-article-preview ul > li:nth-child(3) {
+  display: none;
+}
+
+
+
+/* Children: Link */
+
+.s-article-preview p:last-child {
+  margin-bottom: 0; /* overwite Bootstrap and browser */
+}
+
+/* Expand link to cover its container */
+.s-article-preview p:last-child {
+  z-index: 1; /* ensure Link appears over Media */
+}
+.s-article-preview p:last-child > a {
+  color: transparent; /* ensure Link _text_ is invisible (allow decoration) */
+
+  @extend .x-article-link-stretch;
+}
+.s-article-list--layout-gapless .s-article-preview p:last-child > a {
+  @extend .x-article-link-stretch--gapless;
+}
+/* Give link state (pseudo-class) feedback */
+.s-article-preview p:last-child > a:hover {
+  @extend .x-article-link-hover;
+}
+.s-article-list--layout-gapless .s-article-preview p:last-child > a:hover {
+  @extend .x-article-link-hover--gapless;
+}
+
+
+
+
+
+/* Modifiers */
+
+
+
+/* Modifiers: (List) News, Allocations, Evetns, etc. */
+/* SEE: All "Children" styles */
+
+
+
+/* Modifiers: (List) Layout: Options */
+
+.s-article-list--layout-compact .s-article-preview > * {
+  margin-bottom: 0; /* overwrite `.s-article-preview > …` */
+}

package/source/_imports/trumps/s-article-preview.html

@@ -0,0 +1,30 @@
+<article class="s-article-preview">
+  <p><img src="…" alt="…" /></p>
+  <h3>
+    A Long or Short Title of Article
+  </h3>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </p>
+  <ul>
+    <li>July 7</li>
+    <li>Science News</li>
+    <li>Wesley Bomar</li>
+  </ul>
+</article>
+
+<!-- TODO: Use a component (requires a plugin) -->
+<!--
+<article class="c-article-preview">
+  <img class="c-article-preview__media" src="…" alt="…" />
+  <h3 class="c-article-preview__title">
+    A Long or Short Title of Article
+  </h3>
+  <p class="c-article-preview__abstract">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </p>
+  <time class="c-article-preview__date" datetime="2018-07-07">July 7</time>
+  <small class="c-article-preview__type">Science News</small>
+  <small class="c-article-preview__author">Wesley Bomar</small>
+</article>
+-->

package/source/_imports/trumps/s-blockquote.css

@@ -0,0 +1,45 @@
+/*
+Blockquote
+
+A [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote).
+
+Markup:
+<figure class="s-blockquote">
+  <blockquote cite="https://www.huxley.net/bnw/four.html">
+    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
+  </blockquote>
+  <figcaption>Aldous Huxley, <cite>Brave New World</cite></figcaption>
+</figure>
+
+Styleguide Trumps.Scopes.Blockquote
+*/
+
+.s-blockquote {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+.s-blockquote blockquote {
+  margin-bottom: 0; /* overwrite Bootstrap */
+
+  font-size: 1.125em;
+  font-style: italic;
+}
+.s-blockquote blockquote p {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.s-blockquote blockquote p::before { content: '“'; }
+.s-blockquote blockquote p::after { content: '”'; }
+
+.s-blockquote figcaption {
+  margin-top: 0.3em;
+
+  font-size: 1em;
+}
+.s-blockquote figcaption::before {
+  content: "— ";
+}
+
+.s-blockquote cite {
+  font-style: normal; /* overwrite browser */
+}

package/source/_imports/trumps/s-breadcrumbs.css

@@ -0,0 +1,69 @@
+/*
+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.
+
+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("_imports/tools/x-truncate.css");
+
+
+
+
+
+/* Base i.e. Container */
+
+nav.s-breadcrumbs {
+  padding-top: 15px;
+
+  font-size: var(--global-font-size--x-small);
+
+  text-transform: uppercase;
+}
+
+
+
+/* Elements i.e. Content */
+
+/* To undo default list styles ONLY for major breadcrumbs */
+/* FAQ: Minor breadcrumbs have not been designed, so we should not unstyle it */
+nav.s-breadcrumbs ol {
+  list-style: none; /* overwrite browser styles */
+  padding-left: 0; /* overwrite html-elements.css */
+
+  font-weight: var(--global-font-weight--medium);
+}
+
+ol.s-breadcrumbs li,
+nav.s-breadcrumbs ol li {
+  display: inline-block;
+}
+
+ol.s-breadcrumbs li + li::before,
+nav.s-breadcrumbs ol li + li::before {
+  content: ' > ';
+}
+
+nav.s-breadcrumbs ol li:last-child span {
+  font-weight: var(--bold);
+}

package/source/_imports/trumps/s-cms-nav.css

@@ -0,0 +1,11 @@
+/*
+CMS Navigation
+
+Styles for elements within CMS navigation that has third-party code:
+
+- Bootstrap 4.0.0
+
+Markup: s-cms-nav.html
+
+Styleguide Trumps.Scopes.CMSNav
+*/

package/source/_imports/trumps/s-cms-nav.html

@@ -0,0 +1,41 @@
+<!-- FAQ:
+
+This is the markup of the #s-header, as of 2020-03-11,
+from https://frontera-portal.tacc.utexas.edu/. It has:
+
+- Bootstrap class names
+- extra markup (`a > span`)
+-->
+<ul class="s-cms-nav  navbar-nav">
+  <li class="nav-item active">
+    <a class="nav-link" href="/"><span>Frontera</span></a>
+  </li>
+
+  <li class="nav-item">
+    <a class="nav-link" href="/training/"><span>Training</span></a>
+  </li>
+
+  <li class="nav-item">
+    <a class="nav-link" href="/user-guide/"><span>User Guide</span></a>
+  </li>
+
+  <li class="nav-item">
+    <a class="nav-link" href="/allocations/"><span>Allocations</span></a>
+  </li>
+
+  <li class="nav-item">
+    <a class="nav-link" href="/fellowship/"><span>Fellowships</span></a>
+  </li>
+
+  <li class="nav-item">
+    <a class="nav-link" href="/news/"><span>News</span></a>
+  </li>
+
+  <li class="nav-item">
+    <a class="nav-link" href="/about/"><span>About</span></a>
+  </li>
+
+  <li class="nav-item">
+    <a class="nav-link" href="/help/"><span>Help</span></a>
+  </li>
+</ul>

package/source/_imports/trumps/s-document.css

@@ -0,0 +1,142 @@
+/*
+Document
+
+Styles for elements within a document page or section
+
+Styleguide Trumps.Scopes.Document
+*/
+
+.s-document {
+  margin-bottom: var(--global-space--large);
+}
+
+
+
+
+
+/* ELEMENTS */
+
+
+/* ELEMENTS: Content Sectioning */
+
+.s-document h2 {
+  margin-bottom: var(--global-space--normal);
+}
+
+.s-document h3 {
+  margin-bottom: var(--global-space--normal);
+}
+
+/* ELEMENTS: Text Content */
+
+.s-document blockquote {
+  opacity: 0.75;
+  border: var(--global-border--normal);
+
+  padding: 1em;
+}
+.s-document blockquote > *:last-child { margin-bottom: 0; }
+
+@media only screen and (min-width: 768px) {
+  blockquote { width: 600px; }
+}
+
+/* Treat nested definition lists like other nested lists */
+/* NOTE: See `../elments/html-elements.html` for `dl dl` reference styles */
+p + dl.small {
+  padding-left: var(--global-space--list-indent);
+}
+
+/* ELEMENTS: Text Content */
+/* ELEMENTS: Inline Text Semantics */
+/* ELEMENTS: Image & Multimedia */
+/* ELEMENTS: Interactive Elements */
+
+/* FAQ: Pulls images, code, and some lists closer to paragraph above */
+.s-document p + ul.small /* Bootstrap class */,
+.s-document p + ol.small /* Bootstrap class */,
+.s-document p + dl.small /* Bootstrap class */,
+.s-document p + pre,
+.s-document p + img,
+.s-document p + details {
+  margin-top: -0.75rem;
+  margin-bottom: 1rem; /* mirror Bootstrap `_reboot.css` <p> */
+}
+
+/* ELEMENTS: Inline Text Semantics */
+
+/* (any content or context) */ code,
+/* (content has only output) */ pre > samp {
+  background-color: var(--global-color-primary--x-light);
+
+  border-width: var(--global-border-width--normal);
+  border-style: solid;
+  border-color: var(--global-color-primary--light);
+}
+
+
+/* ELEMENTS: Image & Multimedia */
+
+/* NOTE: The `data_transfer.html` template uses <figure>'s */
+.s-document img {
+  display: block;
+  width: 100%;
+  max-width: 800px;
+
+  border: var(--global-border--normal);
+}
+.s-document i.icon--as-image {
+  font-size: 2.8em; /* body line-height * 2 */
+  display: inline-block;
+  padding: 0.25em;
+  border: var(--global-border--normal);
+}
+
+
+/* ELEMENTS: Table Content */
+
+.s-document table {
+  width: 100%;
+  max-width: 500px;
+
+  text-align: center;
+}
+
+/* ELEMENTS: Interactive Elements */
+
+/* FAQ: Indent details content, but not the summary */
+.s-document details {
+  --buffer-horz: 1em; padding-left: var(--buffer-horz);
+}
+.s-document summary { margin-left: calc( var(--buffer-horz) * -1 ); }
+
+.s-document details[open] > summary { margin-bottom: 0.5em; }
+
+/* Add explanation to summary toggle */
+/* FAQ: The <details>/<summary> feature is not common in a paragraph context */
+.s-document summary::after {
+  display: inline-block;
+  margin-left: 0.2rem;
+
+  opacity: 0.75;
+}
+.s-document details[open] > summary::after { content: '(hide)'; }
+.s-document details:not([open]) > summary::after { content: '(show)'; }
+
+
+
+
+
+/* COMPONENTS */
+
+/* COMPONENTS: Bootstrap */
+
+.s-document .row > .col > *:last-child {
+  margin-bottom: 0;
+}
+.s-document .row .row {
+  padding: var(--global-space--normal) 0;
+}
+.s-document .row .row:nth-child(even) {
+  background-color: var(--global-color-primary--x-light);
+}

package/source/_imports/trumps/s-footer.css

@@ -0,0 +1,16 @@
+/*
+Footer
+
+Styles for elements within a footer that has WYSIWIG markup.
+
+Markup: s-footer.html
+
+Styleguide Trumps.Scopes.Footer
+*/
+
+.s-footer > p:last-of-type {
+  margin: 0;
+}
+.s-footer a {
+  color: var(--global-color-primary--light);
+}

package/source/_imports/trumps/s-footer.html

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

package/source/_imports/trumps/s-guide-doc.css

@@ -0,0 +1,77 @@
+/*
+Guide Doc
+
+Styles for elements within a user instruction guide document.
+
+Styleguide Trumps.Scopes.GuideDoc
+*/
+
+
+
+
+
+/* ELEMENTS */
+
+
+/* ELEMENTS: Content Sectioning */
+
+/* Fake <hr> above <h3> */
+.s-guide-doc h3::before {
+  display: block;
+  content: '';
+
+  margin: var(--global-space--large) 0;
+  border-top: 1px solid var(--global-color-primary--light);
+}
+
+
+/* ELEMENTS: Text Content */
+
+.s-guide-doc blockquote {
+  opacity: 0.75;
+  border: var(--global-border--normal);
+
+  padding: 1em;
+}
+.s-guide-doc blockquote > *:last-child { margin-bottom: 0; }
+
+@media only screen and (min-width: 768px) {
+  blockquote { width: 600px; }
+}
+
+.s-guide-doc figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.s-guide-doc figcaption {
+  font-weight: bold;
+}
+
+
+/* ELEMENTS: Table Content */
+
+.s-guide-doc table {
+  width: 100%;
+  max-width: 500px;
+
+  text-align: center;
+}
+
+
+
+
+
+/* COMPONENTS */
+
+/* COMPONENTS: Bootstrap */
+
+.s-guide-doc .row > .col > *:last-child {
+  margin-bottom: 0;
+}
+.s-guide-doc .row .row {
+  padding: var(--global-space--normal) 0;
+}
+.s-guide-doc .row .row:nth-child(even) {
+  background-color: var(--global-color-primary--x-light);
+}