From 2cc78615aff1a3cb3f806aa1044da3dce1313256 Mon Sep 17 00:00:00 2001
From: Jacqueline Wijaya <jackie.wijaya@gmail.com>
Date: Fri, 23 Aug 2019 17:56:09 -0700
Subject: [PATCH] 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.
---
 src/common/styles/common.css    | 295 +++++++++++++++++++++++
 src/demo/article.html           | 326 +++++++++++++-------------
 src/demo/converted-article.html |  35 +++
 src/themes/eLife/styles.css     | 251 +-------------------
 src/themes/nature/styles.css    | 401 ++++++++++++--------------------
 5 files changed, 637 insertions(+), 671 deletions(-)

diff --git a/src/common/styles/common.css b/src/common/styles/common.css
index c96fb9ea8..aa3571a3d 100644
--- 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;
+        }
+      }
+    }
+  }
+}
diff --git a/src/demo/article.html b/src/demo/article.html
index 87723c6b4..07105002a 100644
--- a/src/demo/article.html
+++ b/src/demo/article.html
@@ -6581,287 +6581,281 @@ <h2>
       </h2>
 
       <ol itemprop="references">
-        <li>
-          <div itemscope itemtype="https://schema.org/CreativeWork">
-            <a
-              href="https://doi.org/10.1016/j.cell.2010.07.042"
-              itemprop="title"
-              >Cell flow reorients the axis of planar polarity in the wing
-              epithelium of Drosophila</a
-            >
-
-            <ol itemprop="authors">
-              <li itemscope itemtype="https://schema.org/Person">
-                <span
-                  ><a
-                    href="https://scholar.google.com/scholar?q=%22author:B+Aigouy%22"
-                    ><span itemprop="familyName">Aigouy</span
-                    ><span itemprop="givenName">B</span></a
-                  ></span
-                >
-              </li>
-              <li itemscope itemtype="https://schema.org/Person">
-                <span
-                  ><a
-                    href="https://scholar.google.com/scholar?q=%22author:R+Farhadifar%22"
-                    ><span itemprop="familyName">Farhadifar</span
-                    ><span itemprop="givenName">R</span></a
-                  ></span
-                >
-              </li>
-              <li itemscope itemtype="https://schema.org/Person">
-                <span
-                  ><a
-                    href="https://scholar.google.com/scholar?q=%22author:DB+Staple%22"
-                    ><span itemprop="familyName">Staple</span
-                    ><span itemprop="givenName">DB</span></a
-                  ></span
-                >
-              </li>
-              <li itemscope itemtype="https://schema.org/Person">
-                <span
-                  ><a
-                    href="https://scholar.google.com/scholar?q=%22author:A+Sagner%22"
-                    ><span itemprop="familyName">Sagner</span
-                    ><span itemprop="givenName">A</span></a
-                  ></span
-                >
-              </li>
-              <li itemscope itemtype="https://schema.org/Person">
-                <span
-                  ><a
-                    href="https://scholar.google.com/scholar?q=%22author:JC+R%C3%B6per%22"
-                    ><span itemprop="familyName">Röper</span
-                    ><span itemprop="givenName">JC</span></a
-                  ></span
-                >
-              </li>
-              <li itemscope itemtype="https://schema.org/Person">
-                <span
-                  ><a
-                    href="https://scholar.google.com/scholar?q=%22author:F+J%C3%BClicher%22"
-                    ><span itemprop="familyName">Jülicher</span
-                    ><span itemprop="givenName">F</span></a
-                  ></span
-                >
-              </li>
-              <li itemscope itemtype="https://schema.org/Person">
-                <span
-                  ><a
-                    href="https://scholar.google.com/scholar?q=%22author:S+Eaton%22"
-                    ><span itemprop="familyName">Eaton</span
-                    ><span itemprop="givenName">S</span></a
-                  ></span
-                >
-              </li>
-            </ol>
-
-            <time itemprop="datePublished" datetime="2010">2010</time>
-
-            <ul
-              itemscope
-              itemtype="https://stencila.github.io/schema/PublicationIssue"
-            >
-              <em itemprop="title">Cell</em>
-              <strong itemprop="issueNumber">142</strong
-              ><span itemprop="pagination">773–786</span>
-              <time itemprop="datePublished" datetime="2010">2010</time>
-            </ul>
-
-            <a href="https://doi.org/10.1016/j.cell.2010.07.042" itemprop="url"
-              >https://doi.org/10.1016/j.cell.2010.07.042</a
-            >
-
-            <ul itemprop="abstracts">
-              <li
-                itemscope
-                itemtype="https://stencila.github.io/schema/Abstract"
+        <li itemscope itemtype="https://schema.org/CreativeWork">
+          <a href="https://doi.org/10.1016/j.cell.2010.07.042" itemprop="title"
+            >Cell flow reorients the axis of planar polarity in the wing
+            epithelium of Drosophila</a
+          >
+
+          <ol itemprop="authors">
+            <li itemscope itemtype="https://schema.org/Person">
+              <span
+                ><a
+                  href="https://scholar.google.com/scholar?q=%22author:B+Aigouy%22"
+                  ><span itemprop="familyName">Aigouy</span
+                  ><span itemprop="givenName">B</span></a
+                ></span
               >
