Moving headers in appendix to text column

Thanks, humbertaco!

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.24",
+  "version": "2.2.26",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.24",
+  "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...`);