fix(*): More style refinements for metadata elements

stencila · Oct 28, 2020 · 705b2ad · 705b2ad
1 parent 3ff1e19
commit 705b2ad
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -130,15 +130,16 @@ Extensions provide styling, and potentially interactivity, for node types that d
 <!-- prettier-ignore-start -->
 <!-- EXTS-START -->
 
-| Name                          | Description                                                                                                                                                                                                                                 |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [cite](./themes/cite)         | Provides styling for in-text citations (i.e. `Cite` and `CiteGroup` nodes) and bibliographies (i.e. `CreativeWork` nodes in the `references` property of another `CreativeWork`).                                                           |
-| [cite-apa](./themes/cite-apa) | Provides styling for in-text citations and bibliographies in accordance with the [American Psychological Association (APA) style](https://en.wikipedia.org/wiki/APA_style).                                                                 |
-| [cite-mla](./themes/cite-mla) | Provides styling for in-text citations and bibliographies in accordance with the [Modern Language Association (MLA) style](https://style.mla.org/).                                                                                         |
-| [code](./themes/code)         | Provides syntax highlighting for `CodeFragment` and `CodeBlock` nodes using [Prism](https://prismjs.com/). Will not style executable node types like `CodeExpression` and `CodeChunk` which are styled by the base Stencila Web Components. |
-| [math](./themes/math)         | Provides styling of math nodes using MathJax fonts and styles. Use this if there is any likely to be math content, i.e. `MathFragment` and/or `MathBlock` nodes, in documents that your theme targets.                                      |
-| [pages](./themes/pages)       | Provides a [`@media print` CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@page) to modify properties when printing a document e.g. to PDF.                                                                                  |
-| [person](./themes/person)     | Provides styling of `Person` nodes e.g the `authors` of an article, or authors for each `citation` in it's `references`.                                                                                                                    |
+| Name                                  | Description                                                                                                                                                                                                                                 |
+| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [cite](./themes/cite)                 | Provides styling for in-text citations (i.e. `Cite` and `CiteGroup` nodes) and bibliographies (i.e. `CreativeWork` nodes in the `references` property of another `CreativeWork`).                                                           |
+| [cite-apa](./themes/cite-apa)         | Provides styling for in-text citations and bibliographies in accordance with the [American Psychological Association (APA) style](https://en.wikipedia.org/wiki/APA_style).                                                                 |
+| [cite-mla](./themes/cite-mla)         | Provides styling for in-text citations and bibliographies in accordance with the [Modern Language Association (MLA) style](https://style.mla.org/).                                                                                         |
+| [code](./themes/code)                 | Provides syntax highlighting for `CodeFragment` and `CodeBlock` nodes using [Prism](https://prismjs.com/). Will not style executable node types like `CodeExpression` and `CodeChunk` which are styled by the base Stencila Web Components. |
+| [math](./themes/math)                 | Provides styling of math nodes using MathJax fonts and styles. Use this if there is any likely to be math content, i.e. `MathFragment` and/or `MathBlock` nodes, in documents that your theme targets.                                      |
+| [organization](./themes/organization) | Provides styling of `Organization` nodes e.g the `authors` of an article, or affiliations for each `author` in it's `authors` list.                                                                                                         |
+| [pages](./themes/pages)               | Provides a [`@media print` CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@page) to modify properties when printing a document e.g. to PDF.                                                                                  |
+| [person](./themes/person)             | Provides styling of `Person` nodes e.g the `authors` of an article, or authors for each `citation` in it's `references`.                                                                                                                    |
 
 <!-- EXTS-END -->
 <!-- prettier-ignore-end -->

diff --git a/src/themes/bootstrap/components.css b/src/themes/bootstrap/components.css
@@ -1,15 +1,28 @@
 /* Overrides for Stencila components */
 :--root {
+  --font-size-body: 14px;
+
   a.button.sc-stencila-button-default,
   button.sc-stencila-button-default {
     @extend .button;
 
     stencila-icon,
     .label {
-      --font-size-body: 14px;
-
       font-size: var(--font-size-body);
       color: inherit;
     }
   }
+
+  stencila-code-expression .text,
+  stencila-code-expression .output,
+  stencila-tooltip {
+    &,
+    * {
+      font-size: var(--font-size-body);
+    }
+  }
+
+  stencila-code-expression .text code {
+    padding: 0;
+  }
 }
diff --git a/src/themes/bootstrap/styles.css b/src/themes/bootstrap/styles.css
@@ -81,6 +81,7 @@
           width: 1em;
           text-overflow: clip;
           overflow: hidden;
+          display: inline-flex;
 
           &::before {
             padding-right: 5px;

diff --git a/src/themes/f1000/styles.css b/src/themes/f1000/styles.css
@@ -113,6 +113,14 @@
       }
     }
   }
+
+  /* Hide article metadata */
+  & > [data-itemprop='about'],
+  & > [data-itemprop='genre'],
+  & > :--keywords,
+  & > :--identifiers {
+    display: none;
+  }
 }
 
 :--Table {

diff --git a/src/themes/tufte/styles.css b/src/themes/tufte/styles.css
@@ -55,8 +55,11 @@
     :--Organization {
       :--emails::after,
       :--members::before {
+        color: var(--color-key);
         font-size: var(--font-size-80);
         font-style: italic;
+        line-height: 1;
+        vertical-align: super;
       }
 
       :--emails::after {
@@ -81,8 +84,8 @@
     font-size: var(--font-size-110);
   }
 
-  > [data-itemprop="about"],
-  > [data-itemprop="genre"],
+  > [data-itemprop='about'],
+  > [data-itemprop='genre'],
   > :--identifiers,
   > :--keywords {
     display: none;