diff --git a/examples/article.html b/examples/article.html
index 7a5b58a..ab59dbb 100644
--- a/examples/article.html
+++ b/examples/article.html
@@ -2,9 +2,12 @@
 
 <head>
   <script src="../dist/template.v2.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1" >
+  <meta charset="utf8">
 </head>
 
 <body>
+  <distill-header></distill-header>
 <d-front-matter>
   <script id='distill-front-matter' type="text/json">{
     "title": "Why Momentum Really Works",
diff --git a/src/components.js b/src/components.js
index e3006c9..564d005 100644
--- a/src/components.js
+++ b/src/components.js
@@ -16,6 +16,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 { HoverBox }        from './components/d-hover-box';
 import { Title }           from './components/d-title';
 import { DMath }           from './components/d-math';
 import { References }      from './components/d-references';
@@ -53,7 +54,7 @@ const distillMain = function() {
   /* Article will register controller which takes control from there */
   const components = [
     Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
-    Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure,
+    Footnote, FootnoteList, FrontMatter, HoverBox, Title, DMath, References, TOC, Figure,
     Slider, Interstitial
   ];
 
diff --git a/src/components/d-article.js b/src/components/d-article.js
index db5f06a..e8b12bd 100644
--- a/src/components/d-article.js
+++ b/src/components/d-article.js
@@ -1,6 +1,5 @@
 import { Template } from '../mixins/template';
 import { Controller } from '../controller';
-import style from '../styles/d-article.css';
 
 const isOnlyWhitespace = /^\s*$/;
 
diff --git a/src/components/d-cite.js b/src/components/d-cite.js
index 6713f5b..964bef6 100644
--- a/src/components/d-cite.js
+++ b/src/components/d-cite.js
@@ -1,6 +1,5 @@
 import { Template } from '../mixins/template';
 import { hover_cite, bibliography_cite } from '../helpers/citation';
-import { HoverBox } from '../helpers/hover-box';
 
 const T = Template('d-cite', `
 <style>
@@ -35,31 +34,13 @@ figcaption .citation-number {
   line-height: 1em;
 }
 
-.container {
-  position: fixed;
-  width: 100%;
-  left: 0;
-  z-index: 10000;
-  margin-top: 2em;
-}
-
-.dt-hover-box {
-  margin: 0 auto;
-  width: 400px;
-  max-width: 700px;
-  background-color: #FFF;
-  opacity: 0.95;
-  border: 1px solid rgba(0, 0, 0, 0.25);
-  padding: 8px 16px;
-  border-radius: 3px;
-  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
+d-hover-box {
+  margin-top: 1.9em;
 }
 
 </style>
 
-<div class="container">
-  <div id="hover-box" class="dt-hover-box"></div>
-</div>
+<d-hover-box id="hover-box"></d-hover-box>
 
 <div id="citation-" class="citation"><slot></slot><span class="citation-number"></span></div>
 `);
@@ -75,15 +56,12 @@ export class Cite extends T(HTMLElement) {
   // }
 
   connectedCallback() {
-    // this.notify();
-
-    this.hoverDiv = this.root.querySelector('.dt-hover-box');
     this.outerSpan = this.root.querySelector('#citation-');
     this.innerSpan = this.root.querySelector('.citation-number');
-    // this.outerSpan.id = `citation-${this.citeId}`;
-    // this.hoverDiv.id = `dt-cite-hover-box-${this.citeId}`;
-    // console.log(this, this.hoverDiv, this.outerSpan, this.innerSpan);
-    this.hoverbox = new HoverBox(this.hoverDiv, this.outerSpan);
+    this.hoverBox = this.root.querySelector('d-hover-box');
+    window.customElements.whenDefined('d-hover-box').then(() => {
+      this.hoverBox.listen(this);
+    });
   }
 
   disconnectedCallback() {
diff --git a/src/components/d-footnote.js b/src/components/d-footnote.js
index 94cb472..084106b 100644
--- a/src/components/d-footnote.js
+++ b/src/components/d-footnote.js
@@ -1,5 +1,4 @@
 import { Template } from '../mixins/template.js';
-import { HoverBox } from '../helpers/hover-box';
 
 const T = Template('d-footnote', `
 <style>
@@ -9,7 +8,6 @@ d-math[block] {
 }
 
 :host {
-  position: relative;
 }
 
 sup {
@@ -26,7 +24,7 @@ span {
 }
 
 .container {
-  position: fixed;
+  position: absolute;
   width: 100%;
   left: 0;
   z-index: 10000;
@@ -34,23 +32,22 @@ span {
 
 .dt-hover-box {
   margin: 0 auto;
-  width: 400px;
-  max-width: 700px;
+  width: 704px;
+  max-width: 100vw;
   background-color: #FFF;
   opacity: 0.95;
   border: 1px solid rgba(0, 0, 0, 0.25);
   padding: 8px 16px;
   border-radius: 3px;
   box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
 }
 
 </style>
 
-<div class="container">
-  <div id="hover-box" class="dt-hover-box">
-    <slot id="slot"></slot>
-  </div>
-</div>
+<d-hover-box>
+  <slot id="slot"></slot>
+</d-hover-box>
 
 <sup>
   <span id="fn-" data-hover-ref=""></span>
@@ -79,23 +76,24 @@ export class Footnote extends T(HTMLElement) {
     // const slot = this.shadowRoot.querySelector('#slot');
     // console.warn(slot.textContent);
     // slot.addEventListener('slotchange', this.notify);
-
+    this.hoverBox = this.root.querySelector('d-hover-box');
+    window.customElements.whenDefined('d-hover-box').then(() => {
+      this.hoverBox.listen(this);
+    });
     // create numeric ID
     Footnote.currentFootnoteId += 1;
     const IdString = Footnote.currentFootnoteId.toString();
     this.root.host.id = 'd-footnote-' + IdString;
 
     // set up hidden hover box
-    const div = this.root.querySelector('.dt-hover-box');
-    div.id = 'dt-fn-hover-box-' + IdString;
+    const id = 'dt-fn-hover-box-' + IdString;
+    this.hoverBox.id = id
 
     // set up visible footnote marker
     const span = this.root.querySelector('#fn-');
     span.setAttribute('id', 'fn-' + IdString);
-    span.setAttribute('data-hover-ref', div.id);
+    span.setAttribute('data-hover-ref', id);
     span.textContent = IdString;
-
-    this.hoverbox = new HoverBox(div, span);
   }
 
 }
diff --git a/src/components/d-hover-box.js b/src/components/d-hover-box.js
new file mode 100644
index 0000000..cb8a0ff
--- /dev/null
+++ b/src/components/d-hover-box.js
@@ -0,0 +1,132 @@
+import { Template } from '../mixins/template.js';
+
+const T = Template('d-hover-box', `
+<style>
+
+:host {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  z-index: 10000;
+  display: none;
+}
+
+.container {
+  position: relative;
+  width: 704px;
+  max-width: 100vw;
+  margin: 0 auto;
+}
+
+.panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: rgb(250, 250, 250);
+  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+
+</style>
+
+<div class="container">
+  <div class="panel">
+    <slot></slot>
+  </div>
+</div>
+`);
+
+export class HoverBox extends T(HTMLElement) {
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+
+  }
+
+  listen(element) {
+    console.log(element)
+    this.bindDivEvents(this);
+    this.bindTriggerEvents(element);
+    // this.style.display = "block";
+  }
+
+  bindDivEvents(element) {
+    // For mice, same behavior as hovering on links
+    element.addEventListener('mouseover', () => {
+      if (!this.visible) this.showAtNode(element);
+      this.stopTimeout();
+    });
+    element.addEventListener('mouseout', () => {
+      this.extendTimeout(500);
+    });
+    // Don't trigger body touchstart event when touching within box
+    element.addEventListener('touchstart', (event) => {
+      event.stopPropagation();
+    }, {passive: true});
+    // Close box when touching outside box
+    document.body.addEventListener('touchstart', () => {
+      this.hide();
+    }, {passive: true});
+  }
+
+  bindTriggerEvents(node) {
+    node.addEventListener('mouseover', () => {
+      if (!this.visible) {
+        this.showAtNode(node);
+      }
+      this.stopTimeout();
+    });
+
+    node.addEventListener('mouseout', () => {
+      this.extendTimeout(300);
+    });
+
+    node.addEventListener('touchstart', (event) => {
+      if (this.visible) {
+        this.hide();
+      } else {
+        this.showAtNode(node);
+      }
+      // Don't trigger body touchstart event when touching link
+      event.stopPropagation();
+    }, {passive: true});
+  }
+
+  show(position) {
+    this.visible = true;
+    this.style.display = 'block';
+  }
+
+  showAtNode(node) {
+    const bbox = node.getBoundingClientRect();
+    this.show([bbox.right, bbox.bottom]);
+  }
+
+  hide() {
+    this.visible = false;
+    this.style.display = 'none';
+    this.stopTimeout();
+  }
+
+  stopTimeout() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  }
+
+  extendTimeout(time) {
+    this.stopTimeout();
+    this.timeout = setTimeout(() => {
+      this.hide();
+    }, time);
+  }
+
+}
diff --git a/src/components/d-title.js b/src/components/d-title.js
index 199a321..e0cb177 100644
--- a/src/components/d-title.js
+++ b/src/components/d-title.js
@@ -1,50 +1,3 @@
-import { Template } from '../mixins/template';
-
-const T = Template('d-title', `
-<style>
-
-  :host {
-    padding: 4rem 0 1.5rem;
-    contain: content;
-    display: block;
-  }
-
-  ::slotted(h1) {
-    grid-column: text;
-    font-size: 60px;
-    font-weight: 600;
-    line-height: 1.05em;
-    margin: 0 0 1rem;
-  }
-
-  ::slotted(p) {
-    font-weight: 300;
-    font-size: 1.5rem;
-    line-height: 1.2em;
-    grid-column: text;
-  }
-
-  .status {
-    margin-top: 0px;
-    font-size: 12px;
-    color: #009688;
-    opacity: 0.8;
-    grid-column: kicker;
-  }
-  .status span {
-    line-height: 1;
-    display: inline-block;
-    padding: 6px 0;
-    border-bottom: 1px solid #80cbc4;
-    font-size: 11px;
-    text-transform: uppercase;
-  }
-</style>
-
-<!-- <div class="status"><span>✓ Peer Reviewed</span></div> -->
-<slot></slot>
-`);
-
-export class Title extends T(HTMLElement) {
-
+export class Title extends HTMLElement {
+  static get is() { return 'd-title'; }
 }
diff --git a/src/distill-components/distill-footer.js b/src/distill-components/distill-footer.js
index 04ce57a..b1f9f0a 100644
--- a/src/distill-components/distill-footer.js
+++ b/src/distill-components/distill-footer.js
@@ -7,7 +7,7 @@ const T = Template('distill-footer', `
 :host {
   color: rgba(255, 255, 255, 0.5);
   font-weight: 300;
-  padding: 60px 0;
+  padding: 2rem 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
   text-align: left;
diff --git a/src/helpers/hover-box.js b/src/helpers/hover-box.js
deleted file mode 100644
index 4efa6e9..0000000
--- a/src/helpers/hover-box.js
+++ /dev/null
@@ -1,109 +0,0 @@
-function make_hover_css(target_node, pos) {
-  const pretty = window.innerWidth > 600;
-  const padding = pretty? 18 : 12;
-  const outer_padding = pretty ? 18 : 0;
-  // const bbox = document.querySelector('body').getBoundingClientRect();
-  const bbox = target_node.offsetParent.getBoundingClientRect();
-  let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
-  let width = Math.min(window.innerWidth-2*outer_padding, 648);
-  left = Math.min(left, window.innerWidth-width-outer_padding);
-  width = width - 2 * padding;
-  return (`position: absolute;
-     background-color: #FFF;
-     opacity: 0.95;
-     max-width: ${width}px;
-     top: ${top}px;
-     left: ${left}px;
-     border: 1px solid rgba(0, 0, 0, 0.25);
-     padding: ${padding}px;
-     border-radius: ${pretty? 3 : 0}px;
-     box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
-     z-index: ${1e6};`);
-}
-
-export class HoverBox {
-
-  constructor(contentHTML, triggerElement) {
-    this.visible = false;
-    // div hold teh contents of the box that will become visible
-    this.div = contentHTML;
-    this.bindDivEvents(this.div);
-    // triggerElement holds the element that needs to be hovered etc to show contents
-    this.triggerElement = triggerElement;
-    this.bindTriggerEvents(this.triggerElement);
-    this.hide();
-  }
-
-  bindDivEvents(node) {
-    // For mice, same behavior as hovering on links
-    this.div.addEventListener('mouseover', () => {
-      if (!this.visible) this.showAtNode(node);
-      this.stopTimeout();
-    });
-    this.div.addEventListener('mouseout', () => {
-      this.extendTimeout(500);
-    });
-    // Don't trigger body touchstart event when touching within box
-    this.div.addEventListener('touchstart', (event) => {
-      event.stopPropagation();
-    }, {passive: true});
-    // Close box when touching outside box
-    document.body.addEventListener('touchstart', () => {
-      this.hide();
-    }, {passive: true});
-  }
-
-  bindTriggerEvents(node) {
-    node.addEventListener('mouseover', () => {
-      if (!this.visible) {
-        this.showAtNode(node);
-      }
-      this.stopTimeout();
-    });
-
-    node.addEventListener('mouseout', () => {
-      this.extendTimeout(500);
-    });
-
-    node.addEventListener('touchstart', (event) => {
-      if (this.visible) {
-        this.hide();
-      } else {
-        this.showAtNode(node);
-      }
-      // Don't trigger body touchstart event when touching link
-      event.stopPropagation();
-    }, {passive: true});
-  }
-
-  show(position) {
-    this.visible = true;
-    // const css = make_hover_css(this.triggerElement, position);
-    this.div.setAttribute('style', 'display: block;' );
-  }
-
-  showAtNode(node) {
-    const bbox = node.getBoundingClientRect();
-    this.show([bbox.right, bbox.bottom]);
-  }
-
-  hide() {
-    this.visible = false;
-    this.div.setAttribute('style', 'display: none;');
-    this.stopTimeout();
-  }
-
-  stopTimeout() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-  }
-
-  extendTimeout(time) {
-    this.stopTimeout();
-    this.timeout = setTimeout(() => {
-      this.hide();
-    }, time);
-  }
-
-}
diff --git a/src/styles/d-article.css b/src/styles/d-article.css
index 050b4e3..79707c9 100644
--- a/src/styles/d-article.css
+++ b/src/styles/d-article.css
@@ -3,6 +3,7 @@ d-article {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 2rem;
   color: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
 }
 
 d-article > * {
@@ -17,7 +18,7 @@ d-article > * {
 
 @media(min-width: 1024px) {
   d-article {
-    font-size: 1rem;
+    font-size: 1.06rem;
     line-height: 1.7em;
   }
 }
@@ -102,7 +103,6 @@ d-article blockquote {
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
-  -webkit-font-smoothing: antialiased;
 }
 
 d-article blockquote {
@@ -132,11 +132,15 @@ d-article ol {
 }
 
 d-article li {
-  margin-bottom: 24px;
+  margin-bottom: 1em;
   margin-left: 0;
   padding-left: 0;
 }
 
+d-article li:last-child {
+  margin-bottom: 0;
+}
+
 d-article pre {
   font-size: 14px;
   margin-bottom: 20px;
@@ -165,11 +169,14 @@ d-article span.equation-mimic {
 d-article > d-code,
 d-article section > d-code  {
   display: block;
+  overflow-x: scroll;
+
 }
 
 d-article > d-math[block],
 d-article section > d-math[block]  {
   display: block;
+  overflow-x: scroll;
 }
 
 d-article .citation {
diff --git a/src/styles/d-byline.css b/src/styles/d-byline.css
index c1602ee..1596fa7 100644
--- a/src/styles/d-byline.css
+++ b/src/styles/d-byline.css
@@ -7,14 +7,28 @@ d-byline {
   min-height: 1.8em;
 }
 
+
 d-byline .byline {
-  grid-template-columns: 2fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
   grid-column: text;
 }
 
-d-byline .authors-affiliations {
-  grid-template-columns: 1fr 1fr;
+@media(min-width: 768px) {
+  d-byline .byline {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
 
+d-byline .authors-affiliations {
+  grid-column-end: span 2;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 1em;
+}
+
+@media(min-width: 768px) {
+  d-byline .authors-affiliations {
+    margin-bottom: 0;
+  }
 }
 
 d-byline h3 {
diff --git a/src/styles/d-title.css b/src/styles/d-title.css
new file mode 100644
index 0000000..598c960
--- /dev/null
+++ b/src/styles/d-title.css
@@ -0,0 +1,55 @@
+d-title {
+  padding: 2rem 0 1.5rem;
+  contain: content;
+  overflow: hidden;
+}
+
+@media(min-width: 768px) {
+  d-title {
+    padding: 4rem 0 1.5rem;
+  }
+}
+
+d-title h1 {
+  grid-column: text;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.05em;
+  margin: 0 0 1rem;
+}
+
+@media(min-width: 768px) {
+  d-title h1 {
+    font-size: 60px;
+  }
+}
+
+d-title p {
+  font-weight: 300;
+  font-size: 1.2rem;
+  line-height: 1.7em;
+  grid-column: text;
+}
+
+@media(min-width: 768px) {
+  d-title p {
+    font-size: 1.5rem;
+  }
+}
+
+d-title .status {
+  margin-top: 0px;
+  font-size: 12px;
+  color: #009688;
+  opacity: 0.8;
+  grid-column: kicker;
+}
+
+d-title .status span {
+  line-height: 1;
+  display: inline-block;
+  padding: 6px 0;
+  border-bottom: 1px solid #80cbc4;
+  font-size: 11px;
+  text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css
index b92cbd9..cc679d7 100644
--- a/src/styles/styles-base.css
+++ b/src/styles/styles-base.css
@@ -1,5 +1,5 @@
 html {
-  font-size: 16px;
+  font-size: 14px;
 	line-height: 1.6em;
   /* font-family: "Libre Franklin", "Helvetica Neue", sans-serif; */
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
@@ -9,6 +9,12 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
+@media(min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+
 body {
   margin: 0;
 }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c883308..63f7927 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3,9 +3,10 @@ import layout from './styles-layout.css';
 import print from './styles-print.css';
 import byline from './d-byline.css';
 import article from './d-article.css';
+import title from './d-title.css';
 import math from './d-math.css';
 
-export const styles = base + layout + byline + article + math + print;
+export const styles = base + layout + title + byline + article + math + print;
 
 export function makeStyleTag(dom) {
 