-                <a href="https://www.ncbi.nlm.nih.gov/pubmed/20813263"
-                  >PubMed</a
-                >
-              </li>
-              <li
-                itemscope
-                itemtype="https://stencila.github.io/schema/Abstract"
+            </li>
+            <li itemscope itemtype="https://schema.org/Person">
+              <span
+                ><a
+                  href="https://scholar.google.com/scholar?q=%22author:R+Farhadifar%22"
+                  ><span itemprop="familyName">Farhadifar</span
+                  ><span itemprop="givenName">R</span></a
+                ></span
               >
-                <a
-                  href="https://scholar.google.com/scholar_lookup?title=Cell+flow+reorients+the+axis+of+planar+polarity+in+the+wing+epithelium+of+Drosophila&amp;author=B+Aigouy&amp;author=R+Farhadifar&amp;author%5B2%5D=DB+Staple&amp;author%5B3%5D=A+Sagner&amp;author%5B4%5D=JC+R%C3%B6per&amp;author%5B5%5D=F+J%C3%BClicher&amp;author%5B6%5D=S+Eaton&amp;publication_year=2010&amp;journal=Cell&amp;volume=142&amp;pages=pp.+773%E2%80%93786&amp;pmid=20813263"
-                  >Google Scholar</a
-                >
-              </li>
-            </ul>
-          </div>
+            </li>
+            <li itemscope itemtype="https://schema.org/Person">
+              <span
+                ><a
+                  href="https://scholar.google.com/scholar?q=%22author:DB+Staple%22"
+                  ><span itemprop="familyName">Staple</span
+                  ><span itemprop="givenName">DB</span></a
+                ></span
+              >
+            </li>
+            <li itemscope itemtype="https://schema.org/Person">
+              <span
+                ><a
+                  href="https://scholar.google.com/scholar?q=%22author:A+Sagner%22"
+                  ><span itemprop="familyName">Sagner</span
+                  ><span itemprop="givenName">A</span></a
+                ></span
+              >
+            </li>
+            <li itemscope itemtype="https://schema.org/Person">
+              <span
+                ><a
+                  href="https://scholar.google.com/scholar?q=%22author:JC+R%C3%B6per%22"
+                  ><span itemprop="familyName">Röper</span
+                  ><span itemprop="givenName">JC</span></a
+                ></span
+              >
+            </li>
+            <li itemscope itemtype="https://schema.org/Person">
+              <span
+                ><a
+                  href="https://scholar.google.com/scholar?q=%22author:F+J%C3%BClicher%22"
+                  ><span itemprop="familyName">Jülicher</span
+                  ><span itemprop="givenName">F</span></a
+                ></span
+              >
+            </li>
+            <li itemscope itemtype="https://schema.org/Person">
+              <span
+                ><a
+                  href="https://scholar.google.com/scholar?q=%22author:S+Eaton%22"
+                  ><span itemprop="familyName">Eaton</span
+                  ><span itemprop="givenName">S</span></a
+                ></span
+              >
+            </li>
+          </ol>
+
+          <time itemprop="datePublished" datetime="2010">2010</time>
+
+          <a href="https://doi.org/10.1016/j.cell.2010.07.042" itemprop="title"
+            >Cell flow reorients the axis of planar polarity in the wing
+            epithelium of Drosophila</a
+          >
+
+          <ul
+            itemscope
+            itemtype="https://stencila.github.io/schema/PublicationIssue"
+          >
+            <em itemprop="title">Cell</em>
+            <strong itemprop="issueNumber">142</strong
+            ><span itemprop="pagination">773–786</span>
+          </ul>
+
+          <time itemprop="datePublished" datetime="2010">2010</time>
+
+          <a href="https://doi.org/10.1016/j.cell.2010.07.042" itemprop="url"
+            >https://doi.org/10.1016/j.cell.2010.07.042</a
+          >
+
+          <ul itemprop="abstracts">
+            <li itemscope itemtype="https://stencila.github.io/schema/Abstract">
+              <a href="https://www.ncbi.nlm.nih.gov/pubmed/20813263">PubMed</a>
+            </li>
+            <li itemscope itemtype="https://stencila.github.io/schema/Abstract">
+              <a
+                href="https://scholar.google.com/scholar_lookup?title=Cell+flow+reorients+the+axis+of+planar+polarity+in+the+wing+epithelium+of+Drosophila&amp;author=B+Aigouy&amp;author=R+Farhadifar&amp;author%5B2%5D=DB+Staple&amp;author%5B3%5D=A+Sagner&amp;author%5B4%5D=JC+R%C3%B6per&amp;author%5B5%5D=F+J%C3%BClicher&amp;author%5B6%5D=S+Eaton&amp;publication_year=2010&amp;journal=Cell&amp;volume=142&amp;pages=pp.+773%E2%80%93786&amp;pmid=20813263"
+                >Google Scholar</a
+              >
+            </li>
+          </ul>
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           2
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           3
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           4
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           5
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           6
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           7
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           8
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           9
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           10
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           11
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           12
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           13
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           14
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           15
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           16
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           17
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           18
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           19
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           20
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           21
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           22
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           23
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           24
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           25
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           26
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           27
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           28
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           29
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           30
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           31
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           32
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           33
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           34
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           35
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           36
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           37
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           38
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           39
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           40
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           41
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           42
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           43
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           44
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           45
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           46
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           47
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           48
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           49
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           50
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           51
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           52
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           53
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           54
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           55
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           56
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           57
         </li>
