fix(Reference Styles): Fix regressions in Nature theme

- Move common references styles to common.css - converted-article.html: Add JS to copy nodes in reference list items to allow citation style variations - article.html: Update reference markup to work with updated styles.
stencila · Aug 24, 2019 · 2cc7861 · 2cc7861
1 parent ea0ca02
commit 2cc7861
Show file tree

Hide file tree

Showing 5 changed files with 637 additions and 671 deletions.
diff --git a/src/common/styles/common.css b/src/common/styles/common.css
@@ -2,6 +2,27 @@
 @import 'prismjs/plugins/line-highlight/prism-line-highlight.css';
 @import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 
+/* Custom Selectors */
+@custom-selector :--CiteGroup [itemtype='https://stencila.github.io/schema/CiteGroup'];
+@custom-selector :--Cite [itemtype='https://stencila.github.io/schema/Cite'];
+@custom-selector :--CreativeWork [itemtype='https://schema.org/CreativeWork'];
+@custom-selector :--title [itemprop='title'];
+@custom-selector :--authors [itemprop='authors'];
+@custom-selector :--Person [itemtype='https://schema.org/Person'];
+@custom-selector :--references [itemprop='references'];
+@custom-selector :--PublicationIssue [itemtype='https://stencila.github.io/schema/PublicationIssue'];
+@custom-selector :--datePublished [itemprop='datePublished'];
+@custom-selector :--issueNumber [itemprop='issueNumber'];
+@custom-selector :--pagination [itemprop='pagination'];
+@custom-selector :--url [itemprop='url'];
+@custom-selector :--abstracts [itemprop='abstracts'];
+@custom-selector :--authorDetails [itemprop='authorDetails'];
+
+/* Citation Styles */
+@custom-selector :--citation-style-eLife [data-citation-style='eLife'];
+@custom-selector :--citation-style-MLA [data-citation-style='MLA'];
+@custom-selector :--citation-style-APA [data-citation-style='APA'];
+
 article {
   label:first-of-type {
     position: sticky;
@@ -29,3 +50,277 @@ html {
     max-height: 90vh;
   }
 }
+
+/* Shared Citation Styles */
+:--references {
+  ol,
+  ul {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  :--CreativeWork {
+    font-size: 0.875rem;
+    line-height: 1.71429;
+    font-weight: normal;
+  }
+
+  :--authors {
+    display: inline;
+
+    :--Person {
+      display: inline-flex;
+
+      * {
+        display: inline-flex;
+      }
+
+      [itemprop='familyName'] {
+        order: 2;
+
+        &::after {
+          content: ', ';
+          white-space: pre;
+        }
+      }
+
+      [itemprop='givenName'] {
+        order: 1;
+
+        &::after {
+          content: ' ';
+          white-space: pre;
+        }
+      }
+
+      &:last-child [itemprop='familyName'] {
+        &::after {
+          content: normal;
+        }
+      }
+
+      a {
+        border-bottom: none;
+      }
+    }
+  }
+
+  :--datePublished {
+    &::before {
+      content: '(';
+    }
+
+    &::after {
+      content: ')';
+    }
+
+    + :--title {
+      display: none;
+    }
+  }
+
+  :--pagination {
+    &::before {
+      content: ':';
+    }
+
+    &::after {
+      content: '.';
+    }
+  }
+
+  :--PublicationIssue {
+    + :--datePublished {
+      display: none;
+    }
+  }
+
+  :--url {
+    font-size: 0.6875rem;
+    line-height: 2.18182;
+    border-bottom: none;
+  }
+
+  :--abstracts {
+    li {
+      display: inline;
+
+      a {
+        border-bottom: none;
+      }
+
+      &::after {
+        content: ' | ';
+      }
+
+      &:last-child::after {
+        content: normal;
+      }
+    }
+  }
+
+  /* MLA Citation Styles */
+  :--citation-style-MLA {
+    :--CreativeWork > :--title {
+      &:first-of-type {
+        display: none;
+      }
+
+      &::before {
+        content: '"';
+      }
+
+      &::after {
+        content: '."';
+      }
+    }
+
+    :--authors + :--datePublished {
+      display: none;
+    }
+
+    :--issueNumber + :--datePublished {
+      &::before {
+        content: ' (';
+      }
+
+      + :--pagination {
+        &::after {
+          content: '.';
+        }
+      }
+    }
+
+    :--authors {
+      :--Person {
+        [itemprop='familyName'] {
+          order: 1;
+        }
+
+        [itemprop='givenName'] {
+          order: 2;
+        }
+
+        &:nth-of-type(n + 2) {
+          display: none;
+        }
+
+        &:nth-of-type(1) {
+          &::after {
+            content: ', et al.';
+            font-style: italic;
+          }
+
+          [itemprop='givenName']::after {
+            content: normal;
+          }
+        }
+      }
+    }
+
+    :--datePublished {
+      + :--title {
+        display: inline;
+      }
+    }
+
+    :--PublicationIssue {
+      display: inline;
+
+      + :--datePublished {
+        display: inline;
+
+        &::after {
+          content: ').';
+        }
+      }
+    }
+
+    :--pagination {
+      &::before {
+        content: ': ';
+      }
+
+      &::after {
+        content: normal;
+      }
+    }
+
+    :--url {
+      display: block;
+    }
+  }
+
+  /* APA Citation Styles */
+  :--citation-style-APA {
+    :--CreativeWork > :--title {
+      &::after {
+        content: '.';
+      }
+    }
+
+    :--authors {
+      :--Person {
+        [itemprop='familyName'] {
+          order: 1;
+
+          &::after {
+            content: ', ';
+            white-space: pre;
+          }
+        }
+
+        [itemprop='givenName'] {
+          order: 2;
+
+          &::after {
+            content: '.,';
+          }
+        }
+
+        &:last-child {
+          &::before {
+            content: '& ';
+            white-space: pre;
+          }
+
+          [itemprop='givenName'] {
+            &::after {
+              content: '. ';
+            }
+          }
+        }
+      }
+    }
+
+    :--datePublished {
+      &::after {
+        content: '.';
+      }
+    }
+
+    :--PublicationIssue {
+      display: inline;
+
+      :--title {
+        &::after {
+          content: ', ';
+          font-style: normal;
+        }
+      }
+
+      :--issueNumber {
+        &::after {
+          content: ', ';
+          font-weight: normal;
+        }
+      }
+
+      :--pagination {
+        &::before {
+          content: normal;
+        }
+      }
+    }
+  }
+}