feat(demo): elements > (cms) headings pattern (#92)

src/lib/_imports/_partials/text-of-one-paragraph-long.hbs

@@ -0,0 +1 @@
+{{> @text-of-one-paragraph-medium }} {{> @text-of-one-paragraph-medium }} {{> @text-of-one-paragraph-medium }} {{> @text-of-one-paragraph-medium }}

src/lib/_imports/_partials/text-of-one-paragraph-medium.hbs

@@ -0,0 +1 @@
+{{> @text-of-one-paragraph-short }} {{> @text-of-one-paragraph-short }} {{> @text-of-one-paragraph-short }} {{> @text-of-one-paragraph-short }}

src/lib/_imports/core-styles.cms.css

@@ -15,6 +15,7 @@
 /* ELEMENTS */
 /* To override Bootstrap */
 @import url("./elements/html-elements.cms.css");
+@import url("./elements/headings.cms.css");
 @import url("./elements/form.cms.css");
 
 /* OBJECTS */

src/lib/_imports/elements/demo.css

@@ -24,6 +24,7 @@ body > dl dd {
   line-height: normal;
 }
 body > dl dt {
+  font-size: 1.6rem;
   font-weight: normal;
   text-transform: capitalize;
   margin-bottom: 10px;

src/lib/_imports/elements/headings.cms.css

@@ -0,0 +1,42 @@
+h1, h2, h3, h4, h5, h6 {
+  color: var(--global-color-primary--xx-dark);
+}
+h1, h2, h4, h5, h6 {
+  font-weight: var(--bold);
+}
+
+h1 {
+  margin-top: 27px;
+  margin-bottom: 27px;
+}
+h2 {
+  margin-top: 30px;
+  margin-bottom: var(--global-space--normal);
+}
+h1 + h2,
+h1 + hr {
+  margin-top: -12px;
+}
+h1 {
+  font-size: var(--global-font-size--xxx-large);
+}
+h2 {
+  font-size: var(--global-font-size--x-large);
+}
+
+h3, h4, h5, h6 {
+  margin-top: var(--global-space--normal);
+  margin-bottom: var(--global-space--normal);
+}
+h3 {
+  font-size: var(--global-font-size--x-large);
+}
+h4 {
+  font-size: var(--global-font-size--large);
+}
+h5 {
+  text-transform: uppercase;
+}
+h5, h6 {
+  font-size: var(--global-font-size--medium);
+}

src/lib/_imports/elements/headings.cms/config.yml

@@ -0,0 +1,4 @@
+label: (CMS) Headings
+context:
+  shouldLoadCMS: true
+  shouldLoadBootstrap: true

src/lib/_imports/elements/headings.cms/headings.cms.hbs

@@ -0,0 +1,32 @@
+<dl>
+  <dt>above each other</dt>
+  <dd>
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+  </dd>
+  <dt>above paragraphs</dt>
+  <dd>
+    <h1>Heading 1</h1>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <h2>Heading 2</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <h3>Heading 3</h3>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <h4>Heading 4</h4>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <h5>Heading 5</h5>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <h6>Heading 6</h6>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+</dl>

src/lib/_imports/elements/headings.cms/readme.md

@@ -0,0 +1,12 @@
+[Heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) represent six levels of section headings.
+
+```
+<h1> <h2> <h3> <h4> <h5> <h6>
+```
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

src/lib/_imports/elements/html-elements.cms.css

@@ -72,49 +72,7 @@ body > main + footer {
 }
 
 /* Headings */
-
-h1, h2, h3, h4, h5, h6 {
-  color: var(--global-color-primary--xx-dark);
-}
-h1, h2, h4, h5, h6 {
-  font-weight: var(--bold);
-}
-
-h1 {
-  margin-top: 27px;
-  margin-bottom: 27px;
-}
-h2 {
-  margin-top: 30px;
-  margin-bottom: var(--global-space--normal);
-}
-h1 + h2,
-h1 + hr {
-  margin-top: -12px;
-}
-h1 {
-  font-size: var(--global-font-size--xxx-large);
-}
-h2 {
-  font-size: var(--global-font-size--x-large);
-}
-
-h3, h4, h5, h6 {
-  margin-top: var(--global-space--normal);
-  margin-bottom: var(--global-space--normal);
-}
-h3 {
-  font-size: var(--global-font-size--x-large);
-}
-h4 {
-  font-size: var(--global-font-size--large);
-}
-h5 {
-  text-transform: uppercase;
-}
-h5, h6 {
-  font-size: var(--global-font-size--medium);
-}
+/* SEE: ./headings.cms.css */