2.2.25

package-lock.json

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

package.json

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

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