checkpoint

examples/article.html

@@ -52,19 +52,13 @@
   <d-math block>
     c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
   </d-math>
-  <p>
-    Math can also be quite involved:
-    <d-math block>
-      f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
-    </d-math>
-    <d-math block>
-      \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
-    </d-math>
-  </p>
+  <p>Math can also be quite involved:</p>
+  <d-math block>
+    \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
+  </d-math>
   <a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
   <h3>Citations</h3>
-  <p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite></p>
-  <p>We should also be testing footnotes<d-footnote>This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}</d-math>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
+  <p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite>. We should also be testing footnotes<d-footnote>This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}</d-math>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
   <table>
     <thead>
       <tr><th>First</th><th>Second</th><th>Third</th></tr>

src/components.js

@@ -14,7 +14,7 @@ import { Code }             from './components/d-code';
 import { Footnote }         from './components/d-footnote';
 import { FootnoteList }     from './components/d-footnote-list';
 import { FrontMatter }      from './components/d-front-matter';
-import { Headline }         from './components/d-headline';
+import { Title }            from './components/d-title';
 import { DMath }            from './components/d-math';
 import { References }       from './components/d-references';
 import { TOC }              from './components/d-toc';
@@ -22,7 +22,7 @@ import { Figure }           from './components/d-figure';
 
 const components = [
   Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
-  Footnote, FootnoteList, FrontMatter, Headline, DMath, References, TOC, Figure,
+  Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure,
 ];
 
 /* Distill website specific components */

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) {
 
 }

src/styles/d-math.css

@@ -1,7 +1,7 @@
 span.katex-display {
   text-align: left;
   padding: 8px 0 8px 0;
-  margin: 20px 0 20px 24px;
+  margin: 0 0 1.7em 1em;
 }
 
 span.katex {

src/styles/styles-layout.css

@@ -1,5 +1,5 @@
 @supports not (display: grid) {
-  d-headline,
+  d-title,
   d-abstract,
   d-article,
   d-appendix,
@@ -11,7 +11,7 @@
   }
 }
 
-d-headline,
+d-title,
 d-abstract,
 d-article,
 d-appendix,
@@ -32,7 +32,7 @@ distill-footer {
   }
 }*/
 /* @media(min-width: 768px) {
-  d-headline,
+  d-title,
   d-abstract,
   d-article,
   d-appendix,
@@ -45,7 +45,7 @@ distill-footer {
 } */
 
 @media(min-width: 1060px) {
-  d-headline,
+  d-title,
   d-abstract,
   d-article,
   d-appendix,
@@ -83,7 +83,7 @@ d-article > *  {
 }
 
 .l-page,
-d-headline > *,
+d-title > *,
 d-figure {
   grid-column: page;
 } */

src/transforms/optional-components.js

@@ -18,7 +18,7 @@ export default function(dom, data) {
   //   }
   // } else {
     if (data.title) {
-      let headline = dom.createElement('d-headline');
+      let headline = dom.createElement('d-title');
       let h1 = dom.createElement('h1');
       headline.appendChild(h1);
       h1.textContent = data.title;