From ca36008dcb828014d910df6af39a3928c086a1f0 Mon Sep 17 00:00:00 2001
From: alex-ketch <alex@ketch.me>
Date: Tue, 18 Feb 2020 13:59:43 -0500
Subject: [PATCH] feat(PLOS): Update theme with new semantic selectors

---
 src/themes/plos/index.ts   |  30 ----
 src/themes/plos/styles.css | 329 +++++++++++++++++--------------------
 2 files changed, 153 insertions(+), 206 deletions(-)

diff --git a/src/themes/plos/index.ts b/src/themes/plos/index.ts
index 9dac997ec..328655b97 100644
--- a/src/themes/plos/index.ts
+++ b/src/themes/plos/index.ts
@@ -1,33 +1,3 @@
 import { load } from '../../shared/js'
 
 load()
-
-/*
-This is old code, currently commented out with the view to
-consolidating in shared.
-
-export const init = (): void => {
-  const referenceListItemSel = '[itemprop="references"] > li'
-  const datePublishedSel = '[itemprop="datePublished"]'
-  const publicationIssueTitleSel =
-    '[itemtype="https://schema.org/PublicationIssue"] [itemprop="title"]'
-
-  document.querySelectorAll(referenceListItemSel).forEach(node => {
-    // If PublicationIssue title node exists,
-    const publicationIssueTitle = node.querySelector(publicationIssueTitleSel)
-
-    // Move last datePublished after PublicationIssue title.
-    const datePublished = document.querySelectorAll(datePublishedSel)
-    const lastDatePublished = datePublished[datePublished.length - 1]
-
-    if (publicationIssueTitle && publicationIssueTitle.parentNode) {
-      publicationIssueTitle.parentNode.insertBefore(
-        lastDatePublished,
-        publicationIssueTitle.nextSibling
-      )
-    }
-  })
-}
-
-document.addEventListener('DOMContentLoaded', init)
-*/
diff --git a/src/themes/plos/styles.css b/src/themes/plos/styles.css
index ee6362ca3..e57c7a1e3 100644
--- a/src/themes/plos/styles.css
+++ b/src/themes/plos/styles.css
@@ -2,75 +2,66 @@
 @import 'prismjs/themes/prism.css';
 @import '../../shared/fonts/openSans/openSans.css';
 
