TACC · wesleyboar · Jan 22, 2023 · Jan 22, 2023
diff --git a/dist/core-styles.base.css b/dist/core-styles.base.css
diff --git a/dist/core-styles.cms.css b/dist/core-styles.cms.css
diff --git a/dist/core-styles.demo.css b/dist/core-styles.demo.css
diff --git a/dist/core-styles.docs.css b/dist/core-styles.docs.css
diff --git a/dist/elements/demo.css b/dist/elements/demo.css
diff --git a/dist/elements/html-elements.css b/dist/elements/html-elements.css
diff --git a/dist/trumps/s-guide-doc.css b/dist/trumps/s-guide-doc.css
diff --git a/src/lib/_imports/_partials/figure.hbs b/src/lib/_imports/_partials/figure.hbs
@@ -0,0 +1,9 @@
+<figure {{#if class}}class="{{ class }}"{{/if}}>
+  <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-120%2C120_subsampling-2.png"
+    alt="(sample image)"
+  />
+  <figcaption>
+    I am a &lt;figcaption&gt; within a &lt;figure&gt;.
+  </figcaption>
+</figure>
diff --git a/src/lib/_imports/_partials/img.hbs b/src/lib/_imports/_partials/img.hbs
@@ -0,0 +1,5 @@
+<img
+  {{#if class}}class="{{ class }}"{{/if}}
+  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-120%2C120_subsampling-2.png"
+  alt="(sample image)"
+/>
diff --git a/src/lib/_imports/core-styles.docs.css b/src/lib/_imports/core-styles.docs.css
@@ -21,6 +21,7 @@
 
 /* COMPONENTS */
 @import url("./components/admonition.css");
+@import url("./components/align.css");
 @import url("./components/tacc-docs.css");
 
 /* TRUMPS */

diff --git a/src/lib/_imports/elements/demo.css b/src/lib/_imports/elements/demo.css
@@ -14,34 +14,34 @@ main {
 
 /* Organize Content */
 
-main > dl dl {
-  margin-block: 0;
-  padding-left: unset; /* overwrite CMS */
-}
-main > dl dt,
-main > dl dd {
-  font-family: var(--global-font-family--sans);
-  color: #484848;
-  line-height: normal;
-}
-main > dl dt {
-  font-size: 1.6rem;
-  font-weight: var(--medium);
-  margin-bottom: 10px;
-}
-main > dl > dt {
-  font-weight: var(--bold);
-}
-main > dl dt:not(:first-of-type) {
-  margin-top: 20px;
-}
-main > dl dd {
-  margin-bottom: 10px;
-  margin-left: 25px;
-}
-main > dl dd:not(.demo-grid) > * {
-  margin-right: 5px;
-  vertical-align: middle;
+main > dl {
+
+  &:is(dt, dd):not(.no-demo-styles > *) {
+    font-family: var(--global-font-family--sans);
+    color: #484848;
+    line-height: normal;
+  }
+  & dt:not(.no-demo-styles > *) {
+    font-size: 1.6rem;
+    font-weight: var(--medium);
+    margin-bottom: 10px;
+  }
+  & > dt:not(.no-demo-styles > *) {
+    font-weight: var(--bold);
+  }
+  & dt:not(:first-of-type):not(.no-demo-styles > *) {
+    margin-top: 20px;
+  }
+  & dd:not(.no-demo-styles > *) {
+    margin-bottom: 10px;
+    margin-left: 25px;
+  }
+
+  & dl:not(.no-demo-styles) {
+    margin-block: 0;
+    padding-left: unset; /* undo html-elements.cms.css */
+  }
+
 }
 
 
@@ -51,6 +51,7 @@ main > dl dd:not(.demo-grid) > * {
 body > main {
   width: 80vw;
   margin-inline: auto;
+  padding-block: 1em;
 }
 
 /* To show when body is covered by a full-width background */

diff --git a/src/lib/_imports/elements/html-elements.css b/src/lib/_imports/elements/html-elements.css
@@ -5,10 +5,8 @@
 
 
 
-
-
 /*
-Text Content
+Form Content
 
 Elements that create forms which allow users to enter and submit data.
 
@@ -31,6 +29,8 @@ Styleguide Elements.Forms
   line-height: inherit;
 }
 
+
+
 /*
 Text Content
 
@@ -47,12 +47,29 @@ Reference:
 Styleguide Elements.TextContent
 */
 
+& blockquote {
+  width: max-content;
+  margin-inline: unset; /* undo browser */
+}
+& blockquote > p:last-child {
+  margin-bottom: 0;
+}
+
+& figure {
+  width: min-content;
+  margin-inline: unset; /* undo browser */
+}
+
+
 /* To mimic Bootstrap */
 & :is(dl, ol, ul) {
   margin-top: 0;
   margin-bottom: 1rem;
 }
 
+
+
+
 /*
 Interactive Elements
 
@@ -77,6 +94,4 @@ Styleguide Elements.Interactive
 
 
 
-
-
 }
diff --git a/src/lib/_imports/elements/html-elements/config.yml b/src/lib/_imports/elements/html-elements/config.yml
@@ -0,0 +1 @@
+label: HTML Elements
diff --git a/src/lib/_imports/elements/html-elements/html-elements.hbs b/src/lib/_imports/elements/html-elements/html-elements.hbs
@@ -0,0 +1,80 @@
+<dl>
+
+  <dt>Forms</dt>
+  <dd>
+    <form>
+      <label>&lt;input&gt;</label>
+      <input />
+      <label>&lt;select&gt;</label>
+      <select>
+        <option value="" selected="">
+          Please select a dinosaur
+        </option>
+        <optgroup label="Theropods">
+            <option>Tyrannosaurus</option>
+            <option>Velociraptor</option>
+            <option>Deinonychus</option>
+        </optgroup>
+        <optgroup label="Sauropods">
+            <option>Diplodocus</option>
+            <option>Saltasaurus</option>
+            <option>Apatosaurus</option>
+        </optgroup>
+      </select>
+      <label>&lt;textarea&gt;</label>
+      <textarea></textarea>
+      <button type="submit">Submit</button>
+      <button type="reset">Reset</button>
+      <button type="clear">Clear</button>
+      <button type="button">Button</button>
+    </form>
+  </dd>
+
+  <dt>Text Content</dt>
+  <dd>
+    <dl>
+      <dt>Paragraphs</dt>
+      <dd>
+        <p>{{> @text-of-one-paragraph-medium }}</p>
+        <p>{{> @text-of-one-paragraph-medium }}</p>
+      </dd>
+
+      <dt>Lists</dt>
+      <dd>
+        <dl>
+          <dt>Unordered</dt>
+          <dd>
+            <ul>
+              <li>LX 1234</li>
+              <li>LOVE 45</li>
+              <li>OLD 555</li>
+            </ul>
+          </dd>
+          <dt>Ordered</dt>
+          <dd>
+            <ul>
+              <li>One Fish</li>
+              <li>Two Fish</li>
+              <li>Red Fish</li>
+              <li>Blue Fish</li>
+            </ul>
+          </dd>
+          <dt>Definition List</dt>
+          <dd>
+            <dl class="no-demo-styles">
+              <dt>CSS</dt><dd>Cascading Stylesheet</dd>
+              <dt>HTML</dt><dd>Hypertext Markup Language</dd>
+              <dt>JSON</dt><dd>JavaScript Object Notation</dd>
+            </dl>
+          </dd>
+        </dl>
+      </dd>
+
+      <dt>Figure</dt>
+      <dd>{{> @figure }}</dd>
+
+      <dt>Blockquote</dt>
+      <dd>{{> @blockquote }}</dd>
+    </dl>
+  </dd>
+</dl>
diff --git a/src/lib/_imports/elements/html-elements/readme.md b/src/lib/_imports/elements/html-elements/readme.md
@@ -0,0 +1 @@
+Styling for raw HTML elements that are commonly used.
diff --git a/src/lib/_imports/trumps/s-guide-doc.css b/src/lib/_imports/trumps/s-guide-doc.css
@@ -12,45 +12,6 @@ Styleguide Trumps.Scopes.GuideDoc
 
 /* ELEMENTS */
 
-
-/* ELEMENTS: Content Sectioning */
-
-/* Fake <hr> above <h2> */
-.s-guide-doc h2:not(hr + h2)::before {
-  display: block;
-  content: '';
-
-  /* To mirror hr (site.css) */
-  margin-top: var(--global-space--hr-buffer-above);
-  border-top: 1px solid var(--global-color-primary--light);
-  margin-bottom: var(--global-space--hr-buffer-below);
-}
-
-
-/* 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 {