checkpoint

src/components/d-abstract.js

@@ -5,17 +5,18 @@ const T = Template('d-abstract', `
 <style>
   :host {
     display: block;
-    font-size: 1.3rem;
+    font-size: 1.2rem;
     line-height: 1.8em;
     margin-bottom: 1.5em;
     color: rgba(0, 0, 0, 0.8);
-    font-weight: 400;
+    font-weight: 300;
+    font-family: "Merriweather", georgia, serif;
   }
 
   ::slotted(p) {
     margin-top: 0;
     margin-bottom: 0;
-    grid-column: text-start / page-end;
+    grid-column: text-start / span 9;
   }
   ${body('d-abstract')}
 </style>

src/components/d-article.js

@@ -55,8 +55,8 @@ d-article .marker:hover span {
 }
 
 d-article h2 {
-  grid-column-end: span 5;
-  font-weight: 600;
+  grid-column-end: span 10;
+  font-weight: 700;
   font-size: 24px;
   line-height: 1.25em;
 }
@@ -99,8 +99,10 @@ d-article a {
 d-article p,
 d-article ul,
 d-article ol {
+  font-family: "Merriweather", georgia, serif;
+  font-weight: 300;
   margin-top: 0;
-  margin-bottom: 36px;
+  margin-bottom: 1.7em;
 }
 
 d-article a {

src/components/d-byline.js

@@ -20,6 +20,12 @@ d-byline h3 {
   text-transform: uppercase;
 }
 
+d-byline p {
+  font-family: "Merriweather", georgia, serif;
+  font-weight: 300;
+  margin: 0;
+}
+
 d-byline a,
 d-article d-byline a {
   color: rgba(0, 0, 0, 0.8);
@@ -32,7 +38,7 @@ d-article d-byline a:hover {
   border-bottom: none;
 }
 
-d-byline .authors {
+d-byline .authors p {
   font-weight: 600;
 }
 d-byline .affiliations {
@@ -47,36 +53,32 @@ export function bylineTemplate(frontMatter) {
     <div class="authors">
       <h3>Authors</h3>
       ${frontMatter.authors.map(author => `
-        <div>
+        <p>
           ${author.personalURL
             ? `<a class="name" href="${author.personalURL}">${author.name}</a>`
             : `<div class="name">${author.name}</div>`
           }
-        </div>
+        </pdiv>
       `).join("")}
     </div>
     <div class="affiliations">
       <h3>Affiliations</h3>
       ${frontMatter.authors.map(author => `
-        <div>
+        <p>
           ${author.affiliationURL
             ? `<a class="affiliation" href="${author.affiliationURL}">${author.affiliation}</a>`
             : `<div class="affiliation">${author.affiliation}</div>`
           }
-        </div>
+        </p>
       `).join("")}
     </div>
     <div>
       <h3>Published</h3>
-      <div>${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}</div>
-    </div>
-    <div>
-      <h3>Cite as</h3>
-      <div>${frontMatter.concatenatedAuthors}, ${frontMatter.publishedYear}</div>
+      <p>${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}</p>
     </div>
     <div>
       <h3>DOI</h3>
-      <div>${frontMatter.doi}</div>
+      <p>${frontMatter.doi}</p>
     </div>
   </div>
 `;

src/components/d-title.js

@@ -1,39 +1,42 @@
 import { Template } from '../mixins/template';
-import { body } from '../helpers/layout';
 
-const T = Template('d-headline', `
+const T = Template('d-title', `
 <style>
   :host {
     margin-top: 64px;
     contain: content;
     display: block;
   }
-  .status {
-    grid-column: kicker;
-    font-size: 12px;
-    margin-top: 14px;
-    color: #009688;
-    opacity: 0.7;
-  }
-  .status span {
-    display: inline-block;
-    padding: 4px 0;
-    border-top: 1px solid #80cbc4;
-    border-bottom: 1px solid #80cbc4;
-  }
   ::slotted(h1) {
     grid-column: text-start / page-end;
-    font-size: 44px;
-    font-weight: 600;
+    font-size: 40px;
+    font-weight: 700;
     line-height: 1.3em;
     margin: 0 0 10px;
   }
-  ${body('d-headline')}
+  .status {
+    font-size: 12px;
+    color: #009688;
+    opacity: 0.7;
+    grid-column: kicker;
+    margin-top: 19px;
+  }
+  .status span {
+    line-height: 1;
+    display: inline-block;
+    padding: 7px 7px;
+    border: 1px solid #80cbc4;
+    border-bottom: 1px solid #80cbc4;
+    border-radius: 5px;
+    font-size: 9px;
+    text-transform: uppercase;
+  }
 </style>
-<div class="status kicker"><span>Peer Reviewed</span></div>
+
+<div class="status"><span>Peer Reviewed</span></div>
 <slot></slot>
 `);
 
-export class Headline extends T(HTMLElement) {
+export class Title extends T(HTMLElement) {
 
 }