-:root {
-  --max-width: 650px;
-  --max-width-media: 980px;
-  --body-font: Helvetica, Arial, sans-serif;
-  --body-font-size: 0.8125rem;
-  --body-font-weight: 400;
-  --secondary-font: 'Open Sans', Helvetica, Arial, sans-serif;
-  --secondary-font-weight: 600;
-  --text-color: #202020;
-  --light-text-color: #606060;
-  --link-color: #16a127;
-  --hover-color: #202020;
-  --border-color: #e0e0e0;
-  --figure-bg-color: #efefef;
-  --bg-color: #fff;
-}
-
 /* Microdata-based Styles */
 @import '../../designa/Entity.css';
 @import '../../designa/Person.css';
 
 :--Article {
-  > :--headline + div {
-    max-width: var(--max-width);
-    margin: 0 auto 1.25rem;
-    font-size: var(--body-font-size);
-    color: var(--light-text-color);
-    line-height: normal;
-
-    :--authors {
-      @mixin list-separated;
-    }
-
-    :--organizations {
-      @mixin list-separated '; ';
-
-      margin-top: 1.25rem;
-      display: block;
+  --bg-color: #fff;
+  --body-font-size: var(--font-size-body);
+  --body-font-weight: 400;
+  --body-font: Helvetica, Arial, sans-serif;
+  --border-color: #e0e0e0;
+  --figure-bg-color: #efefef;
+  --font-size-body: 13px;
+  --font-size-headline: 26px;
+  --font-size-heading: 20px;
+  --font-size-80: 80%;
+  --hover-color: #202020;
+  --light-text-color: #606060;
+  --link-color: #16a127;
+  --max-width-media: 980px;
+  --max-width: 650px;
+  --secondary-font-weight: 600;
+  --secondary-font: 'Open Sans', Helvetica, Arial, sans-serif;
+  --text-color: #202020;
 
-      :--Organization > * {
-        display: inline;
-      }
-    }
+  * {
+    box-sizing: border-box;
   }
-}
 
-html,
-body {
   background-color: var(--bg-color);
   color: var(--text-color);
-}
-
-body {
   font-family: var(--body-font);
+  font-size: var(--font-size-body);
   line-height: 120%;
-  margin: auto;
+  margin: 0 auto 4rem auto;
   max-width: 69.625rem;
   padding: 0 7%;
-}
 
-article {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  @media only screen and (min-width: 45.625em) {
+    padding-left: 14%;
+    padding-right: 14%;
+  }
+
+  a,
+  :--Link {
+    &:link,
+    &:visited {
+      color: var(--link-color);
+    }
+
+    &:hover {
+      color: var(--hover-color);
+    }
+  }
 }
 
-article > * {
-  width: 100%;
+:--Article > span {
+  display: block;
+}
 
+:--Article > * {
   /*
     Align miscelaneous nodes (text, math, etc) with
     the rest of article.
@@ -78,154 +69,118 @@ article > * {
   max-width: var(--max-width);
   margin-left: auto;
   margin-right: auto;
+  width: 100%;
 }
 
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-ol,
-hr,
-blockquote,
-a,
-figure,
-table,
-article > pre,
-article > pre[class*='language-'],
+:--Paragraph,
+:--Heading,
+:--headline,
+:--List,
+:--Collection,
+:--ThematicBreak,
+:--QuoteBlock,
+:--Figure,
+:--Table,
+:--CodeBlock,
 :--CodeChunk {
   max-width: var(--max-width);
   margin-left: auto;
   margin-right: auto;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+:--Heading,
+:--headline {
   line-height: 1.125rem;
   font-weight: var(--body-font-weight);
   font-family: var(--body-font);
   margin: 2rem auto 1.125rem;
+
+  & + & {
+    margin-top: 0;
+  }
 }
 
-h1 {
-  font-size: 1.25rem;
+h1:--Heading {
+  font-size: var(--font-size-headline);
   line-height: 1.24138;
   margin-bottom: 1.5rem;
   padding-top: 3rem;
 }
 
-article > h1:--headline {
+:--Article > :--headline {
   font-family: var(--secondary-font);
   font-weight: var(--secondary-font-weight);
-  font-size: 1.625rem;
+  font-size: var(--font-size-headline);
   line-height: 27px;
 }
 
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 1rem;
+h2:--Heading,
+h3:--Heading,
+h4:--Heading,
+h5:--Heading {
+  font-size: var(--font-size-heading);
+  line-height: 0.9;
 }
 
-h2,
-h3 {
-  font-weight: var(--secondary-font-weight);
-}
-
-h2 {
-  line-height: 1.15385;
+h2:--Heading {
   padding: 1.3125rem 0;
 }
 
-h3 {
-  line-height: 1.09091;
+h3:--Heading {
   padding: 0.75rem 0;
 }
 
-h6,
-small,
-.text_small {
-  font-size: 0.8125rem;
+h6:--Heading {
+  font-size: var(--font-size-body);
   line-height: 1.84615;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  & + h1,
-  & + h2,
-  & + h3,
-  & + h4,
-  & + h5,
-  & + h6 {
-    margin-top: 0;
-  }
-}
-
-p {
+:--Paragraph {
   margin: 0 auto 1.25rem;
   font-size: var(--body-font-size);
   line-height: 1.125rem;
 
-  & + h1,
-  & + h2 {
+  & + h1:--Heading,
+  & + h2:--Heading {
     margin-top: 2.25rem;
   }
 
-  & + h3,
-  & + h4,
-  & + h5,
-  & + h6 {
+  & + h3:--Heading,
+  & + h4:--Heading,
+  & + h5:--Heading,
+  & + h6:--Heading {
     margin-top: 3.75rem;
     position: relative;
   }
 }
 
-a:link,
-a:visited {
-  color: var(--link-color);
-}
-
-a:hover {
-  color: var(--hover-color);
-}
+:--List,
+:--Collection {
+  padding-left: 1.25rem;
 
-ol,
-ul {
-  padding: 0;
+  @media screen and (min-width: 380px) {
+    padding: 0;
+  }
 
-  & ul,
-  & ol {
+  & & {
     padding-left: 1rem;
   }
 
-  & + h3,
-  & + h4,
-  & + h5,
-  & + h6 {
+  & + h3:--Heading,
+  & + h4:--Heading,
+  & + h5:--Heading,
+  & + h6:--Heading {
     margin-top: 1.75rem;
   }
 }
 
-li {
+:--ListItem {
   > *:first-child {
     margin-top: 0;
   }
 }
 
-figure,
+:--Figure,
 :--CodeChunk {
   font-family: var(--body-font);
   margin: 1.25rem auto;
@@ -244,17 +199,14 @@ figure,
   }
 }
 
-figcaption {
-  font-size: 0.8125rem;
+:--caption,
+:--Figure figcaption {
+  font-size: var(--font-size-body);
   width: 100%;
   padding: 0 1.125rem 1.125rem;
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :--Heading,
+  :--headline {
     font-weight: var(--secondary-font-weight);
     line-height: 1.84615;
   }
@@ -268,54 +220,70 @@ figcaption {
   }
 }
 
-table {
+:--Table {
   border-collapse: collapse;
-  font-size: 80%;
+  font-size: var(--font-size-80);
   overflow-x: auto;
   margin-bottom: 1.5rem;
-}
 
-thead,
-tbody:first-child tr:first-child {
-  font-weight: bold;
-  font-size: 0.8125rem;
-  line-height: 1.38462;
-  vertical-align: top;
-}
+  thead,
+  tbody:first-child tr:first-child {
+    font-weight: bold;
+    font-size: var(--font-size-body);
+    line-height: 1.38462;
+    vertical-align: top;
+  }
 
-th,
-tbody:first-child tr:first-child {
-  background-color: #f7f7f7;
-}
+  th,
+  tbody:first-child tr:first-child {
+    background-color: var(--figure-bg-color);
+  }
 
-th,
-td {
-  vertical-align: top;
-  border: 1px solid var(--border-color);
-  padding: 0.375rem;
+  th,
+  td {
+    vertical-align: top;
+    border: 1px solid var(--border-color);
+    padding: 0.375rem;
+  }
 }
 
-blockquote {
+:--QuoteBlock {
   font-style: italic;
   margin-bottom: 1.5rem;
 }
 
-@media screen and (max-width: 380px) {
-  ul,
-  ol {
-    padding-left: 1.25rem;
+:--authors,
+:--organizations {
+  color: var(--light-text-color);
+  font-size: var(--body-font-size);
+  line-height: normal;
+  list-style: none;
+  margin: 0 auto 1.25rem;
+  max-width: var(--max-width);
+  padding: 0;
+
+  & > li {
+    display: inline;
   }
 }
 
-@media only all and (min-width: 45.625em) {
-  body {
-    padding-left: 14%;
-    padding-right: 14%;
+:--authors {
+  li:--author:not(:last-child) {
+    content: ', ';
+  }
+}
+
+:--organizations {
+  margin-top: 1.25rem;
+  display: block;
+
+  :--Organization > * {
+    display: inline;
   }
 }
 
 /* Microdata-based Styles */
-:--references {
+:--references > ol {
   /* PLoS Citation Styles */
   list-style: none;
   counter-reset: reference-counter;
@@ -340,7 +308,11 @@ blockquote {
     }
   }
 
-  :--CreativeWork > :--headline {
+  :--headline {
+    color: inherit;
+    display: inline;
+    font-size: inherit;
+
     &:first-of-type {
       display: none;
     }
@@ -354,6 +326,11 @@ blockquote {
     }
   }
 
+  :--authors,
+  :--organizations {
+    color: var(--text-color);
+  }
+
   :--authors + :--datePublished {
     display: none;
   }