-        <li>
+        <li itemscope itemtype="https://schema.org/CreativeWork">
           58
         </li>
       </ol>
diff --git a/src/demo/converted-article.html b/src/demo/converted-article.html
index 6f6fb40d6..9c1af2f9b 100644
--- a/src/demo/converted-article.html
+++ b/src/demo/converted-article.html
@@ -6603,6 +6603,41 @@ <h2>References</h2>
               )
           })
         }
+
+        const referenceListItemSel = '[itemprop="references"] > li'
+        const titleSel = '[itemprop="title"]'
+        const datePublishedSel = '[itemprop="datePublished"]'
+        const publicationIssueSel =
+          '[itemtype="https://schema.stenci.la/PublicationIssue"]'
+
+        document.querySelectorAll(referenceListItemSel).forEach(node => {
+          const datePublished = node.querySelector(datePublishedSel)
+          const title = node.querySelector(titleSel)
+          const titleCopy = title.cloneNode(true)
+
+          // Add title node after original datePublished node
+          datePublished.parentNode.insertBefore(
+            titleCopy,
+            datePublished.nextSibling
+          )
+
+          // Add datePublished node after PublicationIssue node (if exists)
+          const publicationIssue = node.querySelector(publicationIssueSel)
+          const datePublishedCopy = datePublished.cloneNode(true)
+
+          if (publicationIssue) {
+            publicationIssue.parentNode.insertBefore(
+              datePublishedCopy,
+              publicationIssue.nextSibling
+            )
+          } else {
+            // Otherwise, add node after titleCopy
+            titleCopy.parentNode.insertBefore(
+              datePublishedCopy,
+              titleCopy.nextSibling
+            )
+          }
+        })
       }
 
       document.addEventListener('DOMContentLoaded', ready)
diff --git a/src/themes/eLife/styles.css b/src/themes/eLife/styles.css
index 43bfac622..374e6d4f9 100644
--- a/src/themes/eLife/styles.css
+++ b/src/themes/eLife/styles.css
@@ -343,7 +343,7 @@ blockquote {
   }
 
   :--CreativeWork {
-    > :--title {
+    > :--title:first-of-type {
       display: block;
       font-size: 1rem;
       line-height: 1.5;
@@ -357,252 +357,7 @@ blockquote {
     font-family: var(--body-font);
   }
 
-  /* Shared Styles */
-  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: ')';
-    }
-  }
-
-  :--pagination {
-    &::before {
-      content: ':';
-    }
-
-    &::after {
-      content: '.';
-    }
-
-    + :--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: ' ';
-      }
-    }
-
-    :--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.';
-          }
-
-          [itemprop='givenName']::after {
-            content: normal;
-          }
-        }
-      }
-    }
-
-    :--PublicationIssue {
-      display: inline;
-    }
-
-    :--pagination {
-      &::before {
-        content: ': ';
-      }
-
-      + :--datePublished {
-        display: inline;
-
-        &::after {
-          content: '.';
-        }
-      }
-
-      &::after {
-        content: normal;
-      }
-    }
-  }
-
-  /* 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;
-        }
-      }
-    }
+  :--title + :--datePublished {
+    display: none;
   }
 }
diff --git a/src/themes/nature/styles.css b/src/themes/nature/styles.css
index efb48e727..c763ad983 100644
--- a/src/themes/nature/styles.css
+++ b/src/themes/nature/styles.css
@@ -66,11 +66,11 @@ article > * {
 }
 
 /* Heading Overflow Styles */
