add CSS and sample content for article

- add sample content for testing article styles
- add CSS to style article

3 files changed, 449 insertions, 12 deletions

diff --git a/src/css/article.css b/src/css/article.css
deleted file mode 100644
index 166b9c2..0000000
--- a/src/css/article.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.doc {
-  margin: 0 auto;
-  max-width: 40rem;
-}
-
-@media (min-width: 1024px) {
-  .doc {
-    margin: 0 2rem;
-    max-width: 54rem;
-  }
-}
diff --git a/src/css/doc.css b/src/css/doc.css
new file mode 100644
index 0000000..cc955bc
--- /dev/null
+++ b/src/css/doc.css
@@ -0,0 +1,448 @@
+.doc {
+  margin: 0 auto;
+  max-width: 40rem;
+  padding: 0 1rem 2rem;
+  color: #333;
+}
+
+@media (min-width: 1024px) {
+  .doc {
+    margin: 0 2rem;
+    max-width: 54rem;
+  }
+}
+
+.doc h1,
+.doc h2,
+.doc h3,
+.doc h4,
+.doc h5,
+.doc h6 {
+  color: #191919;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 1rem 0 0;
+}
+
+.doc h1 > a.anchor,
+.doc h2 > a.anchor,
+.doc h3 > a.anchor,
+.doc h4 > a.anchor,
+.doc h5 > a.anchor,
+.doc h6 > a.anchor {
+  position: absolute;
+  text-decoration: none;
+  width: 1.75ex;
+  margin-left: -1.5ex;
+  visibility: hidden;
+  font-size: 0.8em;
+  padding-top: 0.025em;
+}
+
+.doc h1 > a.anchor::before,
+.doc h2 > a.anchor::before,
+.doc h3 > a.anchor::before,
+.doc h4 > a.anchor::before,
+.doc h5 > a.anchor::before,
+.doc h6 > a.anchor::before {
+  content: "\00a7";
+}
+
+.doc h1:hover > a.anchor,
+.doc h2:hover > a.anchor,
+.doc h3:hover > a.anchor,
+.doc h4:hover > a.anchor,
+.doc h5:hover > a.anchor,
+.doc h6:hover > a.anchor {
+  visibility: visible;
+}
+
+.doc a,
+.doc a:visited {
+  color: #1565c0;
+}
+
+.doc a {
+  text-decoration: none;
+}
+
+.doc a:hover {
+  color: #104d92;
+  text-decoration: underline;
+}
+
+.doc b,
+.doc dt,
+.doc strong,
+.doc th {
+  font-weight: 500;
+}
+
+/* what about td/th code? */
+.doc p code {
+  font-size: 0.85em;
+  background-color: #fafafa;
+  padding: 0.075rem 0.25rem 0.125rem;
+  border-radius: 0.2rem;
+  /* font-weight: 300; */
+}
+
+.doc pre {
+  font-size: 0.85rem;
+  /* color: #000; */
+  line-height: 1.5;
+}
+
+.doc pre:not(.highlight),
+.doc pre.highlight code {
+  display: block;
+  background-color: #fafafa;
+  padding: 0.75rem;
+  overflow-x: auto;
+  box-shadow: inset 0 0 2px #ddd;
+}
+
+.doc .paragraph,
+.doc .colist,
+.doc .dlist,
+.doc .olist,
+.doc .ulist,
+.doc .exampleblock,
+.doc .imageblock,
+.doc .listingblock,
+.doc .literalblock,
+.doc .sidebarblock {
+  margin: 1rem 0 0;
+}
+
+.doc table.tableblock {
+  border-collapse: collapse;
+  font-size: 0.8em;
+  margin: 2rem 0;
+  /* enable table-layout: fixed if you want the table width to be enforced strictly */
+  /* alternative is to wrap table in div and set overflow-x: auto on the wrapper */
+  /* table-layout: fixed; */
+}
+
+.doc table.spread {
+  width: 100%;
+}
+
+.doc table.tableblock th,
+.doc table.tableblock td {
+  padding: 0.5rem;
+}
+
+.doc table.tableblock th {
+  border-bottom: 2.5px solid #ddd;
+}
+
+.doc table.tableblock td {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+.doc .halign-left {
+  text-align: left;
+}
+
+.doc .valign-top {
+  vertical-align: top;
+}
+
+.doc .tableblock p {
+  font-size: inherit;
+}
+
+.doc .admonitionblock {
+  margin: 1.4rem 0 0;
+  position: relative;
+}
+
+.doc .admonitionblock p,
+.doc .admonitionblock td.content {
+  font-size: 0.8rem;
+}
+
+.doc .admonitionblock table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.doc .admonitionblock td.content {
+  padding: 1rem 1rem 0.75rem;
+  background-color: #fafafa;
+  width: 100%;
+}
+
+.doc .admonitionblock .icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 0.75rem;
+  padding: 0 0.5rem;
+  height: 1.25rem;
+  line-height: 1;
+  font-weight: 500;
+  text-transform: uppercase;
+  border-radius: 0.45rem;
+  color: #fff;
+  transform: translate(-0.5rem, -50%);
+}
+
+.doc .admonitionblock.caution .icon {
+  background-color: #a0439c;
+}
+
+.doc .admonitionblock.important .icon {
+  background-color: #d32f2f;
+}
+
+.doc .admonitionblock.note .icon {
+  background-color: #217ee7;
+}
+
+.doc .admonitionblock.tip .icon {
+  background-color: #41af46;
+}
+
+.doc .admonitionblock.warning .icon {
+  background-color: #e18114;
+}
+
+.doc .admonitionblock .icon i {
+  font-style: normal;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+}
+
+.doc .admonitionblock .icon i::after {
+  content: attr(title);
+  hyphens: none;
+}
+
+.doc .imageblock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.doc .imageblock img {
+  display: block;
+}
+
+.doc .imageblock .title {
+  color: #4a4a4a;
+  font-style: italic;
+  margin-top: 0.5rem;
+}
+
+.doc .imageblock .content {
+  max-width: 100%;
+}
+
+.doc .imageblock img,
+.doc .paragraph .image img {
+  height: auto;
+  width: auto;
+  max-width: 100%;
+}
+
+.doc > h1 {
+  font-size: 2rem;
+  margin: 2rem 0 1.5rem;
+}
+
+#preamble + .sect1,
+.doc .sect1 + .sect1 {
+  margin-top: 2.5rem;
+}
+
+.doc h2:not(.discrete) {
+  border-bottom: 1px solid #ddd;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  padding: 0.4rem 1rem 0.1rem;
+}
+
+.doc p {
+  font-size: 0.95rem;
+  margin: 0;
+}
+
+.doc p,
+.doc .tableblock,
+.doc .content {
+  hyphens: auto;
+}
+
+.doc .ulist .paragraph,
+.doc .olist .paragraph {
+  margin: 0;
+  padding: 0;
+}
+
+#preamble .abstract blockquote {
+  background-color: #f0f0f0;
+  border-left: 5px solid #ddd;
+  color: #4a4a4a;
+  font-size: 0.9em;
+  margin: 0;
+  padding: 0.75em 1em;
+}
+
+.doc .admonitionblock td.content > div[class] {
+  margin: 0;
+}
+
+.doc table.tableblock .paragraph {
+  margin: 0;
+  padding: 0;
+}
+
+.doc table.tableblock .admonitionblock,
+.doc .ulist .admonitionblock,
+.doc .olist .admonitionblock {
+  padding: 0;
+}
+
+.doc ul {
+  margin: 0;
+  padding: 0 0 0 1.5rem;
+}
+
+.doc ol {
+  margin: 0;
+  padding: 0 0 0 2rem;
+  list-style: none;
+  counter-reset: ordered-list;
+}
+
+.doc ol > li {
+  counter-increment: ordered-list;
+}
+
+.doc ol > li::before {
+  /* use counter(ordered-list, lower-alpha) to make letters */
+  content: "." counter(ordered-list);
+  font-weight: 500;
+  display: inline-block;
+  width: 1em;
+  direction: rtl;
+  margin: 0 0.5em 0 -1.5em;
+  text-align: right;
+  position: absolute;
+}
+
+.doc .olist .olist,
+.doc .olist .ulist,
+.doc .olist .dlist,
+.doc .ulist .olist,
+.doc .ulist .ulist,
+.doc .ulist .dlist,
+.doc .dlist .ulist,
+.doc .dlist .olist,
+.doc .dlist .dlist {
+  padding: 0;
+}
+
+.doc .olist li,
+.doc .ulist li {
+  margin-bottom: 0.5rem;
+}
+
+.doc .ulist .listingblock,
+.doc .olist .listingblock,
+.doc .admonitionblock .listingblock {
+  padding: 0;
+}
+
+.doc .exampleblock .title,
+.doc .literalblock .title,
+.doc .listingblock .title {
+  color: #4a4a4a;
+  padding-bottom: 0.15rem;
+  font-size: 0.85rem;
+}
+
+/* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */
+.doc .tableblock pre,
+.doc .listingblock.wrap pre {
+  white-space: pre-wrap;
+}
+
+.doc .listingblock code[data-lang] {
+  position: relative;
+}
+
+.doc .listingblock code[data-lang]::before {
+  content: attr(data-lang);
+  display: none;
+  color: #8e8e8e;
+  font-size: 0.75em;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  line-height: 1;
+  text-transform: uppercase;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.doc .listingblock:hover code[data-lang]::before {
+  display: block;
+}
+
+.doc .dlist dt {
+  color: #4a4a4a;
+  font-style: italic;
+}
+
+.doc .dlist dt::after {
+  content: ":";
+}
+
+.doc .dlist dd {
+  margin: 0 0 0.3rem 1.5rem;
+}
+
+.doc .conum[data-value] {
+  /* border: 1px solid #989898; */
+  border: 1px solid #404040;
+  border-radius: 100%;
+  display: inline-block;
+  font-family: "Roboto", sans-serif;
+  font-size: 0.75rem;
+  font-style: normal;
+  height: 1.25em;
+  line-height: 1.2;
+  text-align: center;
+  width: 1.25em;
+  letter-spacing: -0.25ex;
+  text-indent: -0.25ex;
+}
+
+.doc .conum[data-value]::after {
+  content: attr(data-value);
+}
+
+.doc .conum[data-value] + b {
+  display: none;
+}
+
+.doc .colist {
+  font-size: 0.95rem;
+}
+
+.doc .colist > table tr > td:first-of-type {
+  padding: 0 0.75em;
+  line-height: 1;
+}
+
+.menuseq i.caret::before {
+  content: ">";
+  font-style: normal;
+  font-weight: 500;
+}
diff --git a/src/css/site.css b/src/css/site.css
index ab3a32e..b6cbd2e 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -8,6 +8,6 @@
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";
-@import "article.css";
+@import "doc.css";
 @import "header.css";
 @import "footer.css";