Moving headers in appendix to text column

Thanks, humbertaco!

README.md

@@ -1,8 +1,6 @@
 # Distill Template
 
-_Disclaimer: This project is research code. It is not an official Google product._
+This is the repository for the Distill web framework. 
-
-This is the repository for the distill web framework. 
 
 ## Contributing
 
@@ -16,7 +14,9 @@ To contribute a change, [check out the contributing guide](CONTRIBUTING.md).
 Run `npm run start` to start a watching build rollup server. To view the sample pages in the repo, you can run `npm run serve` as a separate process which starts a static server. `npm run build` will run a one-time build.
 
 
-## License
+## Disclaimer & License
+
+_This project is research code. It is not an official product of Google or any other institution supporting Distill._
 
 Copyright 2018, The Distill Template Authors.
 

examples/article.html

@@ -32,7 +32,7 @@
       {
         "author":"Chris Olah",
         "authorURL":"https://colah.github.io/",
-        "affiliations": [{"name": "Google Brain", "url": "https://g.co/brain"}]
+        "affiliations": [{"name": "Google Brain"}]
       },
       {
         "author":"Ludwig Schubert",

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.19",
+  "version": "2.2.26",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.22",
+  "version": "2.2.26",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {

src/components/d-appendix.js

@@ -30,7 +30,7 @@ d-appendix {
 }
 
 d-appendix h3 {
-  grid-column: page-start / text-start;
+  grid-column: text;
   font-size: 15px;
   font-weight: 500;
   margin-top: 1em;

src/components/d-byline.js

@@ -24,11 +24,11 @@ export function bylineTemplate(frontMatter) {
         <p class="author">
           ${author.personalURL ? `
             <a class="name" href="${author.personalURL}">${author.name}</a>` : `
-            <div class="name">${author.name}</div>`}
+            <span class="name">${author.name}</span>`}
         </p>
         <p class="affiliation">
         ${author.affiliations.map(affiliation =>
-          affiliation.url ? `<a class="affiliation" href="${affiliation.url}">${affiliation.name}</a>` : `<div class="affiliation">${affiliation.name}</div>`
+          affiliation.url ? `<a class="affiliation" href="${affiliation.url}">${affiliation.name}</a>` : `<span class="affiliation">${affiliation.name}</span>`
         ).join(', ')}
         </p>
       `).join('')}

src/components/d-cite.js

@@ -19,7 +19,7 @@ const T = Template('d-cite', `
 <style>
 
 :host {
-  display: inline-block;
+
 }
 
 .citation {
@@ -48,10 +48,6 @@ figcaption .citation-number {
   line-height: 1em;
 }
 
-d-hover-box {
-  margin-top: 1.9em;
-}
-
 ul {
   margin: 0;
   padding: 0;
@@ -71,7 +67,10 @@ ul li:last-of-type {
 
 <d-hover-box id="hover-box"></d-hover-box>
 
-<div id="citation-" class="citation"><slot></slot><span class="citation-number"></span></div>
+<div id="citation-" class="citation">
+  <slot></slot>
+  <span class="citation-number"></span>
+</div>
 `);
 
 export class Cite extends T(HTMLElement) {

src/components/d-footnote.js

@@ -22,6 +22,7 @@ d-math[block] {
 }
 
 :host {
+
 }
 
 sup {
@@ -37,13 +38,6 @@ span {
   cursor: default;
 }
 
-.container {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  z-index: 10000;
-}
-
 .footnote-container {
   padding: 10px;
 }

src/components/d-hover-box.js

@@ -20,9 +20,10 @@ const T = Template('d-hover-box', `
 :host {
   position: absolute;
   width: 100%;
-  left: 0;
+  left: 0px;
   z-index: 10000;
   display: none;
+  white-space: normal
 }
 
 .container {
@@ -40,10 +41,13 @@ const T = Template('d-hover-box', `
   left: 0;
   width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: rgb(250, 250, 250);
+  background-color: rgba(250, 250, 250, 0.95);
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   box-sizing: border-box;
+
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 
 </style>
@@ -117,11 +121,14 @@ export class HoverBox extends T(HTMLElement) {
   show(position) {
     this.visible = true;
     this.style.display = 'block';
+    // 10px extra offset from element
+    this.style.top = Math.round(position[1] + 10) + 'px';
   }
 
   showAtNode(node) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
     const bbox = node.getBoundingClientRect();
-    this.show([bbox.right, bbox.bottom]);
+    this.show([node.offsetLeft + bbox.width, node.offsetTop + bbox.height]);
   }
 
   hide() {

src/styles/d-article.css

@@ -227,7 +227,7 @@ d-figure {
 /* KaTeX */
 
 .katex, .katex-prerendered {
-  contain: content;
+  contain: style;
   display: inline-block;
 }
 

src/transforms/mathematics.js

@@ -17,20 +17,20 @@ import { renderMathInElement } from '../helpers/katex-auto-render';
 
 export default function(dom, data) {
   let needsCSS = false;
-  const article = dom.querySelector('d-article');
+  const body = dom.querySelector('body');
 
-  if (!article) {
+  if (!body) {
-    console.warn("No d-article tag found!");
+    console.warn("No body tag found!");
     return;
   }
 
   if (data.katex && data.katex.delimiters) {
     global.document = dom;
-    renderMathInElement(article, data.katex);
+    renderMathInElement(body, data.katex);
   }
 
   // render d-math tags
-  const mathTags = article.querySelectorAll('d-math');
+  const mathTags = body.querySelectorAll('d-math');
   if (mathTags.length > 0) {
     needsCSS = true;
     console.warn(`Prerendering ${mathTags.length} math tags...`);

src/transforms/optional-components.js

@@ -43,7 +43,7 @@ export default function(dom, data) {
 
   let title = dom.querySelector('d-title');
   if (!title) {
-    let title = dom.createElement('d-title');
+    title = dom.createElement('d-title');
     body.insertBefore(title, byline);
   }
 

src/transforms/typeset.js

@@ -24,12 +24,17 @@ export default function(dom) {
     if (text && acceptNode(n)) {
       text = quotes(text);
       text = punctuation(text);
-      text = ligatures(text);
+      // TODO: Add back support for ligatures once their uppercased versions don't hang Chrome search anymore
+      // see: https://bugs.chromium.org/p/chromium/issues/detail?id=862648
+      // text = ligatures(text);
       n.nodeValue = text;
     }
   }
 }
 
+// 2018-07-11 shancarter@ and ludwigschubert@ no longer know what this was meant to accomplish
+// if it was trying to not replace text in any child nodes of those listed here,
+// then it does not accomplish that.
 function acceptNode(node) {
   var parent = node.parentElement;
   var isMath = (parent && parent.getAttribute && parent.getAttribute('class')) ? parent.getAttribute('class').includes('katex') || parent.getAttribute('class').includes('MathJax') : false;