fix(ELife Theme): Fix regressions with converted-article.html

src/themes/eLife/styles.css

@@ -59,12 +59,12 @@ article > * {
 }
 
 p,
-h1,
+h1[role='title'],
+h1:not([role='title']),
 h2,
 h3,
 h4,
 h5,
-h6,
 ul,
 ol,
 hr,
@@ -80,39 +80,39 @@ img {
   margin-right: auto;
 }
 
-h1,
+h1[role='title'],
+h1:not([role='title']),
 h2,
 h3,
 h4,
-h5,
-h6 {
+h5 {
   font-family: var(--heading-font);
   font-weight: 600;
   margin: 2.75rem auto 1rem;
   line-height: 1.25;
 }
 
 p {
-  & + h1,
-  & + h2 {
+  & + h1[role='title'],
+  & + h1:not([role='title']) {
     margin-top: 2.25rem;
   }
 
+  & + h2,
   & + h3,
   & + h4,
-  & + h5,
-  & + h6 {
+  & + h5 {
     margin-top: 3.75rem;
     position: relative;
   }
 }
 
 ol,
 ul {
+  & + h2,
   & + h3,
   & + h4,
-  & + h5,
-  & + h6 {
+  & + h5 {
     margin-top: 1.75rem;
   }
 }
@@ -126,6 +126,10 @@ figure {
   margin: 3rem auto;
   overflow: auto;
 
+  > figure {
+    margin: 0 auto;
+  }
+
   img {
     display: block;
     max-width: 100%;
@@ -152,15 +156,16 @@ figcaption {
     margin-bottom: 0.75rem;
   }
 
-  h1,
+  h1[role='title'],
+  h1:not([role='title']),
   h2,
   h3,
   h4,
-  h5,
-  h6 {
+  h5 {
     margin-top: 0;
     margin-bottom: 0;
     line-height: 1.84615;
+    font-size: 0.8125rem;
   }
 }
 
@@ -180,72 +185,62 @@ a:hover {
   color: #0288d1;
 }
 
-h1,
-h2 {
+h1[role='title'],
+h1:not([role='title']) {
   padding-top: 3rem;
 }
 
-h1:first-of-type {
+h1[role='title'] {
   text-align: center;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-}
-
-h1 {
   font-size: 1.8125rem;
   line-height: 1.24138;
   margin-bottom: 1.5rem;
 }
 
-h2 {
+h1:not([role='title']) {
   border-top: 1px solid #e0e0e0;
   font-size: 1.625rem;
   line-height: 1.15385;
   padding: 1.3125rem 0;
 }
 
-h3 {
+h2 {
   font-size: 1.375rem;
   line-height: 1.09091;
   padding: 0.75rem 0;
 }
 
-h4 {
+h3 {
   font-size: 1rem;
 }
 
-h5 {
+h4 {
   font-size: 0.8rem;
 }
 
-h6 {
+h5 {
   margin-top: 2rem;
 }
 
-h6,
+h5,
 small,
 .text_small {
   font-size: 0.8125rem;
   line-height: 1.84615;
 }
 
-h1,
+h1[role='title'],
+h1:not([role='title']),
 h2,
 h3,
 h4,
-h5,
-h6 {
-  & + h1,
+h5 {
+  & + h1[role='title'],
+  & + h1:not([role='title']),
   & + h2,
   & + h3,
   & + h4,
-  & + h5,
-  & + h6 {
+  & + h5 {
     margin-top: 0;
   }
 }
@@ -264,6 +259,8 @@ table {
   border-collapse: collapse;
   font-size: 80%;
   overflow-x: auto;
+  margin-bottom: 1.25rem;
+  font-family: var(--heading-font);
 }
 
 th,
@@ -273,14 +270,17 @@ td {
   padding: 0.375rem;
 }
 
-thead {
+thead,
+tbody:first-child tr:first-child {
   font-weight: bold;
   font-size: 0.8125rem;
   line-height: 1.38462;
   vertical-align: top;
+  text-align: center;
 }
 
-th {
+th,
+tbody:first-child tr:first-child {
   background-color: #f7f7f7;
 }
 
@@ -302,14 +302,14 @@ blockquote {
     padding-right: 14%;
   }
 
-  h1 {
+  h1[role='title'] {
     font-size: 2.25rem;
     line-height: 1.33333;
   }
 }
 
 @media only all and (min-width: 56.25em) {
-  h1 {
+  h1[role='title'] {
     font-size: 2.875rem;
     line-height: 1.56522;
   }
@@ -343,10 +343,8 @@ blockquote {
   }
 
   :--CreativeWork {
-    display: inline;
-
     > :--title {
-      display: inline-block;
+      display: block;
       font-size: 1rem;
       line-height: 1.5;
       font-weight: 600;