merge !30

resolves #22 improve listing, admonition, example block titles

1 files changed, 39 insertions, 21 deletions

diff --git a/src/css/doc.css b/src/css/doc.css
index 10a28cd..b2f38d7 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -80,18 +80,10 @@
 }
 
 .doc pre {
-  font-size: 0.9rem;
   /* color: #000; */
+  font-size: 0.9rem;
   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;
+  margin: 0;
 }
 
 .doc .paragraph,
@@ -156,6 +148,10 @@
   font-size: 0.9rem;
 }
 
+.doc .admonitionblock td.content > :first-child {
+  margin: 0;
+}
+
 .doc .admonitionblock pre {
   font-size: 0.85rem;
 }
@@ -229,7 +225,8 @@
 }
 
 .doc .imageblock .title {
-  color: #4a4a4a;
+  /* color: #4a4a4a; */
+  color: #191919;
   font-style: italic;
   margin-top: 0.5rem;
 }
@@ -283,10 +280,6 @@
   padding: 0.75em 1em;
 }
 
-.doc .admonitionblock td.content > div[class] {
-  margin: 0;
-}
-
 .doc table.tableblock .paragraph {
   margin: 0;
   padding: 0;
@@ -373,10 +366,25 @@
 .doc .admonitionblock .title,
 .doc .exampleblock .title,
 .doc .literalblock .title,
-.doc .listingblock .title {
-  color: #4a4a4a;
-  padding-bottom: 0.15rem;
-  font-size: 0.85rem;
+.doc .listingblock .title,
+.doc .openblock .title {
+  /* color: #4a4a4a; */
+  color: #191919;
+  font-size: 0.925rem;
+  font-style: italic;
+  letter-spacing: -0.005em;
+  padding-bottom: 0.075rem;
+}
+
+.doc .admonitionblock .title + .paragraph {
+  margin-top: 0;
+}
+
+/* Other possible colors #248232 (dark green) #2ba84a (brighter green), #f7ef99 (soft yellow), #f78e69 (orangey-grayish) */
+.doc .exampleblock > .content {
+  background-color: #fff;
+  box-shadow: inset 0 0 1.75px #248232;
+  padding: 0.75rem;
 }
 
 /* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */
@@ -385,7 +393,17 @@
   white-space: pre-wrap;
 }
 
-.doc .listingblock code[data-lang] {
+.doc pre:not(.highlight),
+.doc pre.highlight code {
+  background-color: #fafafa;
+  box-shadow: inset 0 0 1.75px #ddd;
+  display: block;
+  overflow-x: auto;
+  padding: 0.75rem;
+}
+
+/* NOTE assume pre.highlight contains code[data-lang] */
+.doc pre.highlight {
   position: relative;
 }
 
@@ -395,7 +413,7 @@
   color: #8e8e8e;
   font-size: 0.75em;
   font-weight: 500;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.075em;
   line-height: 1;
   text-transform: uppercase;
   position: absolute;