@tacc/core-styles 0.6.0-alpha.1 → 0.6.0-beta.1

package/src/lib/_imports/components/c-callout.html

@@ -1,52 +1,103 @@
 <style>
-#c-callout { margin-inline: 3em; }
-#c-callout > * + * { margin-top: 3em; }
+  #c-callout > * + * {
+    margin-top: 3em;
+  }
 </style>
 <div id="c-callout">
   <aside class="c-callout">
     <h2>Style ▸ Text</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+      ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget
+      vulputate eros nulla et arcu.
+    </p>
   </aside>
 
   <aside class="c-callout">
-    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png__310x130_q85_crop_subject_location-171%2C166_subsampling-2_upscale.png" alt="">
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png__310x130_q85_crop_subject_location-171%2C166_subsampling-2_upscale.png"
+      alt=""
+    />
     <h2>Style ▸ Image (Thumbnail) + Text</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+      ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget
+      vulputate eros nulla et arcu.
+    </p>
   </aside>
 
   <aside class="c-callout">
-    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-152%2C186_subsampling-2.png" alt="">
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-152%2C186_subsampling-2.png"
+      alt=""
+    />
     <h2>Style ▸ Image (Square) + Text</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+      ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget
+      vulputate eros nulla et arcu. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh
+      sem finibus mi, eget vulputate eros nulla et arcu.
+    </p>
   </aside>
 
   <a href="#" class="c-callout">
     <h1>Link ▸ Image (Wide) + Text</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
-    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+      ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget
+      vulputate eros nulla et arcu.
+    </p>
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+      alt=""
+    />
   </a>
 
   <a href="#" class="c-callout">
     <h1>Link ▸ Image (Tall) + Text</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
-    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" alt="">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+      ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget
+      vulputate eros nulla et arcu.
+    </p>
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg"
+      alt=""
+    />
   </a>
 
   <a href="#" class="c-callout">
     <h1>Link ▸ Image w/ Caption (Wide) + Text</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+      ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget
+      vulputate eros nulla et arcu.
+    </p>
     <figure>
-      <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+        alt=""
+      />
       <figcaption>Lorem ipsum dolor sit amet, et cetera.</figcaption>
     </figure>
   </a>
 
   <a href="#" class="c-callout">
     <h1>Link ▸ Image w/ Caption (Tall) + Text</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+      ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget
+      vulputate eros nulla et arcu.
+    </p>
     <figure>
-      <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" alt="">
-      <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg"
+        alt=""
+      />
+      <figcaption>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </figcaption>
     </figure>
   </a>
 </div>

package/src/lib/_imports/components/c-card.html

@@ -1,32 +1,47 @@
 <div class="o-grid o-grid--col-min-width" style="--width: 320px">
   <a href="./" class="c-card {{modifier_class}}">
-      <figure>
-          <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
-          <figcaption>Image w/ Caption &amp; Link</figcaption>
-      </figure>
+    <figure>
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+        alt=""
+      />
+      <figcaption>Image w/ Caption &amp; Link</figcaption>
+    </figure>
   </a>
 
   <a href="./" class="c-card {{modifier_class}}">
-      <figure>
-          <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
-          <figcaption>Link ▸ Image w/ Caption</figcaption>
-      </figure>
+    <figure>
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+        alt=""
+      />
+      <figcaption>Link ▸ Image w/ Caption</figcaption>
+    </figure>
   </a>
 
   <a href="./" class="c-card {{modifier_class}}">
-      <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
-      <h3>Link ▸ Image + Text</h3>
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+      alt=""
+    />
+    <h3>Link ▸ Image + Text</h3>
   </a>
 
   <div class="c-card {{modifier_class}}" style="display: inline-block">
-      <figure>
-          <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
-          <figcaption>Style ▸ Image w/ Caption</figcaption>
-      </figure>
+    <figure>
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+        alt=""
+      />
+      <figcaption>Style ▸ Image w/ Caption</figcaption>
+    </figure>
   </div>
 
   <div class="c-card {{modifier_class}}" style="display: inline-block">
-      <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
-      <h3>Style ▸ Image + Text</h3>
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+      alt=""
+    />
+    <h3>Style ▸ Image + Text</h3>
   </div>
 </div>

package/src/lib/_imports/components/c-data-list.html

@@ -1,10 +1,9 @@
 <!-- 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">
+  <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>
@@ -15,9 +14,7 @@
 </article>
 <article>
   <h4>Horizontal &amp; Narrow</h4>
-  <dl class="c-data-list
-             c-data-list--is-horz
-             c-data-list--is-narrow">
+  <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>
@@ -28,9 +25,7 @@
 </article>
 <article>
   <h4>Vertical &amp; Wide</h4>
-  <dl class="c-data-list
-             c-data-list--is-vert
-             c-data-list--is-wide">
+  <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>
@@ -41,10 +36,9 @@
 </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">
+  <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>
@@ -54,14 +48,10 @@
   </dl>
 </article>
 
-
-
 <!-- Tables -->
 <article>
   <h4>Horizontal &amp; Wide</h4>
-  <table class="c-data-list
-                c-data-list--is-horz
-                c-data-list--is-wide">
+  <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>
@@ -80,9 +70,7 @@
 </article>
 <article>
   <h4>Horizontal &amp; Narrow</h4>
-  <table class="c-data-list
-                c-data-list--is-horz
-                c-data-list--is-narrow">
+  <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>
@@ -101,10 +89,9 @@
 </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">
+  <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>
@@ -123,10 +110,9 @@
 </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">
+  <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>

package/src/lib/_imports/components/c-image-map.html

@@ -1,4 +1,14 @@
 <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>
+  <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>