-h1 {
+h1[role='title'] {
   font-weight: 400;
 }
 
-h2 {
+h1:not([role='title']) {
   position: relative; /* child absolute */
   /* negative offset = section padding */
   margin: 0 -30px;
@@ -79,7 +79,7 @@ h2 {
   background: var(--heading-color);
 }
 
-h2:before {
+h1:not([role='title']):before {
   content: '';
   position: absolute;
   /* fill vertically */
@@ -91,23 +91,23 @@ h2:before {
 }
 
 @media screen and (max-width: 719px) {
-  h2 {
+  h1:not([role='title']) {
     padding: 1.25rem 0 0.275rem;
   }
 
-  h2:before {
+  h1:not([role='title']):before {
     z-index: -1;
     right: -16px;
   }
 }
 
 p,
-h1,
+h1[role='title'],
+h1:not([role='title']),
 h2,
 h3,
 h4,
 h5,
-h6,
 ul,
 ol,
 hr,
@@ -117,33 +117,33 @@ a {
   margin-right: auto;
 }
 
-h1,
+h1[role='title'],
+h1:not([role='title']),
 h2,
 h3,
 h4,
-h5,
-h6 {
+h5 {
   line-height: 125%;
   margin-top: 2rem;
 }
 
-p + h1,
+p + h1[role='title'],
+p + h1:not([role='title']),
 p + h2,
 p + h3,
 p + h4,
-p + h5,
-p + h6 {
+p + h5 {
   margin-top: 2.25rem;
 }
 
+ol + h2,
 ol + h3,
 ol + h4,
 ol + h5,
-ol + h6,
+ul + h2,
 ul + h3,
 ul + h4,
-ul + h5,
-ul + h6 {
+ul + h5 {
   margin-top: 1.75rem;
 }
 
@@ -175,6 +175,10 @@ article > pre {
 }
 
 figure {
+  > figure {
+    border: none;
+  }
+
   img,
   pre {
     padding: 1rem;
@@ -200,9 +204,15 @@ figcaption {
     padding-left: 0;
   }
 
-  h6 {
+  h1[role='title'],
+  h1:not([role='title']),
+  h2,
+  h3,
+  h4,
+  h5 {
     font-family: var(--body-font);
     font-size: 1rem;
+    padding-left: 0;
   }
 
   *:first-child {
@@ -243,92 +253,92 @@ a:link {
   }
 }
 
-h1,
+h1[role='title'],
+h1:not([role='title']),
 h2,
 h3,
-h4,
-h5 {
+h4 {
   margin: 2.75rem auto 1rem;
   line-height: 1.25;
 }
 
-h1 {
+h1[role='title'] {
+  padding-left: 30px;
   margin-top: 0;
-  font-weight: 900;
   font-size: 1.953rem;
 }
 
-h2 {
+h1:not([role='title']) {
   font-size: 1.563rem;
 }
 
-h3 {
+h2 {
   font-size: 1rem;
   margin-bottom: 0;
 }
 
-h4 {
+h3 {
   font-size: 1rem;
   margin-bottom: 0;
 }
 
-h5 {
+h4 {
   font-size: 0.8rem;
   margin-bottom: 0;
 }
 
-h6,
+h5,
 small,
 .text_small {
   font-size: 0.725rem;
   margin-bottom: 0;
 }
 
-h1 + h1,
+h1[role='title'] + h1[role='title'],
 h1 + h2,
-h1 + h3,
-h1 + h4,
-h1 + h5,
-h1 + h6,
-h2 + h1,
+h1[role='title'] + h2,
+h1[role='title'] + h3,
+h1[role='title'] + h4,
+h1[role='title'] + h5,
+h1:not([role='title']) + h1[role='title'],
+h1:not([role='title']) + h1:not([role='title']),
+h1:not([role='title']) + h3,
+h1:not([role='title']) + h4,
+h1:not([role='title']) + h5,
+h2 + h1[role='title'],
+h2 + h1:not([role='title']),
 h2 + h2,
+h2 + h3,
 h2 + h4,
 h2 + h5,
-h2 + h6,
-h3 + h1,
+h3 + h1[role='title'],
+h3 + h1:not([role='title']),
 h3 + h2,
 h3 + h3,
 h3 + h4,
 h3 + h5,
-h3 + h6,
-h4 + h1,
+h4 + h1[role='title'],
+h4 + h1:not([role='title']),
 h4 + h2,
 h4 + h3,
 h4 + h4,
 h4 + h5,
-h4 + h6,
-h5 + h1,
+h5 + h1[role='title'],
+h5 + h1:not([role='title']),
 h5 + h2,
 h5 + h3,
 h5 + h4,
-h5 + h5,
-h5 + h6,
-h6 + h1,
-h6 + h2,
-h6 + h3,
-h6 + h4,
-h6 + h5,
-h6 + h6 {
+h5 + h5 {
   margin-top: 0;
 }
 
-h1:first-of-type,
+h1[role='title'],
 h1 + h2 {
   padding-top: inherit;
   margin-top: inherit;
 }
 
-h1:first-of-type {
+h1[role='title'] {
   font-weight: normal;
 }
 
@@ -340,7 +350,7 @@ h1 + h2 {
   color: #7a7a7a;
 }
 
-h2 + h3 {
+h1:not([role='title']) + h2 {
   margin-top: 1rem;
 }
 
@@ -361,32 +371,41 @@ li * {
 }
 
 table {
+  font-family: var(--secondary-font);
   text-align: left;
   border-collapse: collapse;
   font-size: 80%;
   overflow-x: auto;
+  max-width: calc(var(--max-width) - 100px);
+  margin: 0 auto;
+  border: 2px solid #d5d5d5;
+
+  figure > & {
+    max-width: 100%;
+  }
+
+  + table {
+    margin-top: 1.25rem;
+  }
 }
 
-thead {
+thead,
+tbody:first-child tr:first-child {
   font-weight: 900;
-  text-transform: uppercase;
-  font-size: 75%;
-  letter-spacing: 1px;
-  border-bottom: 2px solid #f5f5f5;
+  border-bottom: 5px solid #959595;
 }
 
-th {
+th,
+tbody:first-child tr:first-child {
   font-weight: 900;
   padding: 0.5em 1em;
   border-right: solid 1px #f1f1f2;
-}
-
-tr:nth-child(even) {
-  background-color: #f5f5f5;
+  background-color: #eeeeee;
 }
 
 td {
   border-right: solid 1px #f1f1f2;
+  border-bottom: 1px solid #d5d5d5;
   padding: 0.25em 1em;
 }
 
@@ -414,7 +433,7 @@ blockquote {
 /* Microdata-based Styles */
 :--publisher,
 :--authors,
-:--CreativeWork header h3,
+:--CreativeWork header h2,
 :--CreativeWork header ol {
   font-family: var(--secondary-font);
   font-size: 0.875rem;
@@ -451,7 +470,8 @@ blockquote {
     &::before {
       content: counter(reference-counter) '. ';
       font-size: 24px;
-      margin-right: 0.5rem;
+      margin-right: 5px;
+      margin-left: -90px;
       line-height: 1;
       display: inline-block;
       text-align: right;
@@ -460,109 +480,39 @@ blockquote {
   }
 
   :--CreativeWork {
-    margin: -2rem 0 0 90px;
-  }
-
-  /* Shared Styles */
-  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;
-      }
-    }
-  }
-
-  :--pagination {
-    &::before {
-      content: ':';
-    }
-
-    &::after {
-      content: '.';
-    }
-  }
-
-  :--url {
-    font-size: 0.6875rem;
-    line-height: 2.18182;
-    border-bottom: none;
+    margin-left: 90px;
+    font-size: 17px;
   }
 
   :--abstracts {
+    text-align: right;
+
     li {
       display: inline;
+      padding-left: 22px;
 
       a {
         border-bottom: none;
+        font-style: normal;
+        font-family: var(--secondary-font);
+        font-weight: bold;
+        font-size: 13px;
       }
 
       &::after {
-        content: ' | ';
-      }
-
-      &:last-child::after {
         content: normal;
       }
     }
   }
 
   /* MLA Citation Styles */
-  /* :--citation-style-MLA { */
   :--CreativeWork > :--title {
     &:first-of-type {
       display: none;
     }
 
-    &::before {
-      content: '"';
-    }
-
     &::after {
-      content: '."';
+      content: '.';
     }
   }
 
@@ -572,7 +522,13 @@ blockquote {
 
   :--issueNumber + :--datePublished {
     &::before {
-      content: ' ';
+      content: ' (';
+    }
+
+    + :--pagination {
+      &::after {
+        content: '.';
+      }
     }
   }
 
@@ -580,155 +536,83 @@ blockquote {
     :--Person {
       [itemprop='familyName'] {
         order: 1;
+
+        &::after {
+          content: normal;
+        }
       }
 
       [itemprop='givenName'] {
         order: 2;
-      }
-
-      &:nth-of-type(n + 2) {
-        display: none;
-      }
 
-      &:nth-of-type(1) {
-        [itemprop='givenName']::after {
-          content: normal;
+        &::before {
+          content: ', ';
+          white-space: pre;
         }
 
         &::after {
-          content: ', et al.';
+          content: ',';
           white-space: pre;
         }
       }
-    }
-  }
-
-  :--PublicationIssue {
-    display: inline;
-  }
-
-  :--pagination {
-    &::before {
-      content: ': ';
-    }
-
-    + :--datePublished {
-      display: inline;
 
-      &::after {
-        content: '.';
+      &:last-of-type {
+        [itemprop='givenName']::after {
+          content: '.';
+        }
       }
     }
-
-    &::after {
-      content: normal;
-    }
   }
-  /* } */
 
-  /* APA Citation Styles */
-  :--citation-style-APA {
-    :--CreativeWork > :--title {
-      &::after {
-        content: '.';
-      }
+  :--datePublished {
+    + :--title {
+      display: inline;
     }
 
-    :--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: '. ';
-            }
-          }
-        }
+    &:last-child {
+      &::before {
+        content: ' (';
+        white-space: pre;
       }
-    }
 
-    :--datePublished {
       &::after {
-        content: '.';
+        content: ').';
+        white-space: pre;
       }
     }
+  }
 
-    :--PublicationIssue {
-      display: inline;
-
-      :--title {
-        &::after {
-          content: ', ';
-          font-style: normal;
-        }
-      }
+  :--PublicationIssue {
+    display: inline;
 
-      :--issueNumber {
-        &::after {
-          content: ', ';
-          font-weight: normal;
-        }
-      }
+    + :--datePublished {
+      display: inline;
 
-      :--pagination {
-        &::before {
-          content: normal;
-        }
+      &::after {
+        content: ').';
       }
     }
   }
 
-  /* ol,
-  ul {
-    padding-left: 0 !important;
+  :--pagination {
+    &::before {
+      content: ': ';
+    }
 
-    > li {
-      display: inline;
-      padding-left: 0 !important;
+    &::after {
+      content: normal;
     }
   }
 
-  ol {
-    display: inline;
+  :--url {
+    display: block;
   }
-
-  li {
-    > p:not(:first-child) {
-      padding-left: 0;
-      display: inline;
-    }
-
-    > p:first-child {
-      padding-left: 0;
-    }
-  } */
 }
 
 :--authorDetails {
+  h3,
   h4,
-  h5,
-  h6 {
+  h5 {
     padding-left: 0;
   }
 }
@@ -750,10 +634,10 @@ blockquote {
 }
 
 @media screen and (min-width: 720px) {
-  h1:first-of-type,
+  h1[role='title'],
   :--publisher,
   :--authors,
-  :--CreativeWork header h3,
+  :--CreativeWork header h2,
   :--CreativeWork header ol {
     padding-left: 50px;
   }
@@ -763,9 +647,9 @@ blockquote {
   }
 
   p,
+  h2,
   h3,
   h4,
-  h5,
   ul,
   ol {
     padding-left: 50px; /* desktop+ */
@@ -773,7 +657,6 @@ blockquote {
 
   article > pre,
   pre[class*='language-'],
-  figure,
   blockquote {
     max-width: calc(var(--max-width) - 100px);
     margin: 0 auto;
@@ -787,4 +670,8 @@ blockquote {
       padding-left: 10px;
     }
   }
+
+  figure {
+    max-width: calc(var(--max-width) - 100px);
+  }
 }